正则表单验证

正则表单验证

<!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>
相关阅读:
正则表达式预：
cookie 二：
Javascript之运动框架2
cookie预：
Javascript之链式运动框架1
基于Azure的软件部署和开发系列沙龙
 在Docker中安装.NET Core（使用命令行工具）
Xshell 无法连接虚拟机中的ubuntu的问题
 springboot09-redis
springboot08-jpa-mysql
原文地址：https://www.cnblogs.com/tis100204/p/10328835.html