jQuery表单校验插件jquery.form-validator.js的使用

最新推荐文章于 2025-06-21 10:46:16 发布

此情可待#

最新推荐文章于 2025-06-21 10:46:16 发布

阅读量1.8k

点赞数

CC 4.0 BY-SA版权

文章标签： jquery jquery.form-validator

本文链接：https://blog.youkuaiyun.com/qq_37132598/article/details/88845526

本文介绍如何使用jQuery Form Validator插件进行表单验证，包括基本配置、内置验证规则及自定义验证器实现。通过实例展示了如何校验用户名长度、日期格式及网址等。

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

原文章地址 https://www.npmjs.com/package/jquery-form-validator

在使用jquery.form-validator.js插件时需要引入以下两个js文件

<script src="js/jquery.min.js"></script>

<script src="js/form-validator/jquery.form-validator.min.js"></script>

示例：

<form action="" method="POST">

  <p>

    Name (4 characters minimum):
    <!--校验用户名长度，并且设置最小长度为4-->
    <input name="user" data-validation="length" data-validation-length="min4" />

  </p>

  <p>

    Birthdate (yyyy-mm-dd):
    <!--校验日期-->
    <input name="birth" data-validation="birthdate" />

  </p>

  <p>

    Website:
    <!--校验网络地址格式是否正确-->
    <input name="website" data-validation="url" />

  </p>

  <p>

    <input type="submit" />

  </p>

</form>

<script src="js/jquery.min.js"></script>

<script src="js/form-validator/jquery.form-validator.min.js"></script>

<script>

    $.validate({

        modules : 'date, security'

    });

</script>

自定义表单校验

<form action="" method="POST">
    <p>

        <input type="text" data-validation="even" />

    </p>

    ...

</form>

<script src="js/jquery.min.js"></script>

<script src="js/form-validator/jquery.form-validator.min.js"></script>

<script>



    // 添加校验

    $.formUtils.addValidator({

        name : 'even',

        validatorFunction : function(value, $el, config, language, $form) {

            return parseInt(value, 10) % 2 === 0;

        },

        errorMessage : 'You have to answer an even number',

        errorMessageKey: 'badEvenNumber'

    });



    // 启动表单验证

    $.validate();



</script>

传递到$ .formUtils.addValidator的必需属性

name - 验证器的名称，在input元素的validation属性中使用。

validatorFunction - 验证输入的回调函数。应返回一个布尔值，告知该值是否有效。

errorMessageKey - 输入值无效时使用的语言属性的名称。

errorMessage - 如果errorMessageKey保留空值或未在语言对象中定义，则使用备用错误消息。请注意，您还可以在表单中使用内联错误消息。

验证函数采用以下五个参数：

value - 要验证的输入的值
$ el - jQuery对象引用要验证的输入元素
config - 包含此表单验证配置的对象
language - 带有错误对话框的对象
$ form - 引用要验证的表单元素的jQuery对象

创建自定义模块

“模块”基本上是一个包含对$ .formUtils.addValidator（）的一次或多次调用的javascript文件。模块文件必须放在同一目录中，jquery.form-validator.min.js就像您希望通过设置功能自动加载一样。

$.formUtils.loadModules如果要从自定义路径加载模块，可以使用该方法。

$.formUtils.loadModules('customModule otherCustomModule', 'js/validation-modules/');
$.validate({
   modules: 'security, date'
});

第一个参数$.formUtils.loadModules是逗号分隔的字符串，其中包含模块文件的名称，没有文件扩展名。

第二个参数是模块文件所在的路径。这个参数是可选的，如果没有给出，模块文件必须与这个jquery插件一起提供的核心模块位于同一目录中（js / form-validator /）