-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>
你可以從你想要達到的目標開始,然後解釋代碼做了什麼或者沒有做什麼。你也可以解釋你已經試過調試它。否則沒有人會非常傾向於挖掘這個怪異的正則表達式。如果這確實是你想要做的事情,那麼在那裏驗證電子郵件地址的方法不是很簡單嗎? –
請使用正確的縮進,否則您的代碼難以閱讀。請刪除這裏不相關的所有信息(如CSS)。並提出一個明確的問題! –
你收到了哪些錯誤信息? – halfer