（17）用户注册信息校验：正则表达式
一、用户名校验
在用户注册网站时，应该用户写完每条信息后，就校验是否正确，这样有助于上网体验，若提交给服务器再校验，若出错较多，增加了服务端的负担而且用户体验差。
用户写完一条信息就校验，校验是个事件，是onblur事件：当对象失去输入焦点时触发，即用户输入完此条信息，此焦点失去时校验。
进行字符串校验，应该想到正则表达式。
Js对象正则表达式对象、RegExp对象
创建正则表达式的两种方式：
①re=/^[a-z]{4} /②re=newRegExp(“[a−z]4 ”,i);
这两种方式一般情况下都可以，但是若遇到\d,re=/^\d{4} /(没字符串不用转义)re=newRegExp(“\d4 ”,i);(字符串需要对\进行转义)
③若只是判断是否匹配，返回的是boolean，应该用regexp.test(str);
stringObj.match(rgExp):返回包含查找结果的数组（至少在校验中不常用）
div标签是带回车的标签，span是不带回车的标签，若想要多个标签的内容在一行显示，应该用span（应用场景是校验结果或者购物总金额…..）
二、表单提交
①提交数据会用到注意只用的是submit对象，而不是简单的button对象
②表单的信息按照要求输入正确，才允许提交，否则不会提交给服务器，
用到了form中的onsubmit事件，注意其格式为οnsubmit=”return 是否校验正确的函数”
<body>
<script type="text/jscript">
function checkUser()
{
var flag;//根据用户名判断是否将表单提交给服务器，在checkForm中会用这个返回值
//获取用户名节点
var userNode=document.getElementsByName("user")[0];
//获取span节点
var spanNode=document.getElementById("userspan");
var userName=userNode.value;
var regexp=new RegExp("^[a-z]{4}$");//用户名规则：4个字母
if(regexp.test(userName))
{
spanNode.innerHTML="用户名正确";
flag=true;
}
else
{
spanNode.innerHTML="用户名错误";
flag=false;
}
return flag;
}
function checkForm()
{
if(checkUser())
return true;
return false;
}
function mySubmit()
{
//获取表单节点
var oFormNode=document.getElementById("userinfo");
oFormNode.submit();
}
script>
<form id="userinfo" onsubmit="return checkForm() ">
用户名称：<input type="text" name="user" value="" onblur="checkUser()"/>
<span id="userspan">span><br/>
输入密码：<input type="password" name="psw" value=""/>
<span id="pswspan">span><br/>
<input type="submit" value="提交数据" />
form>
<hr/>
<input type="submit" value="我的提交" onclick="mySubmit()" />
body>三、对多个文本框进行校验
其实无论是校验密码还是校验用户名，其校验过程都是相同的：
①获得要校验的节点，然后获得其值
②获取写校验结果的span节点
③正则规则
④对其校验，并且要有校验结果正确的span值，和校验错误的span值
若校验项较多，可以将上面的5个值作为参数传递到校验函数中
代码：用户注册信息校验
注意确认密码是确认两次输入的密码一致，不必确定格式
<body>
<script type="text/jscript">
/*function checkUser()
{
var flag;//根据用户名判断是否将表单提交给服务器，在checkForm中会用这个返回值
//获取用户名节点
var userNode=document.getElementsByName("user")[0];
//获取span节点
var spanNode=document.getElementById("userspan");
var userName=userNode.value;
var regexp=new RegExp("^[a-z]{4}$");//用户名规则：4个字母
if(regexp.test(userName))
{
spanNode.innerHTML="用户名正确";
flag=true;
}
else
{
spanNode.innerHTML="用户名错误";
flag=false;
}
return flag;
}*/
function check(name,spanid,reg,rightinfo,errorinfo)
{
var flag;
//根据name获取要校验的节点
var nameNodeVal=document.getElementsByName(name)[0].value;
//获取span节点
var spanNode=document.getElementById(spanid);
//进行校验
if(reg.test(nameNodeVal))
{
spanNode.innerHTML=rightinfo;
flag=true;
}
else
{
spanNode.innerHTML=errorinfo;
flag=false;
}
return flag;
}
function checkuser()
{
reg=/^[a-z]{4}$/i;
return check("user","userspan",reg,"用户名正确","用户名错误");
}
function checkpsw()
{
reg=/^[0-9]{4}$/;
return check("psw","pswspan",reg,"密码格式正确","密码格式错误");
}
function checkrepsw()
{
//确认密码并不需要确认格式，只需要两次密码一致即可
//1，获取第一次输入的密码值
var PswVal=document.getElementsByName("psw")[0].value;
//2，获取确认密码的值
var rePswVal=document.getElementsByName("repsw")[0].value;
//3.获取确认密码的span
var respanNode=document.getElementById("repswspan");
//判断两个值是否相同
if(PswVal==rePswVal)
{
respanNode.innerHTML="两次密码一致";
flag=true;
}
else
{
respanNode.innerHTML="两次密码不一致";
flag=false;
}
return flag;
}
function checkmail()
{
reg=/^\w+@\w+(\.\w+)+$/i;
return check("mail","mailspan",reg,"邮箱格式正确","邮箱格式错误");
}
function checkForm()
{
alert(checkuser()+"---"+checkuser()+"---"+checkrepsw()+"---"+checkmail());
if(checkuser()&&checkuser()&&checkrepsw()&&checkmail())
return true;
return false;
}
script>
<form id="userinfo" onsubmit="return checkForm() ">
用户名称：<input type="text" name="user" value="" onblur="checkuser()"/>
<span id="userspan">span><br/>
输入密码：<input type="password" name="psw" onblur="checkpsw()"/>
<span id="pswspan">span><br/>
确认密码：<input type="repassword" name="repsw" onblur="checkrepsw()"/>
<span id="repswspan">span><br/>
输入邮箱：<input type="text" name="mail"onblur="checkmail()" />
<span id="mailspan">span><br/>
<input type="submit" value="提交数据" />
form>
<hr/>
body>
html>