插件的下载地址：
http://plugins.jquery.com/project/validate
HTML代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>JQuery 验证插件</title>
<style type="text/css">
.text{border:solid 1px #ccc;}
em.error{background:url('/img/x.gif') no-repeat 0px 3px;padding-left:16px;margin-left:5px;color:red;}
em.success{background:url('/img/y.gif') no-repeat 0px 3px;padding-left:16px;margin-left:5px;}
</style>
<script type="text/javascript" src="Script/jquery1.3.2.min.js"></script>
<script type="text/javascript" src="Script/jquery.validate.min.js"></script>
<script type="text/javascript" src="Script/messages_cn.js"></script>
<script type="text/javascript">
//这里要实现的是自己写的验证规则
$.validator.addMethod(
"mobieCN",
function(value,element)
{
var mobie = /^0?(13|15|18)[0-9]{9}$/;
return this.optional(element) || (mobie.test(value));
},
"请输入正确的手机号码"
);
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#form1").validate({
rules:{
txtName:{required:true,minlength:2},
txtAge:{required:true,},
txtPassword:{required:true},
txtPassword2:{required:true,equalTo: '#txtPassword'},
txtTel:{required:true},
txtMobie:{required:false,mobieCN:true},
txtEmail:{required:true,email:true}
},
messages:
{
txtName:{required:'不能为空',minlength:'不能少于2个字符'},
txtPassword2:{equalTo:'2次输入的密码不一致'}
},
errorElement:"em",
/* 错误信息的显示位置,可以省略不写 */
errorPlacement: function(error, element) {
error.appendTo(element.parent());
},
success:function(label)
{
label.text(" ").addClass("success");
},
/*获得焦点时，是否验证。默认为true*/
focusInvalid:false,
/*按下键盘以后，是否验证。默认为true*/
onkeyup:false
});
});
</script>
</head>
<body>
<form id="form1" action="/JQuertValidate.html" method="post">
<div>
<table>
<tr>
<td>姓 名：</td>
<td><input id="txtName" name="txtName" class="text" type="text" /></td>
</tr>
<tr>
<td>年 龄：</td>
<td><input id="txtAge" name="txtAge" class="text" type="text" /></td>
</tr>
<tr>
<td>密 码：</td>
<td><input id="txtPassword" name="txtPassword" class="text" type="text" /></td>
</tr>
<tr>
<td>确认密码：</td>
<td><input id="txtPassword2" name="txtPassword2" class="text" type="text" /></td>
</tr>
<tr>
<td>电 话：</td>
<td><input id="txtTel" name="txtTel" class="text" type="text" /></td>
</tr>
<tr>
<td>手 机：</td>
<td><input id="txtMobie" name="txtMobie" class="text" type="text" /></td>
</tr>
<tr>
<td>邮 件：</td>
<td><input id="txtEmail" name="txtEmail" class="text" type="text" /></td>
</tr>
<tr>
<td colspan="2">
<input id="Button1" class="sumbit" type="submit" value="提 交1"/>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
效果图如下：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
