网页编程--JavaScript之表单校验

来源：互联网发布：ubuntu flash命令行编辑：程序博客网时间：2024/06/07 03:16
<!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>表单校验与正则表达式</title><style type="text/css"></style><script type="text/javascript">  //代码抽取(通过正则表达式校验的工具函数)  function check(name,spandId,reg,okInfo,errInfo){      var oUserNode = document.getElementsByName(name)[0];      var strName = oUserNode.value;      var oSpanNode= document.getElementById(spandId);                       var boo = true;      //用正则校验      //var reg=/^hncu/i;      if(reg.test(strName)){//用正则表达式来判断是否符合要求                    oSpanNode.innerHTML=okInfo.fontcolor("green");      }else{         boo=false;          oSpanNode.innerHTML=errInfo.fontcolor("red");      }    return boo;  }  //校验用户名function checkUser(){  var reg = /^[a-z]{4}/i;  return check("user","userspan",reg,"用户名格式正确","用户名格式错误");}//校验用户输入密码function checkPwd(){  var reg = /^\d{6}/;  return check("pwd","pwdspan",reg,"密码格式正确","密码格式错误");}//校验用户输入邮箱地址 function checkMail(){ var reg = /^\w+@\w+(\.\w+)+$/i;   return check("mail","mailspan",reg,"邮箱格式正确","邮箱格式错误");}//判断连个输入框内的值是否相等,即确认密码后才提交给后台function checkPwd2(){   var strPwd1 = document.getElementsByName("pwd")[0].value;    var strPwd2 = document.getElementsByName("pwd2")[0].value;        var oPwd2SpanNode = document.getElementById("pwd2span");    var boo ;    if(strPwd1==strPwd2){         boo = true;         oPwd2SpanNode.innerHTML = "两次密码一致".fontcolor("green");    } else{         boo = false;        oPwd2SpanNode.innerHTML = "两次密码不一致".fontcolor("red");    }    return boo;}function mySubmit(){   if(checkUser()&&checkPwd()&&checkMail()&&checkPwd2()){      regForm.submit();//直接用id调函数    }}  function tt(){             /*             访问标签节点的两种简便方式:        1)用id值直接当作该对象进行访问;        2)对于form,img,a标签等，可以用document.forms[], document.images[], document.links[]集合的方式进行访问     */    // alert("11111");     alert(regForm.innerHTML);//id     alert(document.forms[0].innerHTML);   } </script></head><body>   <h2>表单校验与提交的综合</h2>   <form  id ="regForm" action="">        用户名称:<input type="text" name="user" onblur="checkUser();"/>          <span id="userspan"></span><br/>                         输入密码:<input type="password" name = "pwd" onblur="checkPwd();"/>              <span id="pwdspan"></span><br/>            确认密码:<input type="password" name = "pwd2" onblur="checkPwd2();"/>              <span id="pwd2span"></span><br/>                   邮箱地址:<input type="text" name = "mail" onblur="checkMail()">              <span id="mailspan"></span><br/>              <input type="submit" value="注册" onclick="mySubmit()">   </form>   <hr/>   <form action="">   <input type="button" value="测试" onclick="tt();"/>   </form></body></html>
阅读全文
0 0