咨询formvalidator.net实现两输入框不等校验的方法及自定义验证器

我之前折腾formvalidator.net的时候也碰到过这个问题，官方确实没内置“两个输入框内容不相等”的校验规则，但自定义一个其实超简单，我给你分享下我当时写的实现方式：

首先，我们需要通过$.formUtils.addValidator()方法添加自定义验证规则，命名为notequalto（你也可以改成自己喜欢的名字）：

// 注册自定义验证规则：校验值与目标字段不相等
$.formUtils.addValidator({
  name: 'notequalto',
  validatorFunction: function(value, $el, config, language, $form) {
    // 根据配置的targetField获取目标输入框的值
    const targetInput = $form.find(`[name="${config.targetField}"]`);
    if (!targetInput.length) return true; // 如果目标字段不存在，默认校验通过
    const targetValue = targetInput.val();
    // 返回值不相等的判断结果
    return value !== targetValue;
  },
  errorMessage: '这两个输入的内容不能相同',
  errorMessageKey: 'notequalto'
});

接下来在HTML表单里使用这个规则，需要给要校验的字段加上data-validation="notequalto"，同时用data-validation-notequalto-target-field指定要对比的字段name：

<form id="customForm">
  <div class="form-group">
    <label>原有账号:</label>
    <input type="text" name="oldAccount" data-validation="required">
  </div>
  <div class="form-group">
    <label>新账号:</label>
    <input type="text" name="newAccount" 
           data-validation="required notequalto"
           data-validation-notequalto-target-field="oldAccount"
           data-validation-error-msg="新账号不能与原有账号相同">
  </div>
  <button type="submit">提交修改</button>
</form>

最后初始化表单验证即可：

$(document).ready(function() {
  $.validate({
    form: '#customForm'
  });
});

额外说明 #

• 如果需要忽略大小写的对比，可以把校验逻辑改成value.toLowerCase() !== targetValue.toLowerCase()
• 错误提示信息可以通过data-validation-error-msg自定义，也可以在添加验证规则时统一设置
• 确保目标字段的name属性和data-validation-notequalto-target-field的值完全一致

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