使用远程方法对 emailId 和电话号码进行 Jquery 验证

Question

我正在尝试使用 jQuery 验证插件（远程方法） 验证输入的 emailId 和电话号码是否存在。但我不知道我要去哪里错了。我尝试使用添加方法插件，但没有工作。谁能帮我我哪里出错了？？

这里是代码。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0/jquery.validate.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.validation/1.14.0/additional-methods.js"></script>

$('#myForm').validate({ // initialize the plugin
            rules: {
                emailId: {
                    required: true,
                    email: true,
                    remote: {
                        url:'verifyEmailOrPhone-'+$('#emailId').val()+'-'+$('#contactNumber').val(),
                        type:'GET',

                }
                },

                contactNumber:{
                    required: true,
                    minlength: 9,
                    maxlength: 10,
                    number: true,
                    remote: {
                        url:'verifyEmailOrPhone-'+$('#emailId').val()+'-'+$('#contactNumber').val(),
                        type:'GET',

                  }
                },

            },   
            messages:{
                emailId:{
                    remote: "emailId already taken"
                    },
                contactNumber:{
                    remote: "phone number exists"
                }   
                },

            submitHandler: function (form) { 
                // for demo
                alert('valid form submitted'); // for demo
                return false; // for demo
            }

        });

html

<div class="margin-top-10  contact-check has-feedback form-group" >
                       <input class="form-control input-lg" name="contactNumber" id="contactNumber" placeholder="Phone Number" size="25" type="text"  value="">
                   </div>
                   <div class="margin-top-10  email-check  form-group has-feedback" >
                       <input class="form-control input-lg" name="emailId" id="emailId" placeholder="Email" size="25"  value=""  type="text">
                   </div>

在控制台我得到 http://localhost:8080/SpringMvcExample/verifyEmailOrPhone--?emailId=bhagya%40gmail.com

远程方法在 url 中返回“emailId=bhagya%40gmail.com”，我只需要返回输入数据。

Answer 1

1. 您发送的值是 true，而不是字段的值

   data: {
       emailId: function() {
           return true; // <- ??
       }
   }
   

2. 您根本不需要使用data 属性，因为该字段的值已默认发送。

完全删除data 属性。

当然，此答案假设您的服务器端脚本（我们看不到）已构建并正常工作。