jQWidgets jqxValidator validationError事件

关于 jQWidgets 的 jqxValidator 插件，它提供了 validationError 事件，用于在验证表单数据时出现错误时触发，可以为该事件绑定处理程序，实现自定义错误消息和处理逻辑。

具体操作步骤如下：

1. 引入相关资源

在使用 jqxValidator 和 validationError 事件之前，需要先引入相关的资源（样式和脚本）：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/styles/jqx.base.css">
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxcore.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jqwidgets-scripts/jqwidgets/jqxvalidator.js"></script>

2. 准备 HTML 表单

然后，在 HTML 中创建带有验证规则的表单，并给它们设置 ID，如下所示：

<form id="myForm">
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required>
    <br>
    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required>
    <br>
    <input type="submit" value="提交">
</form>

3. 创建 jqxValidator 实例

接下来，在 JavaScript 中创建 jqxValidator 实例，并设置相关配置项：

$(document).ready(function () {
    $('#myForm').jqxValidator({
        hintType: 'label',
        animationDuration: 0,
        rules: [
            { input: '#name', message: '姓名不能为空!', action: 'keyup, blur', rule: 'required' },
            { input: '#email', message: '请输入正确的邮箱地址!', action: 'keyup, blur', rule: 'email' }
        ],
        onError: function () {
            // 表单验证出错时触发
            console.log('表单验证出错！');
        },
        onSuccess: function () {
            // 表单验证成功时触发
            console.log('表单验证成功！');
        }
    });
});

以上代码中，我们使用了 hintType 配置项指定错误消息展示的位置为标签（即出现在被验证输入框的旁边），然后设置了两个验证规则（分别对应姓名、邮箱输入框），当输入框的值为空或格式不合法时，提交表单会触发 onError 事件，反之，如果表单验证通过，则会触发 onSuccess 事件。

此外，还可以为验证器绑定 validationError 事件处理程序：

$(document).ready(function () {
    $('#myForm').jqxValidator({
        // ...
        onError: function () {
            // ...
        },
        onSuccess: function () {
            // ...
        }
    });

    $('#myForm').on('validationError', function (event) {
        // 在表单验证出错时自定义错误消息和处理逻辑
        var args = event.args;
        var message = 'There are ' + args.errors.length + ' errors:\n';
        for (var i = 0; i < args.errors.length; i++) {
            message += args.errors[i].message + '\n';
        }
        alert(message);
    });
});

以上代码定义了 validationError 事件处理程序，在表单验证出错时，它会将所有错误消息集中在一起，并弹出一个提示框展示出来。

示例1：

在下面的例子中，我们给出了一个可验证手机号格式的表单，当手机号不符合规则时，在下方显示红色提示信息。

<form id="myForm">
    <div class="form-group">
        <label for="phone">手机号：</label>
        <input type="text" class="form-control" id="phone" name="phone" placeholder="请输入11位手机号" required>
        <div class="invalid-feedback"></div>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>

$(document).ready(function () {
    $('#myForm').jqxValidator({
        hintType: 'label',
        animationDuration: 0,
        rules: [
            { input: '#phone', message: '请输入11位有效手机号码!',
                action: 'keyup, blur', rule: function (input) {
                    return /^1[34578]\d{9}$/.test(input.val());
                }
            }
        ]
    });

    $('#myForm').on('validationError', function (event) {
        var args = event.args;
        for (var i = 0; i < args.errors.length; i++) {
            var error = args.errors[i];
            var $input = $('#myForm').find("[name='" + error.name + "']");
            var $feedback = $input.siblings('.invalid-feedback');
            $feedback.text(error.message);
            $input.addClass('is-invalid');
        }
    });

    $('#myForm').on('validationSuccess', function () {
        alert('表单验证成功！');
    });
});

示例2：

在下面的例子中，我们给出了一个验证多字段互相依赖的表单，当输入的奇数必须大于等于 3，偶数数值也要大于等于 2，否则出现提示信息。

<form id="myForm">
    <div class="form-group">
        <label for="odd">奇数：</label>
        <input type="number" class="form-control" id="odd" name="odd" required>
    </div>
    <div class="form-group">
        <label for="even">偶数：</label>
        <input type="number" class="form-control" id="even" name="even" required>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-primary">提交</button>
    </div>
</form>

$(document).ready(function () {
    $('#myForm').jqxValidator({
        hintType: 'label',
        animationDuration: 0,
        rules: [
            {
                input: '#odd, #even', message: '奇数必须大于等于 3，偶数数值也要大于等于 2!',
                rule: function (input, commit) {
                    var val = parseInt(input.val());
                    if (isNaN(val)) {
                        return true;
                    }
                    var isOdd = input.attr('id') === 'odd';
                    if (isOdd && val % 2 !== 1) {
                        commit(false);
                    }
                    var even = $('#even').val();
                    if (isOdd && even && even < 2) {
                        commit(false);
                    }
                    if (!isOdd && val % 2 !== 0) {
                        commit(false);
                    }
                    var odd = $('#odd').val();
                    if (!isOdd && odd && odd < 3) {
                        commit(false);
                    }
                    return true;
                }
            }
        ]
    });

    $('#myForm').on('validationError', function (event) {
        var args = event.args;
        for (var i = 0; i < args.errors.length; i++) {
            var error = args.errors[i];
            var $input = $('#myForm').find("[name='" + error.name + "']");
            var $feedback = $input.siblings('.invalid-feedback');
            $feedback.text(error.message);
            $input.addClass('is-invalid');
        }
    });

    $('#myForm').on('validationSuccess', function () {
        alert('表单验证成功！');
    });
});

以上两个例子都是利用 jqxValidator 绑定 validationError 事件，自定义错误提示信息并实现不同的验证逻辑。