jQWidgets jqxValidator 完整参考

简介

jQWidgets jqxValidator 是一个基于 jQuery 和 jQWidgets 的表单验证插件。它支持多种验证规则和自定义错误消息，并可以在表单提交前对表单数据进行校验。

安装

1. 引入 jQuery 和 jQWidgets。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/11.0.1/jqwidgets/styles/jqx.base.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/11.0.1/jqwidgets/jqxcore.js"></script>

2. 引入 jQWidgets jqxValidator。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqwidgets/11.0.1/jqwidgets/jqxvalidator.js"></script>

使用

1. 创建表单，并在表单元素上添加验证规则。

<form id="myForm">
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" id="password" name="password" minlength="8" required>
  </div>
  <button type="submit">Submit</button>
</form>

2. 初始化 jqxValidator。

$(document).ready(function () {
    $('#myForm').jqxValidator({
        rules: [
            {
                input: '#email',
                message: 'Email is required',
                action: 'keyup, blur',
                rule: 'required'
            },
            {
                input: '#email',
                message: 'Email is invalid',
                action: 'keyup',
                rule: 'email'
            },
            {
                input: '#password',
                message: 'Password is required',
                action: 'keyup, blur',
                rule: 'required'
            },
            {
                input: '#password',
                message: 'Password must be at least 8 characters long',
                action: 'keyup',
                rule: 'minLength=8'
            }
        ]
    });
});

在 rules 属性中定义验证规则，每个验证规则包含以下属性：

• input：要验证的表单元素的选择器；
• message：验证失败时的错误消息；
• action：触发验证的事件；
• rule：验证规则，可以是预定义的规则名称或自定义的函数。

3. 在表单提交前验证表单。

$(document).ready(function () {
    $('#myForm').on('formSubmit', function () {
        if ($('#myForm').jqxValidator('validate')) {
            // 验证通过，提交表单
        }
    });
});

在表单提交前，可以通过调用 jqxValidator 的 validate 方法来验证表单。返回值为 true 表示验证通过，可以提交表单；返回值为 false 表示有验证失败的表单元素，不进行表单提交。

预定义的验证规则

jQWidgets jqxValidator 支持多种预定义的验证规则，可以通过 rule 属性使用。以下是部分预定义的验证规则：

• required：必填项；
• email：邮箱地址；
• url：网址；
• date：日期；
• number：数字；
• integer：整数；
• minNumber：最小数字；
• maxNumber：最大数字；
• minLength：最小长度；
• maxLength：最大长度；
• pattern：正则表达式匹配。

自定义错误消息

可以通过 message 属性自定义验证失败时的错误消息。

$(document).ready(function () {
    $('#myForm').jqxValidator({
        rules: [
            {
                input: '#email',
                message: 'Email is required',
                action: 'keyup, blur',
                rule: 'required'
            },
            {
                input: '#email',
                message: 'Email is invalid',
                action: 'keyup',
                rule: 'email'
            }
        ]
    });
});

自定义验证规则

可以通过 rule 属性自定义验证规则，rule 属性可以是一个函数，函数接受两个参数：value 表单元素的值和 validationMessage 错误消息。函数返回一个布尔值，true 表示验证通过，false 表示验证失败。

以下是自定义验证规则的示例：

$(document).ready(function () {
    $('#myForm').jqxValidator({
        rules: [
            {
                input: '#age',
                message: 'Age must be greater than or equal to 18',
                rule: function (input, commit) {
                    if (parseInt(input.val(), 10) < 18) {
                        return false;
                    }
                    return true;
                }
            }
        ]
    });
});

API 参考

方法

• validate()：验证表单，返回值为 true 表示通过，false 表示失败；
• hideHint()：隐藏错误提示；
• destroy()：销毁插件。

事件

• validationSuccess：验证通过时触发；
• validationError：验证失败时触发。

总结

jQWidgets jqxValidator 提供了丰富的验证规则和自定义功能，可以方便地实现表单验证。它与 jQWidgets 的其他插件相容，可以方便地在项目中使用。