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

最新推荐文章于 2019-05-13 10:50:37 发布

原创最新推荐文章于 2019-05-13 10:50:37 发布 · 285 阅读

0 ·

CC 4.0 BY-SA版权

javascript 同时被 2 个专栏收录

8 篇文章

订阅专栏

web

2 篇文章

订阅专栏

本文详细介绍了如何使用jQuery的表单验证插件进行网页表单的数据验证，包括导入必要的JS文件、设置默认验证行为、自定义验证规则及消息提示，以及如何在多个模块中应用验证逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、导入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>