[英]Javascript regular expression to verify form validation
所以基本上是形式驗證。 在讓reg ex檢查fullname.value的if語句中,我無法弄清楚為什么它不將錯誤消息添加到數組中。 我已經在前面測試了NOT,但是似乎仍然沒有進入else if語句塊來添加錯誤消息,或者它完全跳過了它。 我添加了以下代碼,也對本節中未按我認為的方式起作用的部分進行了評論。 向下查看腳本區域。
<html>
<head>
<title>Form Validation</title>
<style type="text/css">
#error {color:red;}
</style>
</head>
<body>
<h1>Form Validation with Reg Expressions</h1>
<div id="error">
</div>
<form method="post" action="https://csu.mohawkcollege.ca/tooltime/echo.php" onSubmit="return validateForm(this)">
<div>
<label for="fullname">Full Name:</label>
<input id="fullname" type="text" name="fullname"/>
Salutation of Mr. or Mrs. followed by two text strings separated by any number of spaces.
</div>
<div>
<label for="street">Street:</label>
<input id="street" type="text" name="street"/>
2 or 3 digit number followed by a text string ending with Street or Road separated by any number of spaces.
</div>
<div>
<label for="postalcode">Postal Code:</label>
<input id="postalcode" type="text" name="postalcode"/>
Char Char Digit optional Hyphen or space Char Digit Digit (abclxyz and number 0 not allowed. Case insensitive.)
</div>
<div>
<label for="phone">Phone:</label>
<input id="phone" type="text" name="phone"/>
10 digits, first 3 digits have optional parentheses, either side of digits 456 are optional space, dot or hyphen.
</div>
<div>
<label for="email">Email:</label>
<input id="email" type="text" name="email"/>
firstname.lastname@mohawkcollege.domain (firstname and lastname must be 4-10 characters in length, domain may be either .com, .ca, or .org)
</div>
<input type="submit"/>
</form>
<script type="text/javascript">
var displayErrorMessage = document.getElementById("error");
function validateForm(form)
{
displayErrorMessage.innerHTML = "";
var errorMessages = [];
alert("validate function entered");
// ERROR HAPPENS HERE!!
// DOES NOT SEEM TO GET INTO THE ELSE IF BLOCK TO ADD ERROR MESSAGE TO THE ARRAY
if (form.fullname.value == "") errorMessages.push("Full Name cannot be empty");
else if (!/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/.match(form.fullname.value))
{
errorMessages.push("Name format error. Ex. Mr. John Smith");
}
if (form.street.value == "") errorMessages.push("Street cannot be empty");
if (form.postalcode.value == "") errorMessages.push("Postal Code cannot be empty");
if (form.phone.value == "") errorMessages.push("Phone cannot be empty");
if (form.email.value == "") errorMessages.push("Email cannot be empty");
alert(errorMessages.length);
if (errorMessages.length == 5)
{
var unorderedList = document.createElement("ul");
var list = document.createElement("li");
list.innerHTML = "Please fill something in. All fields are blank!";
unorderedList.appendChild(list);
displayErrorMessage.appendChild(unorderedList);
return false;
}
else if (errorMessages.length > 0)
{
var unorderedList = document.createElement("ul");
for (var n in errorMessages)
{
var list = document.createElement("li");
list.innerHTML = errorMessages[n];
unorderedList.appendChild(list);
}
displayErrorMessage.appendChild(unorderedList);
return false;
}
else
{
alert("Got your info -- now the form will be submitted!");
return true;
}
}
</script>
</body>
嘗試使用
!form.fullname.value.match(/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/)
該方法不是string.match(regexp)
。 例如
'Mr. OG Haza'.match(/^(Mr\.|Mrs\.) *[a-zA-Z]+ *[a-zA-Z]+$/)
Output: ["Mr. OG Haza", "Mr."]
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.