2016-02-04 118 views
0

如何验证电子邮件和重复电子邮件在jQuery相同的onchange?如何验证电子邮件和替代电子邮件?

<label class="labeln">Email Address: </label> 
<input type="email" required="" id="email" name="email" class="input1"> 
<label class="labeln">Repeat Email Address: </label> 
<input type="email" required="" id="remail" name="remail" class="input1"> 
+0

在这里你不会得到一个教程。请在您的帖子中添加更多信息并提出具体问题。 –

回答

2

你只需要选择输入1类,因为它们具有相同的类
HTML

<label class="labeln">Email Address: </label> 
<input type="email" required="" id="email" name="email" class="input1"> 
<label class="labeln">Repeat Email Address: </label> 
<input type="email" required="" id="remail" name="remail" class="input1"> 

的Javascript

$('.input1').on('change',function(){ 
    //Your validation here 
    //But use $(this).val() to get the value of the email 

    if(!isValidEmailAddress($(this).val())) { 
    /* do stuff here */ 

    } 
}); 

See this function通过aSeptik

function isValidEmailAddress(emailAddress) { 
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i; 
    return pattern.test(emailAddress); 
}; 

See also this function

function validateEmail(email) { 
    var re = /^(([^<>()[\]\\.,;:\[email protected]"]+(\.[^<>()[\]\\.,;:\[email protected]"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 
    return re.test(email); 
} 
2

HTML

<label class="labeln">Email Address: </label> 
<input class="vEmail" type="email" required="" id="email" name="email"> 
<label class="labeln">Repeat Email Address: </label> 
<input class="vEmail" type="email" required="" id="remail" name="remail"> 
<script src="/js/jquery.validate.min.js'"></script> 
<script src="/js/additional-methods.min.js"></script> 

脚本

$(".vEmail").change(function() { 
    //validate confirm email using jquery validate 
    $('#myform').validate({ 
     rules: { 
      email: 'required', 
      remail: { 
       equalTo: '#email' 
      } 
     }, 
     messages: { 
      email: { 
       required: "Please enter email" 
      }, 
      remail: { 
       equalTo: "Confirm email is not match" 
      } 
     } 
    }); 
} 
+0

你可以发送实时的URL src =“/ js/jquery.validate.min.js” src =“/ js/additional-methods.min.js” –

+0

着名的插件是在这里:http:// jqueryvalidation .ORG / –