DOM技术应用-表单校验

最新推荐文章于 2022-12-22 17:55:23 发布

asq6536960

最新推荐文章于 2022-12-22 17:55:23 发布

阅读量306

点赞数

分类专栏： java 传智播客学习笔记

本文链接：https://blog.csdn.net/asq6536960/article/details/8164482

版权

java 同时被 3 个专栏收录

12 篇文章 0 订阅

订阅专栏

学习笔记

12 篇文章 0 订阅

订阅专栏

传智播客

11 篇文章 0 订阅

订阅专栏

<!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 οnsubmit="return checkForm()" id="formid">
用户名称：<input type="text" name="user" οnblur="checkUser()" />
<span id="userSpan"></span><br/>
输入密码：<input type="password" name="psw" οnblur="checkPsw()">
<span id="pswSpan"></span><br/>
确认密码：<input type="password" name="repsw" οnblur="checkrePsw()">
<span id="repswSpan"></span><br/>
输入邮箱：<input type="text" name="Email" οnblur="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>

asq6536960

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM技术应用-表单校验

http://www.w3.org/TR/html4/loose.dtd">Insert title here //检验用户名 function checkUser(){ var reg=new RegExp("^[a-z]{4}$");//用户名输入规则 return check(reg,"user","userSpan","用户名正确","用户名
复制链接

扫一扫