jquery-validation的使用

最新推荐文章于 2025-06-19 14:35:59 发布

原创最新推荐文章于 2025-06-19 14:35:59 发布 · 1.3w 阅读

10 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何使用jQuery Validation插件进行表单验证，包括配置验证规则、错误提示信息展示及自定义验证方法等内容。

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

时隔多年再开始写前端代码，遇到的问题都有点弱，记录一下。

官网：https://jqueryvalidation.org/

我只引入了两个js，因为我们的系统只需要英文环境。如果需要做国际化或者切换其他语言环境，需要引入localization下的js。

<script src="../../plugin/jquery-validation-1.17.0/jquery.validate.min.js"></script>
<script src="../../plugin/jquery-validation-1.17.0/additional-methods.min.js"></script>

当然jquery是必须引入的：

<script src="../../plugin/jquery-3.3.1.min.js"></script>

这里特别说明一下：

jquery-validation是对表单form的验证，所以必须使用form标签，其他div之类的标签是不起作用的，会报错：

jquery.validate.min.js:4 Uncaught TypeError: Cannot read property 'jQuery3310068674721021678262' of null

页面元素必须添加name属性，验证是根据name来查找元素的：

<form id="testForm">
<div>
   <span>E-mail<sup></sup></span>
   <input v-model="emailAddr" name="emailAddr">
</div>
<div>
   <span>Repeat E-mail<sup></sup></span>
   <input id="repeatMail" name="repeatMail">
</div>
</form>

初始化页面时加载验证方法：
$(function(){
    $( "#testForm").validate({
        rules: {
            emailAddr: {
                required: true,   // 必填项
                email: true       // 输入为email格式
            },
            repeatMail: {
                required: true,
                email: true,
                equalTo: '#emailAddr'  // 输入和emailAddr必须一致
            }，
            curNationality: {
                required: true,
                isOther: true    // 自定义方法
            }
        },
        messages: {                   // 验证失败的提示信息
            emailAddr: {
                email: "Email format error."
            },
            repeatMail: {
                email: "Email format error.",
                equalTo: "The two E-mails do not match.",
            }
        },
        errorElement: "em",                  // 验证失败时在元素后增加em标签，用来放错误提示
        errorPlacement: function (error, element) {   // 验证失败调用的函数
            error.addClass( "error_tip" );   // 提示信息增加样式

            if ( element.prop( "type" ) === "checkbox" ) {
                error.insertAfter(element.parent("label"));  // 待验证的元素如果是checkbox，错误提示放到label中
            } else {
                error.insertAfter(element);
            }
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass("has-error");     // 验证失败时给元素增加样式
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass("has-error");  // 验证成功时去掉元素的样式
        }
    });
});

提交表单时增加验证方法：

var flag = $('#testForm').valid();
if(!flag) {
    return;
}

自定义验证方法：必须返回this.optional(element)和其他判断条件

jQuery.validator.addMethod(自定义方法名，方法{}，验证失败返回的提示信息)

jQuery.validator.addMethod("isOther", function(value, element){
    if(value == 'Other') {
        return this.optional(element) || ($('#otherCountry').val().trim() != '');  
    } else {
        return this.optional(element);
    }
}, "This field is required.");