2016-02-04 116 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 / –