码迷,mamicode.com
首页 > Web开发 > 详细

js-表单验证

时间:2016-07-22 22:53:57      阅读:187      评论:0      收藏:0      [点我收藏+]

标签:

<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 的结合验证 ---->

 

js-表单验证

标签:

原文地址:http://www.cnblogs.com/YangJieCheng/p/5697106.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!