通过JavaScript 效果实现基础的用户名密码判断

/*********************************正则对象常用****************************************/

正则对象:
        模式修正符:
		g   匹配所有 相当于php的preg_match_all
		方法:
		Exec() 匹配       返回匹配的内容 
		test() 是否匹配   返回布尔类型 
字符串有关正则的方法:
    Str.search()
	Str.match()
	Str.replace()
	Str.split()
注意:Js的正则不要加引号 否则变成字符串 
/**********************************html页面************************************/
index.html页面源码

<!doctype html>
<html>
     <head>
	      <meta http-equiv="content-type" content="text/html;charset=UTF-8"/>
		  <script src="2.js"></script>
		  <title>表单验证</title>
	 </head>
	 <body>
   username<input type="text" name="username" id="user"><span id="userinfo">6-12数字 字母 下划线</span><br/>
   password<input type="password" name="password" id="pass"><span id="passinfo">密码长度为6-15</span><br/>
           <input type="submit" >
   </body>
</html>


/*********************************script页面验证**********************************/ 
js源码 

window.onload = function(){
	var user = document.getElementById("user");
	var pass = document.getElementById("pass");
	var useri = document.getElementById("userinfo");
	var passi = document.getElementById("passinfo");
	//触发失去焦点事件 
	user.onblur = function(){
		var userp = /^\w{6,12}$/;
		if(userp.test(this.value)){
			//true合法
			useri.innerHTML = "<font color='green'>正确</font>";
		}else{
			//false 不合法
			useri.innerHTML = "<font color='red'>错误</font>";
		}
	}
	//触发失去焦点事件 
	pass.onblur = function(){
		if(this.value.length>=6 && this.value.length<=15){
			//true合法
			passi.innerHTML = "<font color='green'>正确</font>";
		}else{
			//false 不合法
			passi.innerHTML = "<font color='red'>错误</font>";
		}
	}
}

猜你喜欢

转载自blog.csdn.net/feiyucity/article/details/86664201