登录注册页面的验证

登录注册验证是我们平时生活中碰到的最常见的验证，可以说是处处可见。
总结常见的验证流程：

1. 用户选中某一个输入框，显示输入框的提示信息。
2. 输入该输入框的信息。
3. 用户输入完一段信息后，选中下一个输入框，这时上一个输入框失去焦点，开始对用户输入的信息进行判定。
4. 判定分为很多，当然也有一边输入一边判定的。判定完毕后显示提示信息。
5. 重复以上4个步骤，直到需要用户输入的数据全部都符合要求。
6. 提交表单

这里拿百度的注册页面做一个简单的案例。我这里并没有在失去输入框焦点时做验证，而是一同放在了点击提交按钮时验证。

选中输入框时

一般来说，当用户选中某个输入框时，我们应该将该输入框需要输入的数据有什么要求告知给用户，也就是展示出来。当然，有的界面是直接将提示信息展示了，大致都相同。

// 获得焦点事件
function focus(){
	// 给有提示信息的和没提示信息的分开绑定
	if(this.parentNode.getElementsByTagName('div').length == 2){
		// 显示提示信息
		this.nextElementSibling.className = 'tips'
		// 隐藏提交后的提示信息
		this.parentNode.querySelector('div:last-child').className = 'none'
	}else{
		this.parentNode.querySelector('div:last-child').className = 'none'
	}
}

这里提示信息指的是验证该输入框后的提示信息。如果我们提交了一次表单后，会把对输入框的验证结果提示信息展示出来，所以我们展示输入框的输入提示信息时，需要把验证结果提示信息隐藏。

验证

当我们点击提交按钮时，会对输入的信息挨个检测，并将检测后的提示信息展示出来。

// 添加表单提交事件
document.querySelectorAll('#form button')[1].onclick = function(){
	var bool = true
	// 将5个input的框的条件放入数组
	var bools = [
		(function(){
			var len = 0
			for(var i = 0; i < inputs[0].value.length; i++){
				if(inputs[0].value[i] >= '\u4e00' && inputs[0].value[i] <= '\u9fa5'){
					len += 2
				}else if(regtest(/\w/, inputs[0].value[i])){					
					len++
				}else{ return false }	
			}
			if(len > 14 || len == 0){ return false }
			return true
		})(),
		regtest(/^(1[3-9]\d{9})$/, inputs[1].value),
		regtest(/\w{8,16}/, inputs[2].value),
		regtest(/\d{4}/, inputs[3].value) && inputs[3].value == num,
		inputs[4].checked
	]
	// 遍历inputs
	for(var i = 0; i < inputs.length; i++){	
		// 调用检测input框值的方法	
		if(!getBool(bools[i], i)){
			bool = false
		}
	}
	return bool
}