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

Posted 2023-05-09

【中文标题】使用远程方法对 emailId 和电话号码进行 Jquery 验证

【英文标题】：Jquery validation for emailId and phone number using remote method

【发布时间】：2016-01-17 20:20:35

【问题描述】：

我正在尝试使用 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”，我只需要返回输入数据。

【问题讨论】：

你能发布 HTML 和 php，你也可以看看这个 ***.com/questions/32543598/… 看看这是否有帮助，这个 ***.com/questions/32946534/…

嗨 @Shehary 我在 jsp 中使用。

“但没用” 没用。请详细描述到底发生了什么。 ajax 工作正常吗？服务器的响应是什么？

【参考方案1】：

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

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

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

完全删除data 属性。

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

【讨论】：

1) 我尝试输入字段的值，但没有用

2) 删除了数据属性，但似乎没有工作

@BhagyashreeO，“似乎不起作用” 不是有用的问题描述。您是否正在查看控制台以观察 ajax 响应？服务器端代码呢？如果您省略了服务器端脚本，您只向我们展示了一半的图片。

verifyEmailOrPhone--?contactNumber=8888888888 这就是我在控制台中得到的......

@BhagyashreeO，这意味着您向我们展示的所有内容都按照您的设计工作。但是，我们不知道您的服务器端脚本是如何设计的，或者它是否已损坏。