表单验证

这是一个简答的表单验证，它包含有正则表达式，来限制用户的输入，如果不符合要求则会提示有误；这个代码也很简单。

 

  <!DOCTYPE html>
  <html>
  <head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <style>
  div{
  border: 2px solid;
  width: 430px;
  height: 220px;
  }
  h1{
  text-align: center;
  }
  .err{
  color: red;
  }
  .denglu{
  width: 290px;
  height: 40px;
  }
  p{
  text-align: center;
  }
  </style>
  </head>
  <body>
  <div>
  <form action="#" method="post" id="myform" name="myform" onsubmit="return chkform()">
  <h1>登陆考试</h1>
  <p>
  <span style="letter-spacing: 0.3em;">用户名</span>： <input type="text" name="username"/>
  <span class="err" id="errname"></span>
  </p>
  <p>
  <span style="letter-spacing: 2em;">密</span>码： <input type="password" name="userpwd"/>
  <span class="err" id="errpwd"></span>
  </p>
  <p>
  <input type="submit" value="登陆" class="denglu"/>
  </p>
  </form>
  </div>
  <script>
  var myform = document.myform;
  myform.username.onblur=function(){
  var reg = /^[a-zA-Z]{4,100}$/;
  var err = document.getElementById('errname');
  if(reg.test(this.value)){
  err.innerHTML='√';
  }else{
  err.innerHTML='×';
  }
  };
  myform.userpwd.onblur=function(){
  var reg = /^\w{6,30}$/;
  var err = document.getElementById('errpwd');
  if(reg.test(this.value)){
  err.innerHTML='√';
  }else{
  err.innerHTML='×';
  }
  };
   
  function chkform(){
  myform.username.onblur();
  myform.userpwd.onblur();
  var spans = document.getElementsByTagName("span");
  for(var i=0; i<spans.length; i++){
  if(spans[i].className=='err' && spans[i].innerHTML.length>0){
  return false;
  }
  }
   
  return true;
  }
  </script>
  </table>
  </body>
  </html>

posted on 2017-03-26 23:25  小小的西红柿  阅读(229)  评论(0)    收藏  举报

导航