使用电子邮件进行Jquery验证

时间:2012-04-05 10:10:54

标签: jquery jquery-validate

我是否可以使用jquery http://bassistance.de/jquery-plugins/jquery-plugin-validation/

的验证插件在按钮点击时验证表单而不提交整个表单

这个插件适用于表单验证,但实际上我想检查文本框内写的文本是否是电子邮件,如果是电子邮件,那么我必须检查它是否在我的数据库中,如果它在我的数据库中,它将提供用户提交表单,否则立即禁用按钮我正在使用验证插件,如下所示:

$('#child1Email').blur(function(){
    var result=$('#frmAddChild').validate();
    alert(result);
    //if(result)
       //Ajax call to my servlet
    //else
       //Message box showing wrong  email and disabling the submit button
}); 

PS我将文字字段 id :: child1Email 保持为电子邮件以便将其验证为电子邮件

<form name='frmAddChild' id='frmAddChild' action='addChild' method='post'>
     .
     .
     .
     .
     .
     <input type="text" name="child1Email" id="child1Email" class='email'/>
     .
     .
     .
     .
     .
</form>

但当我提醒时,结果会显示 [对象] enter image description here

提前致谢

1 个答案:

答案 0 :(得分:2)

您可以轻松创建自己的验证规则,而无需在新的代码块中实现魔力。

类似的东西:

<input type="text" 
       name="child1Email" 
       id="child1Email" 
       class="email"
       />

使用jQuery Validation Plugin,您可以将自定义代码编写为:

$("form").validate({    
    rules: {      
        child1Email: {        
            required: true,        
            remote: "validate-email.jsp"      
        }    
     },
     messages: {
         child1Email: "Email is correct."   
         },
         submitHandler: function() {
             alert("Correct email!");
         },
         success: function(label) {
             label.addClass("valid").text("Valid email!")
         },
         onkeyup: false
});

remote选项会以这种格式向您发送GET请求:

validate-email.jsp?child1Email=abc%40domain.com 

根据您的反应意见,发送回truefalse

,您可以随时自行调用验证,例如:

$("form").submit(function() {

    if($("form").valid()) { 
        alert('valid form'); 
        return true; // submit automatically
    }
    else { 
        alert('form is not valid'); 
    }

    return false; // no need to submit automatically
});