使用jQuery Validate验证单页多表单identity_passport字段唯一性

问题背景 #

页面里有多个独立表单，每个表单都带一个标记为data-field="identity_passport"的护照字段，需要确保所有这些字段的值互不重复。目前已经通过.each()方法初始化了各表单的jQuery Validate校验，而且提交按钮是放在所有表单外面的。

实现思路与步骤 #

要搞定这个需求，核心是给jQuery Validate加一个自定义校验规则，在校验时收集所有目标字段的值，对比当前字段是否存在重复。咱们一步步来：

1. 新增自定义校验规则

先给jQuery Validate添加一个叫uniquePassport的规则，专门用来检查当前护照值是不是唯一的：

$.validator.addMethod("uniquePassport", function(value, element) {
    // 拿到所有带data-field="identity_passport"的输入框
    const allPassportFields = $('[data-field="identity_passport"]');
    // 排除当前正在校验的字段，收集其他字段的非空值
    const otherValues = allPassportFields.not(element).map(function() {
        return $(this).val().trim();
    }).get();
    // 空值不校验，非空值则检查是否在其他字段里已存在
    return value.trim() === "" || !otherValues.includes(value.trim());
}, "护照号码不能重复");

2. 给目标字段绑定校验规则

在你已经写好的表单初始化代码里，给每个表单内的护照字段加上这个自定义规则。可以直接在validate()配置里指定，也用rules('add')批量绑定：

$('form').each(function () {
    $(this).validate({
        errorElement: "span",
        errorPlacement: function (error, element) {
            // 保留你原来的错误位置逻辑，比如插在字段后面
            error.insertAfter(element);
        },
        success: function (label, element) {
            // 保留你原来的成功状态处理，比如移除提示标签
            label.remove();
        },
        highlight: function (element, errorClass, validClass) {
            // 保留你原来的高亮逻辑，比如给错误字段加样式
            $(element).addClass(errorClass).removeClass(validClass);
        }
    });
    
    // 给当前表单里的护照字段添加上唯一校验规则（可选加必填规则）
    $(this).find('[data-field="identity_passport"]').rules('add', {
        required: true,
        uniquePassport: true
    });
});

3. 处理外部提交按钮的逻辑

因为提交按钮不在任何表单里，得手动触发所有表单的校验，只有全部通过才能执行提交：

$('#button_submit').on('click', function(e) {
    e.preventDefault();
    let allValid = true;
    
    // 遍历所有表单，逐个触发校验
    $('form').each(function() {
        if (!$(this).valid()) {
            allValid = false;
        }
    });
    
    // 所有表单都校验通过后，再执行你的提交逻辑
    if (allValid) {
        alert('所有表单校验通过，可以提交啦');
        // 这里放实际的提交代码，比如收集所有表单数据发去后端
    }
});

完整可运行示例代码 #

<form id="form_1">
    <input name="name_1" placeholder="请输入姓名">
    <input name="email_1" placeholder="请输入邮箱">
    <input name="identity_passport_1" data-field="identity_passport" placeholder="请输入护照号码">
</form>
<form id="form_2">
    <input name="name_2" placeholder="请输入姓名">
    <input name="email_2" placeholder="请输入邮箱">
    <input name="identity_passport_2" data-field="identity_passport" placeholder="请输入护照号码">
</form>
<form id="form_3">
    <input name="name_3" placeholder="请输入姓名">
    <input name="email_3" placeholder="请输入邮箱">
    <input name="identity_passport_3" data-field="identity_passport" placeholder="请输入护照号码">
</form>
<button type="submit" id="button_submit">Submit</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script>
// 自定义唯一护照校验规则
$.validator.addMethod("uniquePassport", function(value, element) {
    const allPassportFields = $('[data-field="identity_passport"]');
    const otherValues = allPassportFields.not(element).map(function() {
        return $(this).val().trim();
    }).get();
    return value.trim() === "" || !otherValues.includes(value.trim());
}, "护照号码不能重复");

// 初始化每个表单的校验
$('form').each(function () {
    $(this).validate({
        errorElement: "span",
        errorPlacement: function (error, element) {
            error.insertAfter(element);
        },
        success: function (label, element) {
            label.remove();
        },
        highlight: function (element, errorClass, validClass) {
            $(element).addClass('error').removeClass('valid');
        },
        unhighlight: function (element, errorClass, validClass) {
            $(element).removeClass('error').addClass('valid');
        }
    });
    
    // 绑定唯一校验规则到护照字段
    $(this).find('[data-field="identity_passport"]').rules('add', {
        required: true,
        uniquePassport: true
    });
});

// 外部提交按钮逻辑
$('#button_submit').on('click', function(e) {
    e.preventDefault();
    let allValid = true;
    
    $('form').each(function() {
        if (!$(this).valid()) {
            allValid = false;
        }
    });
    
    if (allValid) {
        alert('所有表单校验通过，准备提交');
        // 这里添加实际提交逻辑
    }
});
</script>

更新说明 #

2018/01/25 更新：经过多次尝试已成功实现该功能，上述示例代码整合了最终验证逻辑，可直接测试使用。

内容的提问来源于stack exchange，提问作者claudchan