生活随笔
收集整理的这篇文章主要介绍了
MVC jQuery表单验证
小编觉得挺不错的,现在分享给大家,帮大家做个参考.
jQuery表单验证
- 前言:
数据验证分为客户端验证和服务端验证，或两种方式相结合。在客户端验证会减少服务器端的工作量。 - 作用：
从数据验证的作用角度来说，数据验证起到很重要的作用，如防止漏洞注入，防止网络攻击，确保数据安全，确保数据合理性，防止垃圾数据等作用 - 分类：
从数据验证的种类来说，一般分为第三方验证，比如我们用jQuery写好验证插件，在客户端用ajax验证和基于点内的mvc框架的数据验证
jQuery，
客户端脚本验证技术（在用户电脑上完成）
表单验证，大致可以分为以下五种类型：
必填检查（非空）
范围检查（符合某个范围）
比较验证（再次输入密码）
格式验证（邮箱，日期）
特殊验证（开发实际需求）
举例，注册账户的新密码表单验证：
方法1，手写前端html代码：
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>function checkform() {if (checkpwd1() && checkpwd2() && checkuser()) {$("#ErrorMsd").html("886");return true;}else {$("#ErrorMsd").html("请完善信息");return false;}}function checkuser() {if ($("#uname").val() == "") {$("#ErrorMsg").html("用户名不能为空！");$("#uname").focus();return false;}else {$("#ErrorMsd").html("ok");return true;}}function checkpwd1() {if ($("#pwd1").val() == "") {$("#ErrorMsg1").html("不能为空！");$("#pwd1").focus();return false;}else {$("#ErrorMsd1").html("ok");return true;}}function checkpwd2() {if ($("#pwd2").val() == "") {$("#ErrorMsg2").html("不能为空！");$("#pwd2").focus();return false;}else {$("#ErrorMsd2").html("ok");return true;}}
</script><html>
<head><title></title>
</head>
<body>@using (Html.BeginForm("index", "home", FormMethod.Post)){
<table><tr><td>用户名：
</td><td>@Html.TextBox("uname","",new { onblur = "checkuser()"})
</td><td><span id="ErrorMsg" style="color:deeppink"></span></td></tr><tr><td>Newpwd：
</td><td>@Html.TextBox("pwd1", "", new { onblur = "checkpwd1()" })
</td><td><span id="ErrorMsg1" style="color:deeppink"></span></td></tr><tr><td>Confirm pwd：
</td><td>@Html.TextBox("pwd2", "", new { onblur = "checkpwd2()" })
</td><td><span id="ErrorMsg2" style="color:deeppink"></span></td></tr></table><input type="submit" value="提交" class="btn btn-primary" onclick="checkform()"/>}
</body>
</html>
方法2，使用jQuery的Validate插件
1.引入插件
2.前端Html代码：
<script src="~/Scripts/jquery.validate.js"></script>
<script src="~/Scripts/jquery.metadata.js"></script>
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script>$(function () {$("表单ID").validate({rules: {uname: { required: true },upwd1: { required: true },upwd2: { required: true, equalTo:"#upwd1" }}, messages: {uname: { required: "请输入用户名！" },upwd1: { required: "请输入密码" },upwd2: {required: "确认密码：",equalTo: "#不一致！"}}})})
</script>
总结
以上是生活随笔为你收集整理的MVC jQuery表单验证的全部内容，希望文章能够帮你解决所遇到的问题。
如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。
