How to use regular expressions to implement verification codes on page forms

This time I will show you how to use regular expressions to implement the verification code of the page form, and what are the precautions for using regular expressions to implement the verification code of the page form. The following is a practical case, let's take a look.

Generally when doing registration page, when users fill in the information, their information needs to be verified, which requires the use of regular expressions, See the example below specifically.

Rendering: (An error message is displayed when the information filled in by the user does not meet the specifications)

I only provide the html structure and js. You can write the style according to your own design draft. I am Different classes are added for correct and incorrect times, and different heights are used. The correct height is small, and the red text of the prompt can be hidden.

html structure:

<p>
  </p><h1>注册</h1>
  <p>
    <input>
    <span>字母开头,长度5-10位字母数字下划线</span>
  </p>
  <p>
    <input>
    <span>字母数字长度6-18位</span>
  </p>
  <p>
    <input>
    <span>两次密码不一致</span>
  </p>
  <p>
    <input>
    <span>电话号码格式不正确</span>
  </p>
  <p>
    <input>
    <span>邮箱格式不正确</span>
  </p>
  <p>
    <input>
    <span>证件格式不正确</span>
  </p>
  <p>
    <input>
  </p>
  <p>请先输入密码</p>

js:

//正则表达式已//双斜杠开始和结束，限制必须要以什么什么开头要在之前加^，限制必须要以什么什么结尾要在后面加$，例：/^正则$/
<script>
  var reg = {
    user:/^[a-zA-Z]\w{4,9}$/,
    //用来判断用户名，第一位不能为数字，也就是小写字母或者大写字母，后面的内容\w表示字符（数字字母下划线）
    //要求是5-10位字符，所以出去第一位，还需要4-9位的\w
    pwd:/^[\da-zA-Z]{6,18}$/,
    //用来判断密码，html结构中要求是数字字符6到18位，\d表示数字
    tel:/^1[34578]\d{9}$/,
    //用来判断电话号码，通常手机号第一位为1，第二位只可能出现3.4.5.7.8，后面剩下的9位数字随机
    mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/,
    //用来判断邮箱，通常邮箱没有以0开头的，所以第一位为1-9数字或者小写字母或者大写字母，第二位开始任意字符
    //也可以只有第一位没有第二位，*表示至少0个，@后面同理，小写字母或者大写字母或者数字，.需要转意符，所以写成\.
    //点后面通常是com或者cn或者com.cn，所以是小写字母或者大写字母至少两位
    IDCard:/^[1-9]\d{16}[\dxX]$/,
    //用来判断身份证，通常第一位不为零，所以取1-9的数字，中间的16位数字随机，最后一位要么是数字要么是X
  };
  var arr = [
    document.getElementsByName(&#39;user&#39;)[0],
    document.getElementsByName(&#39;pwd&#39;)[0],
    document.getElementsByName(&#39;tel&#39;)[0],
    document.getElementsByName(&#39;mail&#39;)[0],
    document.getElementsByName(&#39;IDCard&#39;)[0]
  ];
  for(var i=0;i<arr.length;i++){
    arr[i].onblur = function(){
      if(this.value){
        if(reg[this.name].test(this.value)){
          this.parentNode.className = &#39;right&#39;;  //判断正确的时候加的class
        }else{
          this.parentNode.className = &#39;wrong&#39;;  //判断错误的时候加的class
          this.focus();
        };
      };
    }; 
  };
  var oTip = document.getElementById(&#39;tip&#39;);
  var opwd = document.getElementsByName(&#39;pwd2&#39;)[0];
  opwd.onfous = function(){
    if(!arr[1].value){
      arr[1].focus();
      oTip.className = &#39;show&#39;;
      setTimeout(function () {
        oTip.className = &#39;&#39;;
      },1000);
    };
  };
  opwd.onblur = function(){
    if(this.value){
      if(this.value != arr[1].value){
        this.focus();
        this.parentNode.className =&#39;wrong&#39;;
      }else{
       this.parentNode.className =&#39;right&#39;;
      };
    };
  };
</script>

I believe you have mastered the method after reading the case in this article. Please pay attention for more exciting things. Other related articles on php Chinese website!

Recommended reading:

Detailed graphic explanation of using regular multi-line mode and single-line mode

How to use it in regular expressions Look around

The above is the detailed content of How to use regular expressions to implement verification codes on page forms. For more information, please follow other related articles on the PHP Chinese website!