正規表現フォーム検証サンプルの詳細説明 code_html/css

ホームページ

ウェブフロントエンド

htmlチュートリアル

正規表現フォーム検証サンプルの詳細説明 code_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:24 AM

正規表現形式検証サンプルコードの詳細説明

この記事では、正規表現形式検証サンプルコードの詳細説明に関する関連情報を主に紹介しますので、参考にしてください。正規表現形式の検証の具体的な内容は次のとおりです。

まず、いくつかの記号の意味を説明します。

* は前の部分式と 0 回以上一致します。
^ はその開始位置と一致します。入力文字列; $ 入力文字列
1 の終了位置と一致します。 /^$/ これは一般的な形式です。
2. 実装する必要がある機能を入力します。
d は、[0-9]
に相当する数字と一致します。 + 前の部分式と 1 回以上一致しますか?前の部分式を 0 回または 1 回照合します。

以下は、フォーム検証の正規表現を分析するためのコードです。具体的なコードは次のとおりです。

<!DOCTYPE html> <html lang="en">  <head>   <meta charset="UTF-">   <title>正则验证常用表单方法</title>   <script type="text/javascript">    function focus_username() {     var resultObj=document.getElementById('result_username');     resultObj.innerHTML="以字母开头的-位的字符";     resultObj.style.color="blue";     document.form.username.style="border:px solid red";    }    // function blur_username () {    //第一种方法：   //  var resultObj=document.getElementById('result_username')     // if (document.form.username.value=='') {  //    resultObj.innerHTML="用户名不能为空";  //    resultObj.style.color="red";  //    return false;    //  }else if (document.form.username.value.length<||document.form.username.value.length>) {    //    resultObj.innerHTML="用户名字符长度必须介于到个之间";    //    resultObj.style.color="red";    //    return false;    //   }else{    //    resultObj.innerHTML="ok";    //    resultObj.style.color="green";    //   }    // }    function blur_username () {      //第二种方法：     var resultObj=document.getElementById('result_username')      var pre=document.form.username.value;     var reg=/^[a-zA-Z]\w{,}$/;     if (pre=='') {       resultObj.innerHTML="(必填项)用户名不能为空";       resultObj.style.color="red";       return false;     }else if (!reg.test(pre)) {       resultObj.innerHTML="用户名字符输入不合法";       resultObj.style.color="red";       return false;     }else{       resultObj.innerHTML="ok";       resultObj.style.color="green";       return true;     }    }   function focus_userpwd() {    var resultObj=document.getElementById('result_userpwd');    resultObj.innerHTML="(必填项)介于-位的非特殊字符";    resultObj.style.color="blue";    document.form.userpwd.style="border:px solid red";   }    // function blur_userpwd () {   //  var resultObj=document.getElementById('result_userpwd')     // if (document.form.userpwd.value=='') {  //    resultObj.innerHTML="用户名密码不能为空";  //    resultObj.style.color="red";  //    return false;    //  }else if (document.form.userpwd.value.length<||document.form.userpwd.value.length>) {    //    resultObj.innerHTML="用户名密码字符长度必须介于到个之间";    //    resultObj.style.color="red";    //    return false;    //   }else{    //    resultObj.innerHTML="ok";    //    resultObj.style.color="green";    //    return true;    //   }    // }    function blur_userpwd () {        var resultObj=document.getElementById('result_userpwd')      var pre=document.form.userpwd.value;     var reg=/^\w{,}$/;    if (pre=='') {      resultObj.innerHTML="(必填项)用户名密码不能为空";      resultObj.style.color="red";      return false;     }else if (!reg.test(pre)) {       resultObj.innerHTML="用户名密码字符输入不合法";       resultObj.style.color="red";       return false;      }else{       resultObj.innerHTML="ok";       resultObj.style.color="green";       return true;      }    }    function focus_userpwd() {    var resultObj=document.getElementById('result_userpwd');    resultObj.innerHTML="(必填项)介于-位的非特殊字符";    resultObj.style.color="blue";    document.form.userpwd.style="border:px solid red";   }    // function blur_userpwd () {   //  var resultObj=document.getElementById('result_userpwd')     // if (document.form.userpwd.value=='') {  //    resultObj.innerHTML="用户名密码不能为空";  //    resultObj.style.color="red";  //    return false;    //  }else if (document.form.userpwd.value!=document.form.userpwd.value) {    //    resultObj.innerHTML="两次用户名密码输入不一致";    //    resultObj.style.color="red";    //    return false;    //   }else{    //    resultObj.innerHTML="ok";    //    resultObj.style.color="green";    //    return true;    //   }    // }     function blur_userpwd () {     var resultObj=document.getElementById('result_userpwd')       var pre=document.form.userpwd.value;      var reg=/^\w{,}$/;     if (pre=='') {       resultObj.innerHTML="(必填项)用户名密码不能为空";       resultObj.style.color="red";       return false;      }else if (!reg.test(pre)) {        resultObj.innerHTML="用户名密码字符输入不合法";        resultObj.style.color="red";        return false;       }else if(document.form.userpwd.value!=document.form.userpwd.value){        resultObj.innerHTML="两次用户名密码输入不一致";        resultObj.style.color="red";        return false;       }else {resultObj.innerHTML="ok";        resultObj.style.color="green";        return true;       }            }    function focus_Mobile() {     var resultObj=document.getElementById('result_Mobile');     resultObj.innerHTML="请输入你位数的手机号码";     resultObj.style.color="blue";     document.form.Mobile.style="border:px solid red";    }     function blur_Mobile() {         var resultObj=document.getElementById('result_Mobile')      var pre=document.form.Mobile.value;     var reg=/^[||][-]{}$/;     if (pre=='') {       resultObj.innerHTML="手机号码不能为空";       resultObj.style.color="red";           }else if (!reg.test(pre)) {       resultObj.innerHTML="手机号码字符输入不合法";       resultObj.style.color="red";           }else {      resultObj.innerHTML="ok";      resultObj.style.color="green";           }            }    function focus_Tel() {     var resultObj=document.getElementById('result_Tel');     resultObj.innerHTML="请输入你的座机号码";     resultObj.style.color="blue";     document.form.Tel.style="border:px solid red";    }     function blur_Tel() {         var resultObj=document.getElementById('result_Tel')      var pre=document.form.Tel.value;     var reg=/^{}[-]{,}\-[]?[-]{}$/;     if (pre=='') {       resultObj.innerHTML="座机号码不能为空";       resultObj.style.color="red";     }else if (!reg.test(pre)) {       resultObj.innerHTML="座机号码字符输入不合法";       resultObj.style.color="red";     }else {      resultObj.innerHTML="ok";      resultObj.style.color="green";           }            }    function focus_mail() {     var resultObj=document.getElementById('result_mail');     resultObj.innerHTML="请输入你的邮箱号码";     resultObj.style.color="blue";     document.form.mail.style="border:px solid red";    }     function blur_mail() {         var resultObj=document.getElementById('result_mail');     var pre=document.form.mail.value;     var reg=/^[a-zA-Z-][a-zA-Z-\._]+@[a-z-]+\.(com)(\.(cn))?$/;     if (pre=='') {       resultObj.innerHTML="邮箱号码不能为空";       resultObj.style.color="red";     }else if (!reg.test(pre)) {       resultObj.innerHTML="邮箱号码字符输入不合法";       resultObj.style.color="red";     }else {      resultObj.innerHTML="ok";      resultObj.style.color="green";     }            }    function focus_ID() {     var resultObj=document.getElementById('result_ID');     resultObj.innerHTML="(必填项)请输入你位的二代身份证号码";     resultObj.style.color="blue";     document.form.ID.style="border:px solid red";    }     function blur_ID() {         var resultObj=document.getElementById('result_ID');     var pre=document.form.ID.value;     var reg=/^[-]{}[-x]$/;     if (pre=='') {       resultObj.innerHTML="(必填项)二代身份证号码字符不能为空";       resultObj.style.color="red";       return false;     }else if (!reg.test(pre)) {       resultObj.innerHTML="二代身份证号码字符输入不合法";       resultObj.style.color="red";       return false;     }else {      resultObj.innerHTML="ok";      resultObj.style.color="green";      return true;     }            }    function checkForm(){     var flag_username=blur_username();     var flag_userpwd=blur_userpwd();     var flag_userpwd=blur_userpwd();     var flag_ID=blur_ID();           if (flag_username==true&&flag_userpwd==true&&flag_userpwd==true&&flag_ID==true) {           return true;     }else{      return false;     }        }   </script>   <style type="text/css">   body{background-image: url(images/.jpg);background-size: cover;}   table{margin-left: px;margin-top: px;background-image: url(images/.jpg);background-size: cover;box-shadow: px px px #C}   .vip{font-size: px;}   </style>  </head>  <body>  <form name="form" action=".php" method="post" onsubmit="return checkForm()">   <table width="px" border="px" bordercolor="red" cellpadding="px" cellspacing="px" align="center" >    <tr>     <th colspan="" class="vip">VIP会员注册</th>    </tr>    <tr>     <td width="px" align="right" >用户名：</td>     <td width="px"><input type="text" name="username" onfocus="focus_username()" onblur="blur_username()" ></td>     <td><div width="px" id="result_username"></div></td>    </tr>    <tr>     <td align="right">密码：</td>     <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()" /></td>     <td><div id="result_userpwd"></div></td>    </tr>    <tr>     <td align="right">确认密码：</td>     <td><input type="password" name="userpwd" onfocus="focus_userpwd()" onblur="blur_userpwd()"/></td>     <td><div id="result_userpwd"></div></td>    </tr>    <tr>     <td align="right">手机号码：</td>     <td><input type="text" name="Mobile" onfocus="focus_Mobile()" onblur="blur_Mobile()"/></td>     <td><div id="result_Mobile"></div></td>    </tr>    <tr>     <td align="right">座机号码：</td>     <td><input type="text" name="Tel" onfocus="focus_Tel()" onblur="blur_Tel()"/></td>     <td><div id="result_Tel"></div></td>    </tr>    <tr>     <td align="right">邮箱号码：</td>     <td><input type="text" name="mail" onfocus="focus_mail()" onblur="blur_mail()"/></td>     <td><div id="result_mail"></div></td>    </tr>    <tr>     <td align="right">二代身份证：</td>     <td><input type="text" name="ID" onfocus="focus_ID()" onblur="blur_ID()"/></td>     <td><div id="result_ID"></div></td>    </tr>    <tr>     <td align="center" colspan=""><input type="submit" value="提交注册" />     <input type="reset" value="重置资料" /></td>     <td></td>    </tr>   </table>  </form>    </body> </html>

上記の内容は、フォーム検証の正規表現のサンプルコードです。参考になる皆様のお役に立てれば幸いです。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

See all articles