Jquery 验证器，检查输入名称是否存在于数组中

Question

我正在尝试使用 Jquery 验证器验证我的表单，如果输入名称在数组中，它应该 return 自定义验证器错误消息（已经存在），请参阅我的下面代码，我试过几次，但我无法得到如何实现这个。

<!DOCTYPE html>
<html>
<head>
    <title>Jquery Validator</title>
</head>
<body>
    <div>
        <form id="MyForm" action="." type="post">
            <input type="text" name="name">
            <button type="submit">Save</button>
        </form>
    </div>
    <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var name_list = ["Danny", "Bucky", "James"]
            jQuery.validator.addMethod("alreadyexist", function(value, element) {
                .....
                .....
                .....
            }, "The Name is already Exist");

            $("#MyForm").validate({
                rules: {
                    "name": {
                        required: true,
                        alreadyexist: true,

                    },
                },
            });

        });
    </script>
</body>
</html>

我知道要在 addMethod 函数中添加几行代码，但我不明白。你们能帮帮我吗？这对我来说会很棒。提前致谢

Answer 1

您可以使用indexOf()检查元素是否存在于数组中和returntrue或false。 indexOf() returns 元素在数组中的索引（如果找到元素）。查看工作片段：

$(document).ready(function() {
   var name_list = ["Danny", "Bucky", "James"]
   $.validator.addMethod("alreadyexist", function(value, element) {
     return name_list.indexOf(value) == -1;
   }, "The Name is already Exist");

   $("#MyForm").validate({
     rules: {
       "name": {
         required: true,
         alreadyexist: true
       }
     }
   });

 });

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/additional-methods.min.js"></script>
<div>
  <form id="MyForm" action="." type="post">
    <input type="text" name="name">
    <button type="submit">Save</button>
  </form>
</div>

您可以详细了解 indexOf() 的工作原理 here。

Jquery 验证器，检查输入名称是否存在于数组中

Jquery Validator, Check if input name is exist in array or not

jquery

jquery-validate