正则表单验证

正则表单验证

<!DOCTYPE html>

<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 action="" >

  <table width="449" height="530" border="1" align='center'>

   <tr>

    <td colspan="2" align="center">用户名注册</td>

    </tr>

   <tr>

    <td width="116" align="right">姓名：</td>

    <td width="323">

      <label>

       <input type="text" name="" id="name" /><span id="s1"></span>

      </label>

    </td>

   </tr>

   <tr>

    <td width="116" align="right">性别：</td>

    <td width="323">

      <label>

       <input type="radio" name="sex" id="b" />男

       <input type="radio" name="sex" id="g" />女

       <span id="s2"></span>

      </label>

    </td>

   </tr>

   <tr>

    <td align="right">年龄：</td>

    <td><label>

     <input type="text" name="" id="age" /><span id="s3"></span>

    </label></td>

   </tr>

   <tr>

    <td align="right">密码：</td>

    <td><label>

     <input type="password" name="" id="pwd" /><span id="s4"></span>

    </label></td>

   </tr>

   <tr>

    <td align="right">确认密码：</td>

    <td><label>

     <input type="password" name="" id="qpwd" />

    </label><span id=s5></span></td>

   </tr>

   <tr>

    <td align="right">手机：</td>

    <td><label>

     <input type="text" name="" id="tel" /><span id="s6"></span>

    </label></td>

   </tr>

   <tr>

    <td align="right">QQ:</td>

    <td><label>

     <input type="text" name="" id="qq" /><span id="s7"></span>

    </label></td>

   </tr>

   <tr>

    <td align="right">邮箱：</td>

    <td><label>

     <input type="text" name="" id="email" /><span id="s8"></span>

    </label></td>

   </tr>

   <tr>

    <td align="right">邮编：</td>

    <td><label>

     <input type="text" name="" id="eml" /><span id="s9"></span>

    </label></td>

   </tr>

   <tr>

    <td align="right">身份证：</td>

    <td><label>

     <input type="text" name="" id="sname" /><span id="s10"></span>

    </label></td>

   </tr>

   <tr>

    <td align="right">验证码：</td>

    <td><label>

     <input type="text" id="y"/>

     <span style="80px;height: 20px;border: 1px solid red;background: url(1.png) -10px -15px;display: inline-block;" id="yz"></span>

     <a href="#" id="btn">看不清</a>

    </label><span id="s111"></span></td>

   </tr>

    <tr>

    <td align="right">爱好：</td>

    <td><label>

    <input type="checkbox" name="a" id="c1">

    足球

    <input type="checkbox" name="a" id="c2">

    篮球

    <input type="checkbox" name="a" id="c3">

    排球

    <input type="checkbox" name="a" id="c4">

    网球



    </label><span id="s13"></span></td>

   </tr>

   <tr>

    <td height="36" colspan="2" align="center"><label>

     <input type="submit" value="注册" />

    </label></td>

    </tr>

  </table>

</form>

</body>

</html>

<script src="../../二阶段案例/public.js"></script>

<script type="text/javascript">

  /*

   要求：

   1、使用失去焦点事件完成表单验证每一项验证失去焦点时都可以即时验证

   2、姓名：单词字符组成 6--10为，不能用数字开头

   年龄：只能由数字组成年龄不能为负数

   密码：6--18位字符组成有密码强弱验证

   3、确认密码和密码相同

   4、手机号： 15 13 18 开头

   5、qq ： 5--12位数字第一位不能是数字

   6、邮箱：必须有@符号

   7、邮编：6为数字

   8、身份证： 18位最后一位考虑有x

   9、验证码

      输入的验证码必须和红色框中的相同，点击看不清可以实现验证码的切换

      验证码由字母数字组成

   10、爱好和性别必选

   * */

   var oForm = document.querySelector("form");

   oForm.onsubmit = function(){

   if( flagName && checkSex() && flagAge && flagPwd && flagQpwd && flagTel && flagQQ && flagEmail && flagEml && checkHobby() && flagSname && flagSyz ){

      return true;

   }else{

      return false;

   }

   }

   //用户名验证

   $id("name").onblur = function(){

     var flagName = null;

     var strName = $id("name").value;

     var reg = /^[^d][a-zA-Zd_]{5,9}$/;

     if( reg.test( strName ) ){

     flagName = true;

     $id("s1").innerHTML = "正确"

     }else{

     flagName = false;

     $id("s1").innerHTML = "字符组成 6--10为，不能用数字开头"

     }

   }



   //性别

   function checkSex(){

     if( $id("b").checked || $id("g").checked ){

        return true;

      }else{

        $id("s2").innerHTML = "必选一项";

        return false;

      }

   }



   //年龄验证

   $id("age").onblur = function(){

      var flagAge = null;

      var strAge = $id("age").value;

      var reg = /^d$/;

      if( reg.test( strAge ) ){

        flagAge = true;

        $id("s3").innerHTML = "正确"

      }else{

        flagAge = false;

        $id("s3").innerHTML = "只能由数字组成年龄不能为负数"

      }

   }



   //密码验证

   $id("pwd").onblur = function(){

      var flagPwd = null;

      var strPwd = $id("pwd").value;

      //纯数字字母特殊符号

      var regNum = /^d+$/;

      var regLetter = /^[a-z]+$/i;

      var regChar = /^[^0-9a-z]+$/i;

      //包含数字字母特殊符号

      var _regNum = /d+/;

      var _regLetter = /[a-z]+/i;

      var _regChar = /[^0-9a-z]+/i;

      if( strPwd.length < 6 || strPwd.length > 18 ){

       return;

      }

      if( regNum.test(strPwd)||regLetter.test(strPwd)||regChar.test(strPwd) ){

        //弱

        $id("s4").innerHTML = "密码较弱";

      }else if( _regNum.test(strPwd)&&_regLetter.test(strPwd)&&_regChar.test(strPwd) ){

        //强

        $id("s4").innerHTML = "密码较强";

      }else{

        //中

        $id("s4").innerHTML = "密码不强不弱";

      }

   }



   //确认密码验证

   var flagQpwd = null;

    $id("qpwd").onblur = function(){

      var strPwd = $id("pwd").value;

      var strQpwd = $id("qpwd").value;

      if( strQpwd != "" ){

        if( strPwd == strQpwd ){

          flagQpwd = true;

          $id("s5").innerHTML = "正确";

        }else{

          flagQpwd = false;

          $id("s5").innerHTML = "两次密码不一致";

        }

      }

    }



    //手机验证

    var flagTel = null;

    $id("tel").onblur = function(){

    var strTel = $id("tel").value;

    var reg = /^1[358]d{9}$/;//手机号

      if( reg.test( strTel ) ){

        //正确

        flagTel = true;

        $id("s6").innerHTML = "正确";

      }else{

        //错误

        flagTel = false;

        $id("s6").innerHTML = "手机号： 15 13 18 开头";

      }

    }



    //QQ号验证

    var flagQQ = null;

    $id("qq").onblur = function(){

      var strQQ = $id("qq").value;

      var reg = /^[^0]d{4,11}$/;

      if( reg.test( strQQ ) ){

        flagQQ = true;

        $id("s7").innerHTML = "正确";

      }else{

        flagQQ = false;

        $id("s7").innerHTML = "5--12位数字第一位不能是0";

      }

    }



    //邮箱验证

     var flagEmail = null;

     $id("email").onblur = function(){

     var strEmail = $id("email").value;

     var reg = /^w+@w+(.w+)+$/;

     if( reg.test( strEmail ) ){

        flag = true;

        $id("s8").innerHTML = "正确";

     }else{

        flag = false;

        $id("s8").innerHTML = "必须有@符号";

     }

     }



     //验证邮编

     var flagEml = null;

     $id("eml").onblur = function(){

     var strEml = $id("eml").value;

     var reg =/^d{6}$/;

     if( reg.test( strEml ) ){

        flag = true;

        $id("s9").innerHTML = "正确";

     }else{

        flag = false;

        $id("s9").innerHTML = "只能是6为数字";

     }

     }



     //身份证验证

     var flagSname = null;

     $id("sname").onblur = function(){

     var strSname = $id("sname").value;

     var reg =/^[1-9]d{16}(d|x)$/;

     if( reg.test( strSname )){

        flag = true;

        $id("s10").innerHTML = "正确";

     }else{

        flag = false;

        $id("s10").innerHTML = "只能是18位数字，最后一位可以是x";

     }

     }



     //验证码刷新

     function yzm(){

   var str = "";

   for(var i= 1;i<=6;i++){

      var code = rand(48,122);

      if(code>=58&&code<=64 || code>=91&&code<=96){

        i--;

      }else{

        str += String.fromCharCode(code);

      }

   }

   return str;

   }

     $id("yz").innerHTML = yzm();

     $id("btn").onclick = function(){

   $id("yz").innerHTML = yzm();

     }



     //验证码验证

     var flagYz = null;

     $id("y").onblur = function(){

     var str = this.value;

     var strOld = $id("yz").innerHTML;

     if(str == strOld){

        $id("s111").innerHTML = "ok";

        flagYz = true;

     }else{

        $id("s111").innerHTML = "erro"

        flagYz = false;

     }

     }



    //爱好验证

    function checkHobby(){

    //统计被选中的复选框的个数大于等于2 返回true

    var count = 0;

    var hs = document.getElementsByName("a");

    for( var i = 0 ; i < hs.length ; i++ ){

      if( hs[i].checked ){

        count++;

      }

    }

    if( count >= 2 ){

      flag = true;

    }else if( count < 2 ){

      flag = false;

      $id("s13").innerHTML = "至少选择两项";

    }

  }

</script>
相关阅读:
SVM学习笔记-线性支撑向量机
 阿里面试回来，想和Java程序员谈一谈
 看外国女程序员如何直播写代码
 shoeBox超实用的雪碧图（Sprite）图制作工具-使用
 Android图像处理之图形特效处理
 SMP、NUMA、MPP体系结构介绍
 TIOBE 2017 8月编程语言排行榜后院“硝烟四起”
Android Studio中Git和GitHub使用详解
 矩阵乘法快速幂 codevs 1574 广义斐波那契数列
 矩阵乘法 codevs 1287 矩阵乘法
原文地址：https://www.cnblogs.com/tis100204/p/10328835.html