MVC validate数据验证

最新推荐文章于 2022-08-31 11:55:46 发布

无盐海

最新推荐文章于 2022-08-31 11:55:46 发布

阅读量2k

点赞数

分类专栏： JQuery Mvc

本文链接：https://blog.csdn.net/Fanbin168/article/details/44302901

版权

Mvc 同时被 2 个专栏收录

79 篇文章 1 订阅

订阅专栏

JQuery

53 篇文章 0 订阅

订阅专栏

validate数据验证

jquery validation插件用法之自定义规则

jquery.validate使用攻略第三部

jquery.validate使用攻略第五步正则验证

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Validate验证测试</title>

    @*@Scripts.Render("~/bundles/jquery")*@
    <script src="~/Scripts/jquery-1.8.2.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>

    <style type="text/css">
        td label.error { /*设置验证错误信息的样式(选择td标签下具有error样式的label标签)*/
            border: 1px solid Grey;
            color: #880000;
            height: 25px;
            font-size: 14px;
            margin-left: 5px;
            padding-left: 16px;
            background: url("/images/imageError.jpg" ) -3px 16px; /*表示从图片的横坐标为0个像素，纵坐标为16个像素的地方获取图片*/
            background-repeat: repeat-y; /*表示背景图片沿着垂直方向重复平铺    */
        }
    </style>

</head>
<body>
    <form id="form1">
        <div>
            <table>
                <tr><th>用户名：</th><td><input type="text" name="userName" id="userName"></td></tr>
                <tr><th>密码：</th><td><input type="password" name="pwd" id="pwd"></td></tr>
                <tr><th>重复密码：</th><td><input type="password" name="rePwd"></td></tr>
                <tr><th>年龄：</th><td><input type="text" name="age"></td></tr>
                <tr><th>邮箱：</th><td><input type="text" name="email"></td></tr>
                <tr><th>网址：</th><td><input type="text" name="url"></td></tr>
                <tr><th>电话：</th><td><input type="text" name="mobile"></td></tr>
                <tr><th>金额：</th><td><input type="text" name="money"></td></tr>
                <tr><th>地址:</th><td><input type="text" name="adderss"></td></tr>
                <tr><th>日期:</th><td><input type="text" name="dateTime"></td></tr>
                <tr><td><input type="submit" value="提交"></td><td id="errorMsg"></td></tr>
            </table>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">
    //经实践证明，要想控件在失去焦点的时候触发验证，就必须将onkeyup设为false，将onblur设为true【onblur事件表示：在控件失去焦点的时候触发验证，onkeyup事件表示：在键盘按键被松开时发生，默认为true】
    $(function () {
        var checkUserNameResult;
        $("#form1").validate({
            //onfocusout: false,
            onkeyup: false,
            onblur: true,
            focusCleanup: true,//如果该属性设置为True, 那么控件获得焦点时，移除出错的class定义，隐藏错误信息，避免和 focusInvalid.一起用。


            /*
            errorElement: "span", //用来创建错误提示信息的标签，这里将错误提示信息标签定义为<span>标签。如果不定义,默认就是label标签。

            //关于errorPlacement: function (error, element)函数的参数 error其实就是上面定义的那个“创建错误提示信息的标签”；如果有错误就会生成一个<span>标签用于显示错误信息；即： <span class="error" generated="true" for="userName">用户名过短</span>
            //而element就是错误提示信息的<span>标签本身 ；alert(element.attr("class"));获取这个对象的class值。这里打印出error


            errorPlacement: function (error, element) {
                //指明错误放置的位置
                error.appendTo($("#errorMsg")); //将<span class="error" generated="true" for="userName">用户名过短</span>这个标签添加到id为errorMsg这个标签里面。

                //默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面【注：element.parent()方法是获取element这个对象的父元素】
            },

            */

            /*
            success:function(abc){  //当验证成功后执行的会跳函数
                abc.text("")    //如果验证成功后就将“错误信息提示标签”的text值设为空。 其实这一步不需要我们做，validate里面已经给我们封装好了。如果有需要当然可以自定义。
                    .addClass("abClass");  //再给它添加一个自定的abClass样式
            },
            */


            rules: {
                userName: {
                    required: true,
                    isChar:true, //自定义检查用户名是否为汉字（规定用户名只能为汉字）
                    minlength: 2,
                    maxlength: 10,
                    remote: { //检查用户名是否存在
                        type: "post",
                        url: "/Home/GetUserName",
                        data: {
                            UserName: function () {
                                return $("#userName").val();//如果直接写“data: {username: $("#txtUserName").val();}”，这样是获取不到值的。
                            }
                        },                      
                        dataType: "html", //特别要注意，dataType为html的时候服务器返回类型应该是string
                        //dataType:"json"， 如果dataType为json的时候服务器的返回类型是Json （ActionResult，或JsonResult）

                        dataFilter: function (data, type) { //dataFilter 是给 Ajax 返回的原始数据的进行预处理的函数。提供 data 和 type 两个参数：data 是 Ajax 返回的原始数据，type 是调用 jQuery.ajax 时提供的 dataType 参数。函数返回的值将由 jQuery 进一步处理。
                            if (data == "true") {                               
                                return true;
                            }
                            else {
                                checkUserNameResult = "用户名已经存在"
                                return false;
                            }
                        }
                    }

                },
                pwd: {
                    required: true,   //密码不能为空
                    rangelength: [5, 10] //密码长度为5-10位
                },
                rePwd: {
                    required: true,
                    equalTo: "#pwd"
                },
                age: {
                    required: true,
                    checkAge:true, //年龄自定义检查，检查年龄不能小于或等于0岁
                    min: 0, //年龄的最小值为0岁。
                    max: 150, //年龄的最大值不能超过150岁
                    digits: true,  //年龄应为整数


                },
                email: {
                    required: true,
                    email: true //邮件的格式是否正确
                },
                url: {
                    required: true,
                    url: true //是否为url的格式
                },
                mobile: {
                    required: true,
                    isMobile: true //自定义检查
                },
                money: {
                    required: true,
                    number: true
                },
                adderss: {
                    required: true
                },
                dateTime: {
                    required: true,
                    dateISO: true  //日期格式为“2015-06-01”或“2015/06/01”（只验证格式，不验证有效性）
                }
            },
            messages: {
                userName: {
                    required: "*",
                    isChar: "用户名只能是汉字",
                    minlength: "用户名过短",
                    maxlength: "用户名过长",
                    remote: function () { return checkUserNameResult } //这样才可以得到 checkUserNameResult变量的值
                },
                pwd:
                    {
                        required: "*",
                        rangelength: "密码长度为5-10位"
                    },
                rePwd: {
                    required: "*",
                    equalTo: "两次密码不一致"
                },
                age: {
                    required: "*",
                    checkAge: "年龄不能小于或等于0岁",
                    max: "超出正常年龄",
                    min: "年龄太小",
                    digits: "年龄应为整数",
                },
                email: {
                    required: "*",
                    email: "邮箱格式不正确"
                },
                url: {
                    required: "*",
                    url: "网址格式不正确"
                },
                mobile: {
                    required: "*",
                    isMobile: "请输入正确的电话"
                },//这里使用了自定义的验证方式，检查Mobile的格式是否正确
                money: {
                    required: "*",
                    number: "请输入正确的金额"
                },
                adderss: {
                    required: "*"
                },
                dateTime: {
                    required: "*",
                    dateISO: "日期格式不正确"
                }, //日期格式为“2015-06-01”或“2015/06/01”（只验证格式，不验证有效性

            },
            submitHandler: function (form) {
                form.submit();
            }
        });

        jQuery.validator.addMethod("isChar", function(value, element) {
            var length = value.length;
            var regName = /[^\u4e00-\u9fa5]/g;
            return this.optional(element) || !regName.test( value );
        }, "请正确格式的姓名(暂支持汉字)");

        jQuery.validator.addMethod("checkAge", function (age, element) {
            //alert(this.optional(element)) 当传递过来的值为空的时候 this.optional(element)返回true

            if (age <= 0) {
                return false; //如果名字<=0 就验证不通过。验证不通过即返回false
            }
            else {
                return true;
            }
            ;
        }, "请正确填写您的年龄");


        jQuery.validator.addMethod("isMobile", function (value, element) {//验证手机号码 ：value是用户输入的手机号码值，element是输入手机号码的这个控件本身，即它是一个对象，既然它是一个对象，那么就会有属性，element.value即是用户输入的手机号码值
            //alert(value); 假如我输入一个数字2 这里打印出2
            //alert(element.value); 这里打印出2
            //alert(element.name); 这里打印出mobile
            var length = value.length;
            var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
            var tel = /^(\d{3,4}-?)?\d{7,9}$/g;
            return this.optional(element) || tel.test(value) || (length == 11 && mobile.test(value)); //optional方法，用于表单位数值是否为空。
        }, "请正确填写您的联系方式");



        /*this.optional(element)的意思就是是判断传递过来的值是否为空。
        当传递过来的值为空的时候 this.optional(element)返回true
        如果值传递过来的值不为空，那么this.optional(element)返回false

        比如对一个文本框进行最小值验证，当值为空时，this.optional(element) = true;
        当有值时，不管是多少，无论是否滿足规则 ，this.optional(element) = false.
        为什么要加上这句呢，想想看你要设定一个minlength:2规则，但这不是必填值。来看下minlength验证规则

        minlength: function(value, element, param) {

            return this.optional(element) || this.getLength($.trim(value), element) >= param;
        },
        如果没加上this.optional(element) ，当输入值为空时，this.getLength($.trim(value), element) >= param 就是0>=2显然是false.那验证就永远成功不了了。*/

        //( 验证规则参数说明：value代表要验证element的值，param代表例如minlength:2规则中的2 ,function返回结果为true时成功，其它失败)

    })
</script>

下面是用户检查用户名是否存在的方法

using MvcApplication1.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MvcApplication1.Controllers
{
    public class HomeController : Controller
    {
        salesEntities db = new salesEntities();
        //
        // GET: /Home/

        public ActionResult Index()
        {
            return View();
        }
        
        /// <summary>
        /// 检查用户名是否存在
        /// </summary>
        /// <param name="UserName">需要验证的用户名</param>
        /// <returns>
        /// 如果异步请求的dataType值为"html"这个方法的返回类型应该是string，如果是dataType值为"json" 这个方法的返回类型应该是JsonResult
        /// </returns>
        public string GetUserName(string UserName) //注意了，这个方法的返回值是string类型，千万不要设置成bool类型。之前因为设置成了bool类型老是报错。
        {
            var query = db.T_UserInfo.SingleOrDefault(r => r.Name == UserName);
            if (query == null)
            {
                return "true"; //注意这个"true" 是一个字符串，不是一个布尔值
                //return Json(true,JsonRequestBehavior.AllowGet)
            }
            else
            {
                return "false"; //注意这个"false" 是一个字符串，不是一个布尔值
                //return Json(false,JsonRequestBehavior.AllowGet)
            }
        }

    }
}

上面是我自己做的，下面是在网上找到的一段js

jquery.validate 学习札记

<script>
    $(document).ready(function() {
        //通过id查找要进行校验的表单
        $("#signupForm").validate({
            //设置校验触发的时机,默认全是true。不要尝试去设置它为true，可能会有js错误。
            //onsubmit:false,
            //onfocusout:false,
            //onkeyup:false,
            //onclick:false,

            //验证通过后执行的动作
            //success:function(label){
            //    label.text("ok!").addClass("success");
            //},
            //手动设置错误信息的显示方式
            errorPlacement: function(error, element) {
                error.appendTo(element.parent().next());
                //    if ( element.is(":radio") )
                //        error.appendTo( element.siblings("span") );
                //    else if ( element.is(":checkbox") ){
                //        error.appendTo ( element.siblings("span") );
                //    }
                //        else
                //        error.appendTo( element.parent() );
            },
            rules: {
                username: {
                    required: true,
                    rangelength: [5, 7]
                },
                password: {
                    required: true,
                    minlength: 5
                },
                confirm_password: {
                    required: true,
                    minlength: 5,
                    equalTo: "#password"
                },
                sex: {
                    required: true
                },

                email: {
                    required: true,
                    email: true
                },
                language: {
                    required: true,
                    rangelength: [2, 3]
                },
                book: {
                    required: true,
                    rangelength: [2, 3]
                },
                agree: "required",
                upload: {
                    required: true,
                    accept: "flv|jpg"
                }
            },
            //校验提示信息
            messages: {
                username: {
                    required: "请输入用户名",
                    rangelength: "用户名长度必须为{0}到{1}个字符或汉字"
                },
                password: {
                    required: "请输入密码",
                    minlength: "密码的最小长度是{0}个字符"
                },
                confirm_password: {
                    required: "请输入确认密码",
                    minlength: "确认密码的最小长度是{0}个字符",
                    equalTo: "确认密码与密码不相等"
                },
                email: "请输入正确的邮箱",
                language: {
                    required: "该项必须填写",
                    rangelength: "请您选择{0}到{1}项语言"
                },
                book: {
                    required: "该项必须选择",
                    rangelength: "请您选择{0}到{1}本书"
                },
                agree: "您没有同意使用协议",
                upload: {
                    required: "请输入上传文件的路径",
                    accept: "上传文件的格式只能是 flv或jpg"
                }
            }
        });
    });
</script>

jQuery的validate插件使用整理-传智播客

验证用户名是否存在

控制器（注意：控制器返回值是一个Json）

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using WebApp.Models;

namespace WebApp.Controllers
{
    public class HomeController : Controller
    {
        public ActionResult Index()
        {
            return View();
        }

        /// <summary>  
        /// 检查用户名是否存在  
        /// </summary>  
        /// <param name="UserName">需要验证的用户名</param>  
        /// <returns>注意这里返回的是一个Json</returns>  
        public JsonResult GetUserName(string UserName)
        {
            var result = false;
            salesEntities db = new salesEntities();
            var query = db.T_UserInfo.SingleOrDefault(r => r.Name == UserName);
            if (query == null)
            {
                result = true;
            }
            else
            {
                result = false;
            }
            return Json(result, JsonRequestBehavior.AllowGet);
        }
    }
}

视图

@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <script src="~/Scripts/jquery-1.10.2.js"></script>
    <script src="~/Scripts/jquery.validate.min.js"></script>

</head>
<body>
    <form id="form1">
        <div>
            <table>
                <tr><th>用户名：</th><td><input type="text" name="userName" id="userName"></td></tr>                
                <tr><td><input type="submit" value="提交"></td><td id="errorMsg"></td></tr>
            </table>
        </div>
    </form>
</body>
</html>
<script type="text/javascript">  
    $(function () {

        $("#form1").validate({
            onkeyup: false,
            onblur: true,

            rules: {
                userName: {
                    required: true,                  
                    remote: { 
                        type: "post",
                        url: "/Home/GetUserName",
                        data: {
                            UserName: function () {
                                return $("#userName").val();//如果直接写“data: {username: $("#txtUserName").val();}”，这样是获取不到值的。
                            }
                        },                       
                    }
                },
            },
            messages: {
                userName: {
                    required: "用户名为必填项",
                    remote: "用户名已经存在了"
                },               
            },
            submitHandler: function (form) {
                form.submit();
            }
        });
    })
</script>