环境引入
基础jQuery，这个在MVC项目内是自带的。
<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>
验证js，MVC里是没有默认引入的，需要人为的主动引入。
<script src="~/Scripts/jQuery.validate.js"></script> <script src="~/Scripts/jQuery.metadata.js"></script> <script src="~/Scripts/jQuery.validate.messages_cn.js"></script>
如果是VS2019需要引入一下几个包
<script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
如果是VS2019在创建的过程中自带这些内容，VS2017则会少一些，例如jQuery是1.0版本的，也会有验证功能的js。
MVC使用script脚本
MVC中由于母版页中已经引入了jQuery故而直接使用即可，但是这里需要使用@section Scripts来写入script的脚本信息。
@section Scripts{ <script type="text/javascript"> </script> }
示例
视图层
@{ ViewBag.Title = "Index"; } <h2>jQuery验证</h2> <hr /> <form action="~/Test/Index" method="get" id="form_test"> <p> 用户名：<input type="text" name="userName" placeholder="请输入用户名" /> </p> <p> 密码：<input type="text" name="pwd1" id="pwd1" placeholder="请输入用户密码" /> </p> <p> 确认密码：<input type="text" name="pwd2" placeholder="请输入用户密码" /> </p> <input type="submit" value="提交" /> </form> @ViewBag.Info @section Scripts{ <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <script type="text/javascript"> $(function () { $("#form_test").validate({ rules: { userName: { required: true },// 用户名非空 pwd1: { required: true },// 密码非空 pwd2: { required: true, equalTo: "#pwd1" }// 确认密码非空,是否和密码一致 }, messages: { userName: { required: "请输入用户名！！" }, pwd1: { required: "请输入密码！" }, pwd2: { required: "请输入确认密码！", equalTo: "两次密码输入的不一致！" }, } }); }); </script> }
控制器
public ActionResult Index(string userName,string pwd1) { ViewBag.userName = userName; ViewBag.pwd = pwd1; ViewBag.Info = userName + ":" + pwd1; return View(); }
效果
所有信息不允许为空
两次密码不同
正确输入
提交成功
可复制使用案例
为了让表单结构简单而清晰，我们将表单的每个元素都包裹在一个div结构中：用label标签用来标记元素的名称，接着便是表单元素本身。
注明：
1.使用label标签的好处是为鼠标用户改进了可用性。当在label元素内点击文本时，浏览器就会自动将焦点转到和label相关的表单控件上。
2.每个需要校验的表单元素都应该设置id和name属性，方便在使用插件时将元素绑定校验规则和校验信息。】
源码
@{ ViewBag.Title = "Index"; } <h2>jQuery验证</h2> <hr /> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>jquery validate验证</title> @section Scripts{ <script src="~/Scripts/jquery.validate.js"></script> <script src="~/Scripts/jquery.validate.min.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.js"></script> <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script> <script type="text/javascript"> $(function () { //让当前表单调用validate方法，实现表单验证功能 $("#ff").validate({ debug: true, //调试模式，即使验证成功也不会跳转到目标页面 rules: { //配置验证规则，key就是被验证的dom对象，value就是调用验证的方法(也是json格式) sname: { required: true, //必填。如果验证方法不需要参数，则配置为true rangelength: [4, 12], remote: { url: "ajax_check.action", type: "post" } }, spass: { required: true, rangelength: [6, 16] }, spass2: { required: true, equalTo: '#password' //表示和id="spass"的值相同 }, saddress: { required: true }, sphone: { required: true, phone: true }, slike: { required: true, }, semail: { required: true, email: true }, simage: { required: true, extension: 'gif|jpe?g|png' } }, messages: { sname: { required: "请输入用户名", rangelength: $.validator.format("用户名长度为{0}-{1}个字符"), remote: "该用户名已存在！" }, spass: { required: "请输入密码", rangelength: $.validator.format("密码长度为{0}-{1}个字符") }, spass2: { required: "请再次输入密码", equalTo: "两次密码必须一致" //表示和id="spass"的值相同 }, sphone: { required: "请输入手机号" }, saddress: { required: "请选择地址" }, slike: { required: "请选择爱好", }, semail: { required: "请填写邮件", email: "邮箱格式不正确" }, simage: { required: "请选择要上传的头像", extension: "文件后缀名必须为jpg,jpeg,gif,png" } } }); }); </script> } </head> <body> <form action="http://www.hao123.com" method="post" id="ff"> <fieldset> <legend>jQuery-Validate表单校验验证</legend> <div class="item"> <label for="username" class="item-label">用户名:</label> <input type="text" id="username" name="sname" class="item-text" placeholder="设置用户名" autocomplete="off" tip="请输入用户名"> </div> <div class="item"> <label for="password" class="item-label">密码:</label> <input type="password" id="password" name="spass" class="item-text" placeholder="设置密码" tip="长度为6-16个字符"> </div> <div class="item"> <label for="password" class="item-label">确认密码:</label> <input type="password" name="spass2" class="item-text" placeholder="设置确认密码"> </div> <div class="item"> <label for="phone" class="item-label">手机号码:</label> <input type="text" id="phone" name="sphone" class="item-text" placeholder="输入手机号码" tip="请输入手机号码"> </div> <div class="item"> <label for="saddress" class="item-label">所在地:</label> <select name="saddress" class="item-select"> <option value="">---请选择---</option> <option value="北京">北京</option> <option value="上海">上海</option> <option value="深圳">深圳</option> </select> </div> <div class="item"> <label for="slike" class="item-label">爱好：</label> 上网：<input type="checkbox" name="slike" value="上网" /> 唱歌：<input type="checkbox" name="slike" value="唱歌" /> 编程：<input type="checkbox" name="slike" value="编程" /> 书法：<input type="checkbox" name="slike" value="书法" /><br /> </div> <div class="item"> <label for="semail" class="item-label">邮箱:</label> <input type="text" id="semail" name="semail" class="item-text" placeholder="设置邮箱" autocomplete="off" tip="请输入邮箱"> </div> <div class="item"> <label for="simage" class="item-label">头像:</label> <input type="file" name="simage" class="item-file"> </div> <div class="item"> <input type="submit" value="提交" class="item-submit"> </div> </fieldset> </form> </body> </html>
注：
jQuery1.9之后的版本把所有在早期版本里标记为deprecated的api都正式删除了，不再向后兼容。所以使用MVC模板自动生成的jQuery-3.3.1.min.js时会报脚本错，导致无法完成验证。 Visual Studio 2019中生成的mvc项目中，自动生成的jQuery-3.4.1.min.js已解决该问题。建议使用最新版本。
