2011-11-24 85 views
2

我想要做的是在JavaScript中建立一個函數,驗證輸入的電子郵件和密碼,檢查輸入的電子郵件以確保輸入的電子郵件至少有2-3個字符(.com,.org,.ca等)的字符串,並且該字符串中至少有一個'@'符號。至於檢查密碼,我希望函數檢查它至少有一個小寫字母和一個大寫字母,至少有一個數字,至少有一個特殊字符(!,@,#,$,%, ^,&,*,〜)在JavaScript中驗證輸入的電子郵件和密碼

有沒有人知道我得做正則表達式來檢查至少1個特殊字符,如!,@,*等密碼?

這是我有:

function validatePassword(password) 
{ 
    var passwordPattern = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/; 
return passwordPattern.test(password) 
} 

// Validate form 
function validate() 
{ 
var email = user.email.value; 
if(validateEmail(user.email.value)) 
    user.validEmail.value = "OK"; 
else 
    user.validEmail.value = "X"; 
if(validatePassword(user.password.value)) 
    user.validPassword.text = "OK"; 
else 
    user.validPassword.text = "X"; 
} 

回答

2

您可以爲這兩種情況下用戶正則表達式。 至於電子郵件,你可以在這裏閱讀更多:http://www.zparacha.com/validate-email-address-using-javascript-regular-expression/ 至於密碼檢查,我建議你閱讀本:http://www.the-art-of-web.com/javascript/validate-password/

這裏的密碼驗證:

<input type="password" id="txtPassword" onblur="validate"/> 
<script type="text/javascript" src="../jQuery/jquery-1.6.4.min.js"></script> 
<script type="text/javascript"> 
    var txtPassword = null; 

    var txtPassword_Blur = function(e) { 
     var exp = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/; 
     var validPassword = exp.test($(this).val()); 
     if(validPassword) { 
      alert('valid'); 
     } else { 
      alert('not valid'); 
     } 
    }; 

    $(function() { 
     txtPassword = $("#txtPassword"); 
     txtPassword.bind("blur", null, txtPassword_Blur); 
    }); 
</script> 

注意:這個正則表達式不檢查特殊字符。我認爲它對於你的定義是特定的,但你可以編輯表達式並添加一個你認爲特殊的字符列表。

0

你可以使用正則表達式的這兩種

function validate(form_id,email) { 

    var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/; 
    var address = document.forms[form_id].elements[email].value; 
    if(reg.test(address) == false) { 

     alert('Invalid Email Address'); 
     return false; 
    } 
} 

的電子郵件(來源:http://www.white-hat-web-design.co.uk/blog/javascript-validation/

並使用相同的方法來檢查密碼。

http://www.w3schools.com/jsref/jsref_regexp_test.asp

+0

注意這通常引用的模式是不是一個好主意:它會阻止各種有效地址,包括名稱中帶有'+'的用戶和> 4個字母的TLD。 – bobince

1

請參閱使用JavaScript語言的網頁上我的文字輸入元素的值的跨瀏覽器的過濾器項目:Input Key Filter。您可以將該值過濾爲整數,浮點數或編寫自定義過濾器(例如電話號碼過濾器)。見輸入的代碼示例的電子郵件地址和密碼:

<!doctype html> 
 
<html xmlns="http://www.w3.org/1999/xhtml" > 
 
<head> 
 
    <title>Input Key Filter Test</title> 
 
\t <meta name="author" content="Andrej Hristoliubov [email protected]"> 
 
\t <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 
\t 
 
\t <!-- For compatibility of IE browser with audio element in the beep() function. 
 
\t https://www.modern.ie/en-us/performance/how-to-use-x-ua-compatible --> 
 
\t <meta http-equiv="X-UA-Compatible" content="IE=9"/> 
 
\t 
 
\t <link rel="stylesheet" href="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.css" type="text/css"> \t \t 
 
\t <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/Common.js"></script> 
 
\t <script type="text/javascript" src="https://rawgit.com/anhr/InputKeyFilter/master/InputKeyFilter.js"></script> 
 
\t 
 
</head> 
 
<body> 
 
Email: <input type="email" id="Email" value="[email protected]"/> 
 
<script> 
 
\t CreateEmailFilter("Email", function(event){//onChange event 
 
\t \t \t inputKeyFilter.RemoveMyTooltip(); 
 
\t \t \t var elementNewInteger = document.getElementById("NewEmail"); 
 
\t \t \t elementNewInteger.innerHTML = this.value; 
 
\t \t } 
 
\t \t 
 
\t \t //onblur event. Use this function if you want set focus to the input element again if input value is NaN. (empty or invalid) 
 
\t \t , function(event){ this.ikf.customFilter(this); } 
 
\t); 
 
</script> 
 
New email: <span id="NewEmail"></span> 
 
<hr> 
 
Password: 
 
<input type="password" id="Password" 
 
\t onchange="javascript: onChangePassword(this)" 
 
\t onblur="javascript: this.ikf.customFilter(this)" 
 
/> 
 
<script> 
 
\t function onChangePassword(input){ 
 
\t \t inputKeyFilter.RemoveMyTooltip(); 
 
\t \t if(!input.ikf.customFilter(input)) 
 
\t \t \t return false; 
 
\t \t var elementNewPassword = document.getElementById("NewPassword"); 
 
\t \t elementNewPassword.innerHTML = input.value; 
 
\t } 
 
\t CreatePasswordFilter("Password" 
 
\t \t , function(elementInput, value){//customFilter 
 
//consoleLog("password customFilter. elementInput = " + elementInput + "\n\n" + printStackTrace().join("nn")); 
 

 
\t \t \t \t if(typeof value == 'undefined') 
 
\t \t \t \t \t value = elementInput.value; 
 
\t \t \t \t \t 
 
\t \t \t \t var array = value.match(/([^a-zA-Z\d]+)/); 
 
\t \t \t \t if(array != null){ 
 
\t \t \t \t \t inputKeyFilter.TextAdd(isRussian() ? 
 
\t \t \t \t \t \t \t "Недопустимый символ: " + array[0] 
 
\t \t \t \t \t \t \t : "Invalid symbol: " + array[0] 
 
\t \t \t \t \t \t , elementInput, "uparrowdivred"); 
 
\t \t \t \t \t inputKeyFilter.focus(elementInput); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t \t var passwordLengthMin = 6; 
 
\t \t \t \t if(value.length < passwordLengthMin){ 
 
\t \t \t \t \t inputKeyFilter.TextAdd(isRussian() ? 
 
\t \t \t \t \t \t \t "Пароль должен быть длиннее " + passwordLengthMin + " символов." 
 
\t \t \t \t \t \t \t : "The password at least " + passwordLengthMin + " characters." 
 
\t \t \t \t \t \t , elementInput); 
 
\t \t \t \t \t inputKeyFilter.focus(elementInput); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t \t if(value.match(/(\d+)/i) == null){ 
 
\t \t \t \t \t inputKeyFilter.TextAdd(isRussian() ? 
 
\t \t \t \t \t \t \t "Введите хотя бы одну цифру." 
 
\t \t \t \t \t \t \t : "The password must contain at least one digit." 
 
\t \t \t \t \t \t , elementInput, "uparrowdivyellow"); 
 
\t \t \t \t \t inputKeyFilter.focus(elementInput); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t \t if(value.match(/([a-z]+)/) == null){ 
 
\t \t \t \t \t inputKeyFilter.TextAdd(isRussian() ? 
 
\t \t \t \t \t \t \t "Введите хотя бы одну латинскую букву." 
 
\t \t \t \t \t \t \t : "The password must contain at least one letter." 
 
\t \t \t \t \t \t , elementInput, "uparrowdivyellow"); 
 
\t \t \t \t \t inputKeyFilter.focus(elementInput); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t \t if(value.match(/([A-Z]+)/) == null){ 
 
\t \t \t \t \t inputKeyFilter.TextAdd(isRussian() ? 
 
\t \t \t \t \t \t \t "Введите хотя бы одну заглавную латинскую букву." 
 
\t \t \t \t \t \t \t : "The password must contain at least one upper-case letter." 
 
\t \t \t \t \t \t , elementInput, "uparrowdivyellow"); 
 
\t \t \t \t \t inputKeyFilter.focus(elementInput); 
 
\t \t \t \t \t return false; 
 
\t \t \t \t } 
 
\t \t \t \t return true; 
 
\t \t \t } 
 
/* \t \t \t \t 
 
\t \t //, null//onChange 
 
\t \t , function(event){//onChange 
 
\t \t \t \t input = this; 
 
\t \t \t \t inputKeyFilter.RemoveMyTooltip(); 
 
\t \t \t \t if(!input.ikf.customFilter(input)) 
 
\t \t \t \t \t return false; 
 
\t \t \t \t var elementNewPassword = document.getElementById("NewPassword"); 
 
\t \t \t \t elementNewPassword.innerHTML = input.value; 
 
\t \t \t } 
 
\t \t //, null//onblur 
 
\t \t , function(event){//onblur 
 
\t \t \t \t this.ikf.customFilter(this); 
 
\t \t \t } 
 
*/ \t \t \t \t 
 
\t); 
 
</script> 
 
New password: <span id="NewPassword"></span> 
 

 
</body> 
 
</html>

另請參閱我的網頁"Email:" and "Password:" of the example of the input key filter

相關問題