Head first javascript（五）

每个表格输入都有一个form对象可以作为参数，如：

<input id ="zipcode" name = "zipcode" type = "text" ... 
    onclick = "showIt(this.form)"/>
...
function showIt(theForm){
    alert(theForm["zipcode"].value);
}

this.form表示该表格的form对象作为参数被传进函数，在showIt()函数中用"zipcode"来引用这个对象

onfocus，onblur/onchange

有几个输入文本信息的对话框，正在输入的那个即onfocus，而离开当前框切换到下一个框的时候就是onblur/onchange，然后下一个输入框变成onfocus.onchange与onblur不同的是在离开当前对话框的时候输入内容有了改变才会触发，而onblur只要离开当前输入框就会触发。

 

经常需要验证一些输入是否为空，给用户一些提示：

<input id = "..." ... onblur = "validateNonEmpty(this);"/>
...
function validateNonEmpty(inputField){
    if(inputField.value.length == 0){//输入内容为空
        alert("please enter a value.");
        return false;
    }
    return true;//返回值并未使用
}

使用弹出框提示不是用户友好的表现，可以换一种方法，在输入框后面给出一些文字提示

<input id = "phone" name = "phone" type = "text" 
    onblur = "validateNonEmpty(this, document.getElementById('phone_help'));"/>
<span id = "phone_help"></span>
...
function validateNonEmpty(inputField, helpText){
    if(inputField.value.length == 0){
        //the data is empty
        if(helpText != null) //make sure the text element exists.
            helpText.innerHTML = "please enter a value.";
        return false;
    }
    else{
        //the data is valid
        if(helpText != null)
            helpText.innerHTML = "";
        return true;
    }

helpText里面的innerHTML属性可以修改页面上<span>标签里显示的内容

同样的方法可以用在检查输入文本的程度是否符合要求，如下：

function validateLength(min, max, inputField, helpText){
    if(inputField.value.length < min || inputField.value.length > max){
        if(helpText != null)
            helpText.innerHTML = "please enter a value" + min + "to" + max + "in length";
    return false;
    }
    else{
        if(helpText != null)
            helpText.innerHTML = "";
        return true;
    }

即使在每一个输入框后面都有提示用户输入的格式，但是仍然不能保证用户提交的时候就一定输入的是符合要求的信息，所以需要在点击提交按钮的时候再一次的进行检查，如：

<input type = "button" value = ... onclick = "placeOrder(this.form);"/>
...
function placeOrder(form){
    if(validateLength(...) && validate... && validate...)
        form.submit();
    else{
        alert("there is something wrong with the info.");
    }

在传递参数到placeOrder函数的时候把this.form即整个表格对象传递进去，因为要检查整个表格内容是否合法。检查合法之后可以通过form.submit()函数提交表格.

检查输入日期的合法性：日期的形式如MM/DD/YYYY，即month/day/year，需要验证3个部分都是数字而且位数符合要求。这里需要用到js的正则表达式

Pattern = / expression /

js的正则同样需要设定它的pattern,格式为两边用/扩起来，比如刚好匹配5个数字的正则：

Pattern = /^\d{5}$/

js里面的正则表达式是用RegExp对象来表示的，可以直接声明一个RegExp对象，如：

var regex = /^\d{5}$/;

RegExp对象里面的test()模式可以用来进行匹配，如：

if(！regex.test(inputField.value) ...

有了正则表达式的简单使用方法就可以验证输入的字符串是否匹配正确，如：

function validateRegEx(regex, inputStr, helpText, helpMessage) {
	if(!regex.test(inputStr)){
		//invalid
		if(helpText != null)
			helpText.innerHTML = helpMessage;
		return false;
	}
	else{
		if(helpText != null)
			helpText = "";
		return true;
	}
}

这里的函数形式是为了方便重复使用函数，可以判断给定的字符串是否匹配而且会给出错误提示helpMessage，下面就可以调用ValidateRegEx函数来判断日期格式是否合法了：

function validateDate(inputField, helpText) {
	if(!validateNonEmpty(inputField, helpText))
	//输入为空字符串
		return false;
	return validateRegEx(/^\d{2}\/\d{2}\/\d{4}$/, inputField.value,
		helpText, "please enter a date such as 01/14/2000");
				
}