jQuery 验证数组输入不起作用 - Javascript

问题描述

在使用 jQuery 进行表单验证的过程中，发现输入多个值的数组类型的 input 框验证不起作用。

问题分析

数组类型的 input 框在提交表单时，会将输入的多个值合并成一个以逗号分隔的字符串。因此，jQuery 的默认验证规则无法识别这种情况，需要手动编写验证规则。

解决方案

手动编写验证规则

可以使用 jQuery 提供的 $.validator.addMethod() 方法，自定义验证规则。

以下是一个示例：

$.validator.addMethod("checkArrayInput", function(value, element) {
  var pattern = /^[A-Za-z0-9]+(,[A-Za-z0-9]+)*$/;
  return this.optional(element) || pattern.test(value);
}, "请输入逗号分隔的数组值");

在调用 validate() 方法时，指定需要验证的 input 框使用 checkArrayInput 规则即可。

$("form").validate({
  rules: {
    arrayInput: {
      checkArrayInput: true
    }
  },
  messages: {
    arrayInput: {
      checkArrayInput: "请输入逗号分隔的数组值"
    }
  }
});

重新格式化数组输入

另一种解决方法是在提交表单前，使用 JavaScript 代码将数组类型的 input 框的值重新格式化为以逗号分隔的字符串。

以下是一个示例：

$("form").submit(function() {
  $("input[name='arrayInput']").val($("input[name='arrayInput']").val().join(","));
});

在提交表单时，将 arrayInput 的值转换为以逗号分隔的字符串，即可通过 jQuery 验证。

总结

在 jQuery 表单验证中，针对一些特殊的表单控件需要手动编写验证规则。如果无法手动编写验证规则，可以尝试通过修改表单数据格式来解决。