js-表单验证 

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8"/>
<title>正则表达式案例--前端检验表单2--onsubmit</title>
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<script type="text/javascript">
   function RegCheck(val,regexp,error){
      if(regexp == 0 && pwd.value != val){
            alert(error);
            return false;
      }
    if(!regexp.test(val)){
        alert(error);
        return false;
    }else{
            return true;
    }
   }
   function checkform(){
     for (var i=0;i<form1.length ;i++ )
     {
        if(form1.elements[i].type == 'text' || form1.elements[i].type == 'password'){
            var name =  form1.elements[i].name;
            var  val = form1.elements[i].value;
            
            if(val == ''){
              alert("亲们，您还还有未填写的项目哦，请仔细检查");
              return false;
            }
            switch (name)
             {
                  case 'user': 
                                //alert(val);
                                var regexp = /^[a-zA-Z_][\w]+$/gi;
                                flag = RegCheck(val,regexp,'用户名必须是以字母下划线开头，由字母数字下划线组成');
                                break;
                  case 'zsname':
                                var regexp = /[\u4e00-\u9fa5]/gi;
                                flag = RegCheck(val,regexp,'名字必须是中文');
                                break;
                  case 'phone':

                                var regexp = /^(0|86-)?(13|15|18)(\d{9})$/gi; 
                                 flag = RegCheck(val,regexp,'电话的长度是11位数字');
                                break;
                  case 'email':
                                //alert(val);[\w-]+@([a-z-]+\.)+(com|net|cn|org)?
                                var regexp = /^[\w-]+@([a-z-]+\.)+(com|net|cn|org)?$/gi;///^(\w)+(\.\w+)*@(\w)+((\.\w+)+)$/;
                                 flag = RegCheck(val,regexp,'请按规定写正确的电子邮箱');
                                break;
                  case 'pwd':
                                //alert(val);
                                var regexp = /^[a-zA-Z0-9]{9,}$/;
                                 flag = RegCheck(val,regexp,'密码由字母数字组成的9位数以上');
                                break;
                  case 'pwdtoo':
                                //alert(val);
                                 flag = RegCheck(val,0,'两次输入的密码不一致');
                                break;
             
             }
            
        }
     }
     if(!flag){
       return false;
     }
   }
 </script>
 <!--
    <script>
    面向对象的话  
       function checkform(){
           this.checks = function()
           {
                ........
           }
           this.reg_exp = function(){
           
           }
       }
       var checkform = new checkform();
       
</script>
 --->
</head>
<body >
   <form  id="form1"  onsubmit="return checkform()"> <!--面对对象的话 onsubmit="return checkform.checks()"-->
        <table border='1' cellspacing='0' cellpadding='9'>
            <tbody>
                <tr>
                  <th colspan='3' style='color:#f69'>用户注册</th>
                </tr>
                <tr>
                  <td>用户名：</td>
                  <td><input type='text' name='user' /></td>
                  <td>用户名必须是以字母下划线开头，由字母数字下划线组成</td>
                </tr>
                <tr>
                  <td>真实姓名：</td>
                  <td><input type='text' name='zsname' /></td>
                  <td>名字必须是中文</td>
                </tr>
                <tr>
                  <td>电话号码:</td>
                  <td><input type='text' name='phone' /></td>
                  <td>电话的长度是11位数字</td>
                </tr>
                <tr>
                  <td>电子邮箱:</td>
                  <td><input type='text' name='email' /></td>
                  <td>形如123@qq.com ddd@sohu.com ccc@168.com.cn ...........域名后缀暂时只能为com\cn\net\org</td>
                </tr>
                <tr>
                  <td>密码</td>
                  <td><input type='password' name='pwd' id='pwd' /></td>
                  <td>密码由字母数字组成的9位数</td>
                </tr>
                <tr>
                  <td>确认密码</td>
                  <td><input type='password' name='pwdtoo' /></td>
                  <td></td>
                </tr>
                <tr><td colspan='3' align='center'><input type="image"  src='images/reg.jpg' style='height:40px;display:block;padding:10px;'/><input type="reset"  style='background-image:url(images/reset.jpg); width:118px;height:40px;' value=''/></td></tr>
                <!--主要原因是使用了<input type="image"，而且放在了<form中。

<input type="image"标签类似<input type="submit"，只要放在form中，执行该按钮就会提交页面。-->
            </tbody>
        <table>
   </form>
</body>
</html>
<!---在后面会慢慢丰富表单的验证  包括onfocus onblur 的结合验证  ---->

 

posted @ 2016-07-22 20:52  yangboom  阅读(186)  评论(0)  编辑  收藏  举报
TOP