ホームページ > 記事 > ウェブフロントエンド > 正規表現を使用してページフォームに検証コードを実装する方法
今回は正規表現を使ってページフォームの認証コードを実装する方法を紹介します。 正規表現を使ってページフォームの認証コードを実装する際の注意点は以下の通りです。実際のケースですので、見てみましょう。
通常、登録ページを行うとき、ユーザーが情報を入力する際には、正規表現を使用する必要があります。詳細については、以下の例を参照してください。
レンダリング: (ユーザーが入力した情報が仕様を満たしていない場合、エラーメッセージが表示されます) 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('user')[0], document.getElementsByName('pwd')[0], document.getElementsByName('tel')[0], document.getElementsByName('mail')[0], document.getElementsByName('IDCard')[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 = 'right'; //判断正确的时候加的class }else{ this.parentNode.className = 'wrong'; //判断错误的时候加的class this.focus(); }; }; }; }; var oTip = document.getElementById('tip'); var opwd = document.getElementsByName('pwd2')[0]; opwd.onfous = function(){ if(!arr[1].value){ arr[1].focus(); oTip.className = 'show'; setTimeout(function () { oTip.className = ''; },1000); }; }; opwd.onblur = function(){ if(this.value){ if(this.value != arr[1].value){ this.focus(); this.parentNode.className ='wrong'; }else{ this.parentNode.className ='right'; }; }; }; </script>この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。 推奨読書:
通常の複数行モードと単一行モードの使用についての詳細な図による説明
以上が正規表現を使用してページフォームに検証コードを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。