検索
ホームページウェブフロントエンドjsチュートリアルフォームバリデーションの正規表現サンプルコードの詳細解説_javascriptスキル

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
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 までご連絡ください。
関連記事
JavaScript in Action：実際の例とプロジェクトJavaScript in Action：実際の例とプロジェクトApr 19, 2025 am 12:13 AM

現実世界でのJavaScriptのアプリケーションには、フロントエンドとバックエンドの開発が含まれます。 1）DOM操作とイベント処理を含むTODOリストアプリケーションを構築して、フロントエンドアプリケーションを表示します。 2）node.jsを介してRestfulapiを構築し、バックエンドアプリケーションをデモンストレーションします。

JavaScriptとWeb：コア機能とユースケースJavaScriptとWeb：コア機能とユースケースApr 18, 2025 am 12:19 AM

Web開発におけるJavaScriptの主な用途には、クライアントの相互作用、フォーム検証、非同期通信が含まれます。 1）DOM操作による動的なコンテンツの更新とユーザーインタラクション。 2）ユーザーエクスペリエンスを改善するためにデータを提出する前に、クライアントの検証が実行されます。 3）サーバーとのリフレッシュレス通信は、AJAXテクノロジーを通じて達成されます。

JavaScriptエンジンの理解：実装の詳細JavaScriptエンジンの理解：実装の詳細Apr 17, 2025 am 12:05 AM

JavaScriptエンジンが内部的にどのように機能するかを理解することは、開発者にとってより効率的なコードの作成とパフォーマンスのボトルネックと最適化戦略の理解に役立つためです。 1）エンジンのワークフローには、3つの段階が含まれます。解析、コンパイル、実行。 2）実行プロセス中、エンジンはインラインキャッシュや非表示クラスなどの動的最適化を実行します。 3）ベストプラクティスには、グローバル変数の避け、ループの最適化、constとletsの使用、閉鎖の過度の使用の回避が含まれます。

Python vs. JavaScript：学習曲線と使いやすさPython vs. JavaScript：学習曲線と使いやすさApr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

Python vs. JavaScript：コミュニティ、ライブラリ、リソースPython vs. JavaScript：コミュニティ、ライブラリ、リソースApr 15, 2025 am 12:16 AM

PythonとJavaScriptには、コミュニティ、ライブラリ、リソースの観点から、独自の利点と短所があります。 1）Pythonコミュニティはフレンドリーで初心者に適していますが、フロントエンドの開発リソースはJavaScriptほど豊富ではありません。 2）Pythonはデータサイエンスおよび機械学習ライブラリで強力ですが、JavaScriptはフロントエンド開発ライブラリとフレームワークで優れています。 3）どちらも豊富な学習リソースを持っていますが、Pythonは公式文書から始めるのに適していますが、JavaScriptはMDNWebDocsにより優れています。選択は、プロジェクトのニーズと個人的な関心に基づいている必要があります。

C/CからJavaScriptへ：すべてがどのように機能するかC/CからJavaScriptへ：すべてがどのように機能するかApr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1）C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2）C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3）JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptエンジン：実装の比較JavaScriptエンジン：実装の比較Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析：ソースコードを語彙ユニットに変換します。 2。文法分析：抽象的な構文ツリーを生成します。 3。最適化とコンパイル：JITコンパイラを介してマシンコードを生成します。 4。実行：マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

ブラウザを超えて：現実世界のJavaScriptブラウザを超えて：現実世界のJavaScriptApr 12, 2025 am 12:06 AM

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

もっと見る

人気の記事

アサシンのクリードシャドウズ：シーシェルリドルソリューション
3週間前ByDDD
Windows11 KB5054979の新しいものと更新の問題を修正する方法
2週間前ByDDD
Atomfallのクレーンコントロールキーカードを見つける場所
3週間前ByDDD
R.E.P.O.で節約説明した（そしてファイルを保存）
1 か月前By尊渡假赌尊渡假赌尊渡假赌
アサシンクリードシャドウ - 鍛冶屋を見つけて武器と鎧のカスタマイズを解除する方法
4週間前ByDDD
もっと見る

ホットツール

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール

WebStorm Mac版

WebStorm Mac版

便利なJavaScript開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

SublimeText3 Linux 新バージョン

SublimeText3 Linux 新バージョン

SublimeText3 Linux 最新バージョン

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。

もっと見る

ホットトピック

Gmailメールのログイン入り口はどこですか？
7569
15
CakePHP チュートリアル
1386
52
Steamのアカウント名の形式は何ですか
87
11
Win11 Activation Key Permanent
61
19
NYTの接続はヒントと回答です
28
107
もっと見る