正規表現を使用してページフォームに検証コードを実装する方法

今回は正規表現を使ってページフォームの認証コードを実装する方法を紹介します。 正規表現を使ってページフォームの認証コードを実装する際の注意点は以下の通りです。実際のケースですので、見てみましょう。

通常、

登録ページを行うとき、ユーザーが情報を入力する際に​​は、正規表現を使用する必要があります。詳細については、以下の例を参照してください。

レンダリング: (ユーザーが入力した情報が仕様を満たしていない場合、エラーメッセージが表示されます)

HTML構造とjsのみを提供します。独自のデザイン案に従ってスタイルを記述できます。そのとき、異なるクラスを追加し、異なる高さを使用しました。高さが低く、プロンプトの赤いテキストが隠れる可能性があります。

html 構造:

<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>

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

通常の複数行モードと単一行モードの使用についての詳細な図による説明

正規表現で lookaround を使用する方法

以上が正規表現を使用してページフォームに検証コードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。