フォームバリデーションの正規表現サンプルコードの詳細解説

ホームページ

ウェブフロントエンド

jsチュートリアル

フォームバリデーションの正規表現サンプルコードの詳細解説_javascriptスキル

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:33 PM

フォーム検証の正規表現の具体的な内容は次のとおりです:

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

1. /^$/ これは一般的な形式です。

^ は入力文字列の先頭に一致し、$ は入力文字列の末尾に一致します

2. 実装する必要がある機能を入力します。

* 前の部分式と 0 回以上一致します。
前の部分式と 1 回以上一致します。
?直前の部分式と 0 回または 1 回一致します。 d は、[0-9]
に相当する数字と一致します。

次に、フォーム検証の正規表現を分析するコードを示します。具体的なコードは次のとおりです。

<!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=/^{}[-]{,}\-[]&#63;[-]{}$/;
     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))&#63;$/;
     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 までご連絡ください。

ホットAIツール

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

ホットトピック

Gmailメールのログイン入り口はどこですか？

7626

CakePHP チュートリアル

1389

Steamのアカウント名の形式は何ですか

Win11 Activation Key Permanent

NYTの接続はヒントと回答です

140

Related knowledge

フロントエンドのサーマルペーパーレシートのために文字化けしたコード印刷に遭遇した場合はどうすればよいですか？ Apr 04, 2025 pm 02:42 PM

フロントエンドのサーマルペーパーチケット印刷のためのよくある質問とソリューションフロントエンド開発におけるチケット印刷は、一般的な要件です。しかし、多くの開発者が実装しています...

誰がより多くのPythonまたはJavaScriptを支払われますか？ Apr 04, 2025 am 12:09 AM

スキルや業界のニーズに応じて、PythonおよびJavaScript開発者には絶対的な給与はありません。 1. Pythonは、データサイエンスと機械学習でさらに支払われる場合があります。 2。JavaScriptは、フロントエンドとフルスタックの開発に大きな需要があり、その給与もかなりです。 3。影響要因には、経験、地理的位置、会社の規模、特定のスキルが含まれます。

javascriptの分解：それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1）イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2）動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3）非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptを使用して、同じIDを持つArray要素を1つのオブジェクトにマージする方法は？ Apr 04, 2025 pm 05:09 PM

同じIDを持つ配列要素をJavaScriptの1つのオブジェクトにマージする方法は？データを処理するとき、私たちはしばしば同じIDを持つ必要性に遭遇します...

Console.log出力の違い結果：なぜ2つの呼び出しが異なるのですか？ Apr 04, 2025 pm 05:12 PM

Console.log出力の違いの根本原因に関する詳細な議論。この記事では、Console.log関数の出力結果の違いをコードの一部で分析し、その背後にある理由を説明します。 �...

Shiseidoの公式Webサイトのように、視差スクロールと要素のアニメーション効果を実現する方法は？または： Shiseidoの公式Webサイトのようにスクロールするページを伴うアニメーション効果をどのように実現できますか？ Apr 04, 2025 pm 05:36 PM

この記事の視差スクロールと要素のアニメーション効果の実現に関する議論では、Shiseidoの公式ウェブサイト（https://www.shisido.co.co.jp/sb/wonderland/）と同様の達成方法について説明します。

JavaScriptは学ぶのが難しいですか？ Apr 03, 2025 am 12:20 AM

JavaScriptを学ぶことは難しくありませんが、挑戦的です。 1）変数、データ型、関数などの基本概念を理解します。2）非同期プログラミングをマスターし、イベントループを通じて実装します。 3）DOM操作を使用し、非同期リクエストを処理することを約束します。 4）一般的な間違いを避け、デバッグテクニックを使用します。 5）パフォーマンスを最適化し、ベストプラクティスに従ってください。