JQuery Validate 的自定义检查使用方法

一、导入js

菜鸟教程提供的 1.14.0 版本下载地址:http://static.runoob.com/download/jquery-validation-1.14.0.zip

<script src="~/assets/js/jquery-2.1.0.min.js"></script>
<script src="~/assets/js/jquery.validate.js"></script>
<script src="~/assets/js/messages_zh.js"></script>

二、检测后常规默认操作方法

在同一个试图页是不可以写两个该方法,因为默认操作有两个的话,在界面检测后,没有办法判别是哪一个默认方法。所以,如果一个界面有多个模块检测,最好使用下面第三点方法。

 <!--检测-->
 <!--AJAX提交信息-->
    <script>
    //validate 的默认值
    $.validator.setDefaults({
        submitHandler: function () {
          alert("此处写验证后要写的操作");
        }
    });

    //普通管理员界面
    $().ready(function () {
        $("#Forms").validate({
            rules: {
                字段名1: {
                    required: true,
                    isIp: true
                },
                字段名2: {
                    required: true
                }
            },
            //如果默认就不用写messages
            //自定义就写上
            messages: {
                字段名1: {
                    required: "请输入链接字符串",
                    isIp: "字符串格式错误,请按照XXX.XXX.XXX.XXX格式输入"
                }
            }
        });
        //自定义检测方法
        jQuery.validator.addMethod("isIp", function (value, element) {
            var Ip = /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;
            return this.optional(element) || Ip.test(value);
        }, "请正确填写!");
    });
    </script>
    <style>
        .error {
            color: red;
        }
    </style>
    <!--检测结束-->

三、检测后不用默认的方法操作

这种方法具有针对模块性,适合多个模块一起操作~~

<script>   
    $().ready(function () {
        $("#Forms").validate({
            submitHandler: function(form) {
                alert("这里写入检测正确后的操作哟~~");
               
            },
//-------------------------------下面检测方法同上---------------------------------------
            rules: {
                
            },
            messages: {
                
            }
        });
        jQuery.validator.addMethod("isIp", function (value, element) {
            var Ip = /((2[0-4]\d|25[0-5]|[01]?\d\d?)\.){3}(2[0-4]\d|25[0-5]|[01]?\d\d?)/;
            return this.optional(element) || Ip.test(value);
        }, "请正确填写!");        
    });
</script>

猜你喜欢

转载自blog.csdn.net/dongli5012/article/details/84537542