juery 实现表单验证

来源：互联网发布：九宫飞星兼盘`软件编辑：程序博客网时间：2024/06/05 13:38

<!DOCTYPE html>
<html>
<head>
<title>jq验证</title>
<style type="text/css">
*{margin:0px;padding: 0px; font-size: 14px;}
.main{margin: 0px auto;width:1000px;}
.topfix{width:880px;line-height: 26px;margin-top: 5px;}
.topfix dt{float: left; width: 120px;text-align: right;}
.topfix dd{float: left;}
.topfix input{width: 240px;height: 26px;}
.bot{float: left;border: 1px solid #ccc;padding-left: 10px;display: none;}
.clear{overflow:hidden;height: 0px;clear: both;}
</style>
<script type="text/javascript" src="../script/jquery.js"></script>
<script>
$(document).ready(function(){
var emailr = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
var tel = /^1\d{10}$/;
var pwd = /^(\w){6,20}$/;
var user =/^[a-zA-Z]{1}([a-zA-Z0-9]|[._]){4,19}$/;
//用户名验证
$("input[name='user']").blur(function(){
if (!user.test($("input[name='user']").val())) {
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
};
})
//密码验证
$("input[name='pwd']").blur(function(){
if (!pwd.test($("input[name='pwd']").val())) {
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
};
});
//二次验证
$("input[name='spwd']").blur(function(){
if ($("input[name='spwd']").val()!=$("input[name='pwd']").val()) {
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});
//验证邮箱
$("input[name='email']").blur(function(){
if(!emailr.test($("input[name='email']").val())){
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}

});
//验证电话
$("input[name='tel']").blur(function(){
if (!tel.test($("input[name='tel']").val())) {
$(this).parent().next().show();
}else{
$(this).parent().next().hide();
}
});
});
</script>
</head>
<body>
<div class="main">
<dl class="topfix">
<dt>用户名：</dt>
<dd><input type="text" name="user" /></dd>
<div class="bot">*只能输入5-20个以字母开头、可带数字、“_”、“.”的字串</div>
<div class="clear"></div>
</dl>
<dl class="topfix">
<dt>密码：</dt>
<dd><input type="password" name="pwd" /></dd>
<div class="bot">*只能输入6-20个字母、数字、下划线</div>
<div class="clear"></div>
</dl>
<dl class="topfix">
<dt>密码确认：</dt>
<dd><input type="password" name="spwd" /></dd>
<div class="bot">*和上次输入不一致</div>
<div class="clear"></div>
</dl>
<dl class="topfix">
<dt>邮箱：</dt>
<dd><input type="text" name="email"/></dd>
<div class="bot">*此为必填项</div>
<div class="clear"></div>
</dl>
<dl class="topfix">
<dt>电话：</dt>
<dd><input type="text" name="tel"/></dd>
<div class="bot">*请输入有效电话号码</div>
<div class="clear"></div>
</dl>
</div>
</body>
</html>

0 0