Heim > Web-Frontend > js-Tutorial > Hauptteil

So verwenden Sie reguläre Ausdrücke, um Bestätigungscodes in Seitenformularen zu implementieren

php中世界最好的语言
Freigeben: 2018-03-29 17:15:16
Original
2134 Leute haben es durchsucht

Dieses Mal zeige ich Ihnen, wie Sie reguläre Ausdrücke verwenden, um den Bestätigungscode des Seitenformulars zu implementieren ist ein praktischer Fall, werfen wir einen Blick darauf. Wenn der Benutzer die Registrierungsseite ausfüllt

, müssen seine Informationen im Allgemeinen überprüft werden. Dazu ist die Verwendung von

regulären Ausdrücken erforderlich. Rendering: (Eine Fehlermeldung wird angezeigt, wenn die vom Benutzer eingegebenen Informationen nicht den Spezifikationen entsprechen)

Ich stelle nur die HTML-Struktur und js bereit. Sie können den Stil entsprechend schreiben Ich habe verschiedene Klassen für korrekte und falsche Zeiten hinzugefügt und unterschiedliche Höhen verwendet. Die richtige Höhe ist klein und der rote Text der Eingabeaufforderung kann ausgeblendet werden.

HTML-Struktur: So verwenden Sie reguläre Ausdrücke, um Bestätigungscodes in Seitenformularen zu implementieren

js:

<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>
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall gelesen haben Dieser Artikel und mehr Wie aufregend, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website!

//正则表达式已//双斜杠开始和结束,限制必须要以什么什么开头要在之前加^,限制必须要以什么什么结尾要在后面加$,例:/^正则$/
<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>
Nach dem Login kopieren
Empfohlene Lektüre:

Detaillierte grafische Erklärung der Verwendung des regulären Mehrzeilenmodus und des Einzelzeilenmodus


Anleitung Verwenden Sie reguläre Ausdrücke. Schauen Sie sich um

Das obige ist der detaillierte Inhalt vonSo verwenden Sie reguläre Ausdrücke, um Bestätigungscodes in Seitenformularen zu implementieren. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!