.NET MVC第七章、jQuery插件验证
目录
.NET MVC第七章、jQuery插件验证
环境引入
MVC使用script脚本
示例
效果
可复制使用案例
注：
环境引入
基础jQuery，这个在MVC项目内是自带的。
代码语言：javascript复制<script src="https://code.jquery.com/jquery-3.4.0.min.js"></script>验证js，MVC里是没有默认引入的，需要人为的主动引入。
代码语言：javascript复制<script src="~/Scripts/jQuery.validate.js"></script>
<script src="~/Scripts/jQuery.metadata.js"></script>
<script src="~/Scripts/jQuery.validate.messages_cn.js"></script>如果是VS2019需要引入一下几个包
代码语言：javascript复制<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的脚本信息。
代码语言：javascript复制@section Scripts{
<script type="text/javascript">
</script>
}示例
视图层
代码语言：javascript复制@{
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>
}控制器
代码语言：javascript复制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属性，方便在使用插件时将元素绑定校验规则和校验信息。】
源码
代码语言：javascript复制@{
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已解决该问题。建议使用最新版本。
