2015-09-27 45 views
-3

這是jQuery表單驗證(html,css和jQuery),但代碼不工作,所有if語句和錯誤消息我無法修復。表單驗證在jQuery中不起作用

$("#validationForm").submit(function(event) { 
 
    var errorMessage = ""; 
 
    event.preventDefault(); 
 

 
    function 
 
    isValidEmailAddress(emailAddress) { 
 
    var pattern = new RegExp(/^((([a-z]|\d| 
 
[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([az]|\ 
 
d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]) 
 
+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\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]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([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); 
 
    }; 
 

 
    if (!isValidEmailAddress($("#email").val())) { 
 
    errorMessage = "<br />Please enter a 
 
valid email address"; 
 
    } 
 
    if (!$.isNumeric($("#phone").val())) { 
 
    errorMessage = errorMessage + "<br />Please enter a valid phone number"; 
 
    } 
 
    if ($("#pass1").val() != $("#pass2").val()) { 
 
    errorMessage = errorMessage + "<br />Please enter matching passwords"; 
 
    } 
 
    if (errorMessage == "") { 
 
    alert("Success!"); 
 
    } else { 
 
    $("#error").html(errorMessage); 
 
    } 
 
});
#wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
    font-family: helvetica; 
 
    font-size: 1.2em; 
 
} 
 
input { 
 
    width: 300px; 
 
    height: 30px; 
 
    padding: 5px; 
 
    border-radius: 5px; 
 
    font-size: 1.2em; 
 
    border: 1px solid grey; 
 
    margin-bottom: 10px; 
 
} 
 
label { 
 
    width: 200px; 
 
    float: left; 
 
    padding-top: 7px; 
 
} 
 
#submitButton { 
 
    height: 50px; 
 
    margin-left: 200px; 
 
    width: 100px; 
 
} 
 
#error { 
 
    color: red; 
 
    margin: 20px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <div id="error"></div> 
 
    <form id="validationForm"> 
 
     <label for="email">Email</label> 
 
     <input name="email" id="email" /> 
 
     <label for="phone">Telephone</label> 
 
     <input name="phone" id="phone" /> 
 
     <label for="pass">Password</label> 
 
     <input name="pass" type="password" id="pass1" /> 
 
     <label for="pass">Confirm Password</label> 
 
     <input name="pass" type="password" id="pass2" /> 
 
     <input id="submitButton" type="submit" value="Submit" /> 
 
    </form> 
 
    </div> 
 

 
</body>

+1

你可以從你想要達到的目標開始,然後解釋代碼做了什麼或者沒有做什麼。你也可以解釋你已經試過調試它。否則沒有人會非常傾向於挖掘這個怪異的正則表達式。如果這確實是你想要做的事情,那麼在那裏驗證電子郵件地址的方法不是很簡單嗎? –

+0

請使用正確的縮進,否則您的代碼難以閱讀。請刪除這裏不相關的所有信息(如CSS)。並提出一個明確的問題! –

+1

你收到了哪些錯誤信息? – halfer

回答

0

如果是HTML5,而您希望最終用戶的瀏覽器能夠支持HTML5引擎,您可以使用該input要素爲適當的類型屬性:

$("#validationForm").on('submit', function(event) { 
 
    var errorMessage = ""; 
 
    event.preventDefault(); 
 

 
    if (!$.isNumeric($("#phone").val())) { 
 
    errorMessage = errorMessage + "<br />Please enter a valid phone number"; 
 
    } 
 
    if ($("#pass1").val() !== $("#pass2").val()) { 
 
    errorMessage = errorMessage + "<br />Please enter matching passwords"; 
 
    } 
 
    if (errorMessage == "") 
 
    alert("Success!"); 
 
    else 
 
    $("#error").html(errorMessage); 
 
});
#wrapper { 
 
    width: 600px; 
 
    margin: 0 auto; 
 
    font-family: helvetica; 
 
    font-size: 1.2em; 
 
} 
 
input { 
 
    width: 300px; 
 
    height: 30px; 
 
    padding: 5px; 
 
    border-radius: 5px; 
 
    font-size: 1.2em; 
 
    border: 1px solid grey; 
 
    margin-bottom: 10px; 
 
} 
 
label { 
 
    width: 200px; 
 
    float: left; 
 
    padding-top: 7px; 
 
} 
 
#submitButton { 
 
    height: 50px; 
 
    margin-left: 200px; 
 
    width: 100px; 
 
} 
 
#error { 
 
    color: red; 
 
    margin: 20px; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<body> 
 
    <div id="wrapper"> 
 
    <div id="error"></div> 
 
    <form id="validationForm"> 
 
     <label for="email">Email</label> 
 
     <input name="email" id="email" type='email' required /> 
 
     <label for="phone">Telephone</label> 
 
     <input name="phone" id="phone" type='tel' required /> 
 
     <label for="pass">Password</label> 
 
     <input name="pass" type="password" id="pass1" required /> 
 
     <label for="pass">Confirm Password</label> 
 
     <input name="pass" type="password" id="pass2" /> 
 
     <input id="submitButton" type="submit" value="Submit" /> 
 
    </form> 
 
    </div> 
 

 
</body>

請注意,我是我們相應地編輯type='email'type='tel'。另外,我已將這些字段默認爲required。這樣,瀏覽器本身會要求用戶不要將這些字段留空。