DOM技术应用-表单校验

来源：互联网发布：2017年网络灰色收入编辑：程序博客网时间：2024/05/17 20:13

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">

//检验用户名
function checkUser(){
  var reg=new RegExp("^[a-z]{4}$");//用户名输入规则
   return check(reg,"user","userSpan","用户名正确","用户名错误");
  /*
  var userNode = document.getElementsByName("user")[0];
  var name=userNode.value;
  var spanNode = document.getElementById("userSpan");
  if(reg.test(name)){
   spanNode.innerHTML="用户名正确".fontcolor("green");
  }else{
   spanNode.innerHTML="用户名错误".fontcolor("red");
  }*/
}
//检验密码
function checkPsw(){
  var reg=new RegExp("^[a-zA-Z0-9]+$");//密码规则
  return check(reg,"psw","pswSpan","密码正确","密码错误");
  /*
  var pswNode=document.getElementsByName("psw")[0];
  var ps=pswNode.value;
  var spanNode=document.getElementById("pswSpan");
  if(reg.test(ps)){
   spanNode.innerHTML="密码正确".fontcolor("green");
  }else{
   spanNode.innerHTML="密码错误".fontcolor("red");
  }*/
}

//检验邮箱
function checkEmail(){
  var reg=new RegExp("\\w+@\\w+(\\.\\w+)+");
  return check(reg,"Email","EmailSpan","邮箱正确","邮箱错误");
}

function checkrePsw(){
  var flag=false;
  //首先获取第一次输入密码的值
  var pass = document.getElementsByName("psw")[0].value;
  //获取第二次输入密码的值
  var repass = document.getElementsByName("repsw")[0].value;
  //获取span节点
  var spanNode = document.getElementById("repswSpan");
  if(pass==repass){
   spanNode.innerHTML="两次输入的密码一致".fontcolor("green");
   flag=true;
  }else{
   spanNode.innerHTML="两次输入的密码不一致".fontcolor("red");
  }
  return flag;
}
//将方法的共性内容进行抽取
function check(reg,name,spanid,okinfo,errorinfo){
  var flag=false;
  //获取input节点
  var Node=document.getElementsByName(name)[0];
  //通过input节点获取value
  var val=Node.value;
  //获取span节点
  var spanNode=document.getElementById(spanid);
  //将用书输入的密码与规则比较
  if(reg.test(val)){
   spanNode.innerHTML=okinfo.fontcolor("green");
   flag=true;
  }else{
   spanNode.innerHTML=errorinfo.fontcolor("red");
  }
  return flag;
}
//判断用户是否选择了性别
function checkSex(){
  var flag=false;
  var radioNodes=document.getElementsByName("sex");
  for(var i=0;i<radioNodes.length;i++){
   if(radioNodes[i].checked){
    flag=true;
   }
  }
  var spanNode=document.getElementById("sexspan");
  if(!flag){
   spanNode.innerHTML="必须选择性别".fontcolor("red");
  }
  return flag;
}
//判断用户填入的信息是否都是true，如果是则提交
function checkForm(){
  if(checkUser()&&checkPsw()&&checkEmail()&&checkrePsw()&&checkSex()){
   return true;
  }
  return false;
}
</script>
</head>
<body>
<form onsubmit="return checkForm()" id="formid">
用户名称：<input type="text" name="user" onblur="checkUser()" />
<span id="userSpan"></span><br/>
输入密码：<input type="password" name="psw" onblur="checkPsw()">
<span id="pswSpan"></span><br/>
确认密码：<input type="password" name="repsw" onblur="checkrePsw()">
<span id="repswSpan"></span><br/>
输入邮箱：<input type="text" name="Email" onblur="checkEmail()">
<span id="EmailSpan"></span><br/>
选择性别：<input type="radio" name="sex" value="nan" />男
     <input type="radio" name="sex" value="nv" />女
     <span id="sexspan"></span><br/>
<span id="EmailSpan"></span><br/>
<input type="submit" value="提交数据" />
</form>
</body>
</html>