Jquery Validate两步实现输入合法校验
作者：陆金龙
发表时间：2014-10-05 11:37
Step1：引用Jquery库和jquery.validate.js库
<script src="../Script/jquery-1.7.2.js"></script>
<script src="../Script/jquery.validate.js"></script>
Step2：在页面加载完成后中对表单注册校验机制
要验证的表单和表单元素通过Id匹配，在rules中定义验证规则，在message中定义不合法的提示信息。
<script type="text/javascript">
$(function () {
$("#frmReg").validate({
rules: {
txtUserName: {
required: true,
maxlength: 50
},
txtNickname: {
required: true,
maxlength: 50
},
txtPassword: {
required: true,
minlength: 6
},
txtPassword2: {
required: true,
minlength: 6,
equalTo: "#txtPassword"
},
txtEmail: {
email: true
}
},
messages: {
txtUserName: "*",
txtNickname: "*",
txtPassword: {
required: "*",
minlength: "*密码不能小于6个字符"
},
txtPassword2: {
required: "*",
minlength: "确认密码不能小于6个字符",
equalTo: "两次输入密码不一致"
},
txtEmail: {
required: "*",
email: "*请输入正确的Email地址"
}
}
});
});
</script>
附：表单及表单元素的代码如下：
<form id="frmReg" method="post" action="Register.aspx">
<div id="divMain">
<div class="title">
用户注册
</div>
<table style="margin-top: 10px;">
<tr>
<td class="right">登录帐号：</td>
<td>
<input type="text" id="txtUserName" name="txtUserName" />
</td>
</tr>
<tr>
<td class="right">用户昵称：</td>
<td>
<input type="text" id="txtNickname" name="txtNickname" />
</td>
</tr>
<tr>
<td class="right">密码：</td>
<td>
<input type="password" id="txtPassword" name="txtPassword" />
</td>
</tr>
<tr>
<td class="right">确认密码：</td>
<td>
<input type="password" id="txtPassword2" name="txtPassword2" />
</td>
</tr>
<tr>
<td class="right">Email：</td>
<td>
<input type="text" id="txtEmail" name="txtEmail" />
</td>
</tr>
<tr>
<td colspan="2" style="text-align: center;">
<input id="submit" type="submit" value="注册" /></td>
<td></td>
</tr>
</table>
<div></div>
</div>
</form>