js 表单验证

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
 </HEAD>
 <BODY>
 <form name="ff" action="as.html">
     <table width="519" height="163" id="table">
       <tr>
          <td class="col1">电子邮箱</td>
          <!--required email number 标签名字随便起-->
          <td  class="col2">
              <input id="email" type="text" required="required" email="email" name="email" onblur="checkUserName(this)" />
              <span id="emailW">输入email,不能为空格式应该************</span>
          </td>    
       </tr>
       <tr>
          <td>会员名</td>
          <td>
              <input id="username" type="text" required="required" number="number" name="username" onblur="checkUserName(this)" />
              <span id="usernameW">输入用户名,不能为空格式应该************</span>
          </td>
       </tr>
        <tr>
            <td>登录密码</td><td><input name="loginPwd" number="number" required="required"   type="password" id="loginPwd"  onblur="checkUserName(this)" /><span  id="loginPwdW">输入email,不能为空格式应该************</span></td>
            </tr>
            <tr>
            <td>确认密码</td><td><input name="repeatPwd" required="required" number="number"    type="password" id="repeatPwd"    onblur="checkUserName(this)" /><span  id="repeatPwdW">输入email,不能为空格式应该************</span></td>
            <select id="aa"></select>
            </tr>

        <tr>
          <td colspan="2" align="left" valign="middle">
            <input type="button" value="同意以下协议,提交注册" onclick="validate()"/>
          </td>
        </tr>
    </table>
</form>
 </BODY>
 <script> 
    function checkUserName(obj){
        var value =obj.value;    
        var required=obj.getAttribute("required");
        var number=obj.getAttribute("number");
        var email=obj.getAttribute("email");
        var state=true;
        if(required=='required'){//非空校验
            console.log("----------");
            if(value==null||value.trim==""){
                 state=false;
            }
         }
         if(email=='email'){//email校验
              var reg=/^\w+([\-_\.]?\w*)*@\w+(\.\w+){1,3}$/i;
              if(!reg.test(value)){
                  state=false;
              }
          }
          if(number=='number'){//数字校验
               var reg=/^[0-9]*.?[0-9]*$/;
               if(reg.test(value)){
                    state=false;
               }
            }

        if(state==false){
            obj.style.background='red';
        }else{
            obj.style.background='';
        }
        return state;
    } 

     function validate(){
        var state=true;
        var inputs=document.getElementsByTagName("input");
        for(var i=0;i<inputs.length;i++){
            var input=inputs[i];
            if(checkUserName(input)==false){
                state=false;
            }
        }
        if(state){
            document.ff.submit();
        }
     }        
 </script>
</HTML>
 

猜你喜欢

转载自blog.csdn.net/qq_32295383/article/details/81228452