（四） 表单验证技术

（四）  表单验证技术

进行表单验证：

    （思路）获取表单元素的值并进行判断；在表单的提交事件中调用表单验证函数

表单元素的值都为string类型。

string的常用属性和方法（和java相同，唯一区别就是java中的length是方法）

   
   
var str = "hello niit";

    属性：length                获取字符个数

   
   
//获取字符的长度
alert(str.length);

    方法：indexOf             查找字符串的位置         lastIndexOf

   
   
//获取指定字符的索引位置
alert(str.indexOf("h",3));
alert(str.lastIndexOf("i"));

               charAt               获取指定索引位置的字符

   
   
//获取指定索引对应的字符
alert(str.charAt(0));

               substring(起始位置，结束位置)          根据索引位置来截取

   
   
//根据索引位置截取
alert(str.substring(4,7));

               substr(起始位置,截取的长度)               根据长度来截取

   
   
//根据长度截取
alert(str.substr(4,3));

               charCodeAt      获取字符对应的ASCII的值

   
   
//获取字符对应的ASCII值
alert("_".charCodeAt(0));

               String.fromCharCode        根据ASCII值获取对应的字符

   
   
//根据ASCII值获取对应的字符
alert(String.fromCharCode(65));

---

表单提交方式

    表单验证失败，表单还是会提交。两种方式阻止失败的表单提交。

    1）onsubmit事件，只有按钮的type 为submit 才能被触发。

        onsubmit ="return 函数"   onsubmit = true 才会提交

        验证的方法里需要返回值  判断是否能够提交

   
   
<form id="loginForm" action="success.html" method="post" onsubmit="return validate()">
userName:<input type="text" id="userName" /><br />
password:<input type="password" id="password" /><br />
<input type="submit" value="login" />
</form>

    
    
function validate(){
	//alert("表单被提交了");	
	
	//判断用户名是否填写
	if(nameTag.value == ""){
		alert("请填写用户名！");
		return false;
	}
	//判断密码是否填写
	if(pwdTag.value == ""){
		alert("请填写密码！");
		return false;	
	}
	//判断密码长度不能低于6位
	if(pwdTag.value.length < 6){
		alert("密码长度不能小于6位！");	
		return false;
	}
}

    2）获取表单元素.submit()的方式

提交按钮要用普通按钮，并且添加点击事件 οnclick="函数"

验证时出现错误需要退出方法 return

   
   
<form id="loginForm" action="success.html" method="post">
userName:<input type="text" id="userName" /><br />
password:<input type="password" id="password" /><br />
<input type="button" value="login" onclick="validate()" id="loginButton"/>
</form>

    
    
function validate(){
	//判断用户名是否填写
	if(nameTag.value == ""){
		alert("请填写用户名！");
		//使光标聚焦文本框
		nameTag.focus();
		return;
	}
	//判断密码是否填写
	if(pwdTag.value == ""){
		alert("请填写密码！");
		pwdTag.focus();
		return;	
	}
	//获取用户名
	var userName = nameTag.value;
	//判断用户名是否有效：只能包含数字字母和下划线
	for(var i = 0; i < userName.length; i++){
		//获取每个字符对应的ASCII
		var code = userName.charCodeAt(i);
		//获取每个字符
		var ch = userName.charAt(i);
		//alert(code);
		//判断每个字符是否有效
		//if((code < 48 || code > 57) && (code < 97 || code > 122) && code != 95){
//			alert("用户名必须由数字字母下划线构成！");
//			return;
//		}
		if(!(ch >= "0" && ch <= "9" || ch >= "a" && ch <= "z" || ch == "_")){
			alert("用户名必须由数字字母下划线构成！");
			//选中当前的文本
			nameTag.select();
			return;
		}
	}
	//判断密码长度不能低于6位
	if(pwdTag.value.length < 6){
		alert("密码长度不能小于6位！");	
		return;
	}
	//提交表单
	var loginForm = document.getElementById("loginForm");
	//loginForm.action = "http://www.baidu.com";
	loginForm.submit();
}

focus() 使光标聚焦在文本框

select()选中当前的文件

---

正则表达式（严格区分大小写）

        正则表达式就是描述复杂规则的工具。

   
   
//编写正则表达式
var  rule =/^正则表达式$/;
//使用正则表达式验证
if(rule.test(values)){
         alert("验证成功");
}

元字符

            var   rule   =   /正则表达式 /;

    常用的元字符：

            \s                        匹配任意的空白字符

            ^                          匹配字符的开始

            $                         匹配字符的结束

            .                          除换行符以外的任意字符（最少一位）

            \w                       匹配字母数字或下划线或汉字（汉字只能在java中使用）

            \d                        匹配数字 0-9

            \b                        匹配单词的开始或结束（成对出现）\b   \b第一个表示开始，第二个表示结束    每个单词需要使用空格间隔

\S   \W   \D  表示相反的意思

    常用的限定符

           *                           重复任意次数 或  0 次

           +                          重复至少一次

           ?                          一次或 0 次

           {n}                       匹配 n 次

           {n,}                      匹配 n 以上的次数 

           {n,m}                   匹配 n 到 m 的次数

1)模糊匹配(输入的有hello就可以)

   
   
/hello/

2）精确匹配  ^开始     $结束（只能输入hello）

   
   
/^hello$/

3）匹配Hello 或 hello

   
   
/^(hello)|(Hello)$/
/^(h)|(H)ello$/

4）参数i表示不区分大小写(输入HELLO都可以)

   
   
var rule = /^hello$/i;

5）匹配任意字符（至少一位）

   
   
/./

    匹配任意一位字符

   
   
/^.$/

6)匹配niit.com或者是niit.cn          普通的  .  需要转移   \ .

   
   
/^niit\.((com)|(cn))$/

7)匹配2位数字或字母或下划线（下面用限定符更简单）

   
   
/^\w\w$/

8）匹配1位数字 0-9

   
   
/^\d$/

9）\b表示单词的开始或结束，每个单词间需要使用空格间隔

   
   
/\bhello\b/

10）任意多次的a

   
   
/^a*$/

         匹配niit开头的任意多的数字最后位是任意字符

   
   
/^niit\d*.$/

11）匹配niit后至少有一个com

   
   
/^niit(com)+$/

12）匹配niit开头，后一位要么是数字要么就没有

   
   
/^niit\d?$/

13)匹配4位数字

   
   
/^\d{4}$/

    匹配2-4位的数字

   
   
/^\d{2,4}$/

匹配2位以上的数字

   
   
/^\d\d+$/
/^\d{2,}$/

14)匹配1个字符必须是a或者b或者c

   
   
/^[abc]$/
/^[a-c]$/

15)任意一个数字字母或下划线   \w

   
   
/^(([0-9])|([a-z])|([A-Z])|_)$/

16)匹配任意多个数字，要求数字范围在0-5之间

   
   
/^[0-5]*$/

17)单字符不为a或b或c

   
   
/^[^abc]$/

18)不能为数字

   
   
/^\D$/

不能为数字字母或下划线

   
   
/^\W$/

验证邮箱

   
   
//验证邮箱
//var rule = /^\w+@(\w+\.[a-z,A-Z]+)+$/;

---

其他的特效

1）回车切换输入

        使用键盘输入事件onkeyDown事件

        检查输入的是否是回车键-（ASCII码13，tab键的ASCII码为9）

        输入改为Tab键的ASCII  

onkeyDown 和 onKeyPress事件的区别

        onKeyDown事件可以获取所以按键的ASCII，但是对大小写字母不敏感，始终获取大写字母的ASCII

        onKeyPress事件只能获取按键区的ASCII,对大小写字母敏感。

   
   
function keyDown(){
	//获取按键的ASCII
	var code = event.keyCode;
	//如果按下的是回车键，则更改为TAB键
	if(code == 13){
		event.keyCode = 9;
	}
	//判断当前的事件源
	//alert(event.srcElement);
	if(event.srcElement.type == "button" && event.srcElement.value == "注册"){
		//提交表单
		registForm.submit();	
	}
}

2）innerHTML提示信息

  通过  span对象.innerHTML=“”在页面上显示

innerHTML 和 innerText 的区别：

innerHTML 可以解析HTML代码

innerText是纯文本内容

3）即时错误提示特效

  onfocus事件（ 聚焦事件）   和   onblur事件（失去聚焦事件 ）

       当文本框失去聚焦时校验输入内容。

   
   
<form action="success.html" method="post" onsubmit="return validate()">
<table>
	<tr>
    	<td>用户名:</td>    
    	<td><input id="name" type="text" onblur="validateName(this)"/><span id="nameError"></span></td>
    </tr>
    <tr>
    	<td>密码:</td>
        <td><input id="pwd" type="password" onblur="validatePwd(this)"/><span id="pwdError"></span></td>
    </tr>
    <tr>
    	<td colspan="2"><input type="submit" value="登录" /></td>
    </tr>
</table>
</form>

    
    
<script>
var nameSpan = document.getElementById("nameError");
var pwdSpan = document.getElementById("pwdError");
var nameTag = document.getElementById("name");
var pwd = document.getElementById("pwd");
function validateName(obj){
	nameSpan.innerHTML = "";
	//非空校验
	if(obj.value == ""){
		nameSpan.innerHTML = "请填写用户名";
		return false;
	}
	//用户必须是3-12位以上的数字字母下划线
	var rule = /^\w{3,12}$/;
	if(!rule.test(obj.value)){
		nameSpan.innerHTML = "用户名由是3-12位以上的数字字母下划线构成";
		return false;
	}
	return true;
}
function validatePwd(obj){
	pwdSpan.innerHTML = "";
	if(obj.value == ""){
		pwdSpan.innerHTML = "请填写密码";	
		return false;
	}
	var rule = /^\w{6,12}$/;
	if(!rule.test(obj.value)){
		pwdSpan.innerHTML = "密码长度为6~12位";	
		return false;
	}
	return true;
}
function validate(){
	if(!(validateName(nameTag) && validatePwd(pwd))){
		return false;
	}
}
</script>

4）拖拽层移动

鼠标按下事件 onmousedown      

鼠标移动事件  onmousemove

鼠标松开事件 onmouseup

   两种方式：

            1）当鼠标点击时，获取该鼠标的坐标，当鼠标移动时，计算移动的x、y距离，然后加上原来的top  和 left 就可以得到现在层的top 和 left值

             2）当鼠标点击时，获取该鼠标的坐标到层的上左边距离，当鼠标移动时，获取鼠标的event.x,event.y  分别减去初始鼠标位置到层上左边距离 就可以得到现在层的top 和 left值。  

   
   
<body>
<div id="div" style="width:100px; height:100px; position:absolute; left:200px; top:50px; background-color:#06F"></div>
<script>
var div = document.getElementById("div");
//鼠标按下的状态
var hasClick = false;
//鼠标的坐标
var x;
var y;
//层的边距
var divLeft;
var divTop;
//鼠标按下的事件
div.onmousedown = function(){
	//记录按下的状态
	hasClick = true;
	//记录按下的点的坐标
	x = event.x;
	y = event.y;
	//记录当前层的边距
	divLeft = parseInt(div.style.left);
	divTop = parseInt(div.style.top);	
}
//鼠标移动的事件
document.onmousemove = function(){
	//判断鼠标是否按下
	if(hasClick){
		//记录移动中的点的坐标
		var nowX = event.x;
		var nowY = event.y;
		//计算移动的距离
		var moveX = nowX-x;
		var moveY = nowY-y;
		//改变层的位置
		div.style.left = divLeft+moveX+"px";
		div.style.top = divTop+moveY+"px";
	}
	
}
//鼠标松开的事件
div.onmouseup = function(){
	hasClick = false;	
}
</script>
</body>