访问表单数据
为了访问输入表单的数据，首先需要区分表单中的域。这点可以利用HTML代码的id属性或者name属性处理。
<input id="zipcode" name="zipcode" type="text" size="5">
表单具有两种识别方式的原因，均与访问表单域的途径有关。
第一种途径使用getElementById()
另一种途径：
每个表单域都有一个form对象，可被传给任何验证表单数据的函数。
<input id="zipcode" name="zipcode" type="text" size="5" onclick="show_this_form(this.form)">
该函数的代码为：
function show_this_form(theForm){
alert(theForm["zipcode"].value);
}
看了上述代码，很容易猜到：
form对象厉害的地方在于它是个数组，负责存储表单中***所有域***。它并非是用数值存储索引，而是使用name属性。
表单的事件
当我们输入数据的时候，发生了哪些事件呢？
- 选择输入域(onfocus)
- 在域里输入数据(onkeypress/onkeyup/onkeydown等等)
- 离开该域，移向下一目标(onblur/onchange)
onblur
onblur和onchange有些类似，但是onchange只在某个域不再被选择而且输入内容发生改变的时候触发。
所以onchange不可以用于验证空域。如果用户浏览了每个空域，但是因为输入内容没有改变，onchange无法被触发。
当然onblur可以很好的解决这个缺点：它在某个域不再被选择的时候触发。
不使用alert框的验证
alert框并非通知用户输入不合理的理想方式。我们这里使用下面一段代码：
<input id="phone_number" name="phone_number" type="text" size="12" onblur="validateNonEmpty(this,document.getElementById('phone_help'));">
<span id="phone_help" class="help"></span>
我们这里使用空白的<span>，达成这样一个目的：
function validateNonEmpty(inputForm,helpText){
if(inputForm.value.length==0){
if(helpText!=null)
helpText.innerHTML="Please enter a value";
return false;
}else{
if(helpText!=null)
helpText.innerHTML="";
return true;
}
}
- this和this.form的区别？
this指的是该控件元素本身，它传递的不是数组。而this.form传递的是整个form。
另外判断完是否为空，其实还可以判断输入的是不是数字，或者输入长度是否符合规定。
坏数据不该到达服务器
尽管做了这么多验证，但是用户按了提交后，这些数据还是会发送到服务器。所以有如下代码：
function placeOrder(form) {
if (validateLength(1, 32, form["message"], form["message_help"]) &&
validateZipCode(form["zipcode"], form["zipcode_help"]) &&
validateNonEmpty(form["date"], form["date_help"]) &&
validateNonEmpty(form["name"], form["name_help"]) &&
validateNonEmpty(form["phone"], form["phone_help"]) &&
validateNonEmpty(form["email"], form["email_help"])) {
// Submit the order to the server
form.submit();
} else {
alert("I'm sorry but there is something wrong with the order information.");
}
}
<input type="button" value="Order Banner" onclick="placeOrder(this.form);" />
这就是为什么上述函数有返回值false or true的原因。
正则表达式验证数据
正则表达式出现在一对斜线//内部
元字符
.：匹配任何字符，换行符除外
\s：匹配空格（space/tab/换行符）
\d：匹配数字
\w：匹配任何字母或者数字
^：字符串需以模式起始
$：字符串需以模式结束
|：选替，这个或者那个。
举例如下：
/\w/：任何一个数字或字母
/^\d/：字符串起始处需要有一个数字,如007
/cat$/：字符串以cat结尾，如22cat
限定符
*：表示子模式出现0次或者多次
+：表示子模式出现1次或多次
{n}：表示子模式出现n次
?：表示子模式出现0次或者1次
()：集合字符或/和元字符，成为子模式
[]：从集合中可选
举例如下：
/\w*/：匹配任何数字或字母串，包括空串、
/.+/：匹配任何非空字符串
/(Hot)? ?Donuts/：匹配Hot Donuts或者Donuts
/^\w+@\w+.\w{2,3}$/：邮箱地址
如果邮箱是这样的[email protected]
那么需要这样写：
/^[\w\.-_\+]+@[\w-]+(\.\w{2,4})+$/
[\w.-_+]表示可以在数字、字母、. - _ +里任选
[\w-]表示可以在数字、字母、-里任选
\w{2,4}表示字母数字长度为2到4
(.\w{2,4})+表示.xx或.xxxx的一个或多个。例如 .edu.cn 或者 .com等等
正则表达式加入验证
var regex=/^\d{2}\/\d{2}\/\d{4}$/;//MM/DD/YYYY的格式
if(!regex.text(inputField.value)){
//输入不合法
}
正则表达式对象调用test（）方法。
表单代码如下
最后我们的代码如下：
<html>
<head>
<title>Bannerocity - Personalized Online Sky Banners</title>
<link rel="stylesheet" type="text/css" href="bannerocity.css" />
<script type="text/javascript">
function validateRegEx(regex, input, helpText, helpMessage) {
// See if the input data validates OK
if (!regex.test(input)) {
// The data is invalid, so set the help message and return false
if (helpText != null)
helpText.innerHTML = helpMessage;
return false;
}
else {
// The data is OK, so clear the help message and return true
if (helpText != null)
helpText.innerHTML = "";
return true;
}
}
function validateNonEmpty(inputField, helpText) {
// See if the input value contains any text
return validateRegEx(/.+/,
inputField.value, helpText,
"Please enter a value.");
}
function validateLength(minLength, maxLength, inputField, helpText) {
// See if the input value contains at least minLength but no more than maxLength characters
return validateRegEx(new RegExp("^.{" + minLength + "," + maxLength + "}$"),
inputField.value, helpText,
"Please enter a value " + minLength + " to " + maxLength +
" characters in length.");
}
function validateZipCode(inputField, helpText) {
// First see if the input value contains data
if (!validateNonEmpty(inputField, helpText))
return false;
// Then see if the input value is a ZIP code
return validateRegEx(/^\d{5}$/,
inputField.value, helpText,
"Please enter a 5-digit ZIP code.");
}
function validateDate(inputField, helpText) {
// First see if the input value contains data
if (!validateNonEmpty(inputField, helpText))
return false;
// Then see if the input value is a date
return validateRegEx(/^\d{2}\/\d{2}\/(\d{2}|\d{4})$/,
inputField.value, helpText,
"Please enter a date (for example, 01/14/1975).");
}
function validatePhone(inputField, helpText) {
// First see if the input value contains data
if (!validateNonEmpty(inputField, helpText))
return false;
// Then see if the input value is a phone number
return validateRegEx(/^\d{3}-\d{3}-\d{4}$/,
inputField.value, helpText,
"Please enter a phone number (for example, 123-456-7890).");
}
function validateEmail(inputField, helpText) {
// First see if the input value contains data
if (!validateNonEmpty(inputField, helpText))
return false;
// Then see if the input value is an email address
return validateRegEx(/^[\w\.-_\+]+@[\w-]+(\.\w{2,3})+$/,
inputField.value, helpText,
"Please enter an email address (for example, [email protected]).");
}
function placeOrder(form) {
if (validateLength(1, 32, form["message"], form["message_help"]) &&
validateZipCode(form["zipcode"], form["zipcode_help"]) &&
validateDate(form["date"], form["date_help"]) &&
validateNonEmpty(form["name"], form["name_help"]) &&
validatePhone(form["phone"], form["phone_help"]) &&
validateEmail(form["email"], form["email_help"])) {
// Submit the order to the server
form.submit();
} else {
alert("I'm sorry but there is something wrong with the order information.");
}
}
</script>
</head>
<body onload="document.getElementById('message').focus()">
<div class="heading">
<img id="logo" src="logo.png" alt="Bannerocity" />
</div>
<form name="orderform" action="bannerocity.php" method="POST">
<div class="field">
Enter the banner message:
<input id="message" name="message" type="text" size="32"
onblur="validateLength(1, 32, this, document.getElementById('message_help'))" />
<span id="message_help" class="help"></span>
</div>
<div class="field">
Enter ZIP code of the location:
<input id="zipcode" name="zipcode" type="text" size="5"
onblur="validateZipCode(this, document.getElementById('zipcode_help'))" />
<span id="zipcode_help" class="help"></span>
</div>
<div class="field">
Enter the date for the message to be shown:
<input id="date" name="date" type="text" size="10"
onblur="validateDate(this, document.getElementById('date_help'))" />
<span id="date_help" class="help"></span>
</div>
<div class="field">
Enter your name:
<input id="name" name="name" type="text" size="32"
onblur="validateNonEmpty(this, document.getElementById('name_help'))" />
<span id="name_help" class="help"></span>
</div>
<div class="field">
Enter your phone number:
<input id="phone" name="phone" type="text" size="12"
onblur="validatePhone(this, document.getElementById('phone_help'))" />
<span id="phone_help" class="help"></span>
</div>
<div class="field">
Enter your email address:
<input id="email" name="email" type="text" size="32"
onblur="validateEmail(this, document.getElementById('email_help'))" />
<span id="email_help" class="help"></span>
</div>
<input type="button" value="Order Banner" onclick="placeOrder(this.form);" />
</form>
</body>
</html>