js效果之表单验证

function getLength (str) {
	return str.replace(/[^\x00-xff]/g,"xx").lenght;
}
window.onload=function() {
	//1. 元素选取
	var ainput=getElementsByTagName('input');
	var oName=ainput[0];
	var pwd=ainput[1];
	var pwd2=ainput[2];
	var ap=getElementsByTagName('p');
	var name_msg=ap[0];
	var pwd_msg=ap[1];
	var pwd_msg=ap[2];
	var aCount=getElementById('count');
	var aEm=getElementById('em');
	// 正则表达式
	// 数字，字母，长度
	// a-zA_Z0-9_......
	var re=/[^\w\u4e00-\u9fa5]/g;//匹配非法字符
	// 网页交互行为与用户交互
	// 用户名
	// onfocus 事件在对象获得焦点时发生
	oName.onfocus=function(){
		name_msg.style.display="";
		name_msg.innerHTML='输入正确的用户名！'

	}
	// onkeyup 事件会在键盘按键被松开时发生。
	oName.onkeyup=function(){
		count.style.visibility="visible";
		name_length=getLength(this.value);
		count.innerHTML=name_length+"个字符";
		if (name_length=0){
			count.style.visibility="hidden";
		}
	}
	oName.onblur=function(){
		// 含有非法字符 
		var re=/[^\w\u4e00-\u9fa5]/g;
		if (re.test(this.value)) {
			name_msg.innerHTML='含有非法字符！';
		}
		// 不能为空
		else if (this.value=="") {
			name_msg.innerHTML='内容不能为空!';
		}
				// 长度超过25字符

		else if(name_length>25){
					name_msg.innerHTML='长度超过25字符';

		}
				// 长度少于6个字符

		else if (name_length<6) {
					name_msg.innerHTML='长度少于6个字符';
		}
		// OK
		else{
			name_msg.innerHTML='ok';

		};
		

	}

}

部分代码，html，css不贴了，这是自己学习的js代码。

转载于:https://my.oschina.net/zhaoxiaobao/blog/359722