一、前言
在必填验证和比较验证中代码虽然简单,但是代码量多,然而,JQuery的Validate插件封装了常用的表单验证规则,这个插件可以简化表单验证。
二、视图代码
<body>
<div>
@using (Html.BeginForm("Index", "Home", FormMethod.Post,new { id="reginsterFrm"}))
{
<span>用户名:@Html.TextBox("uname")</span><br/>
<span>密码:@Html.TextBox("pwd")</span><br />
<span>确认密码:@Html.TextBox("repwd")</span><br />
<span><input type="submit" value="提交" /></span>
}
</div>
//js文件一定要按顺序引入!!!
<script src="~/Content/jquery.min.js"></script>
<script src="~/Content/jquery.validate.min.js"></script>
<script src="~/Content/jquery.validate.unobtrusive.min.js"></script>
<script>
$(function () {
$("#reginsterFrm").validate({
rules: {
uname: { required: true },
pwd: { required: true },
repwd: { required: true,equalTo:"#pwd"}//确认密码非空,两次密码一致
},
messages: {
uname: { required: "请输入用户名" },
pwd: { required: "密码不能为空" },
repwd: {required:"确认密码不能为空",equalTo:"两次密码不一致"}
}
});
});
</script>
</body>
三、运行结果
没输入全部值时提交
两次密码验证
成功提交