JavaScript はフォームを検証するために正規表現をどのように使用しますか? (コード例)

この記事では、正規表現を使用してフォームを検証する JavaScript の方法 (コード例) を紹介します。困っている友人は参考にしていただければ幸いです。

前回の記事では[jsのフォームで簡単なパスワード検証を行うには？ ]この記事では、サンプルを使用してフォームを検証するより包括的な方法を紹介します。この方法では、チェックしたいものはすべてチェックされますが、各要件を個別にテストし、さまざまなエラー メッセージを表示するために多くのコードが使用されます。

少ないコードで効果を実現するにはどうすればよいでしょうか?そんな疑問を持つ人も多いと思います。実際、この問題は正規表現を使用することで簡単に解決できます。

フォームの JavaScript 正規表現検証からフォームのパスワード検証までの方法を見てみましょう。

HTML コード:

<form method="POST" action="" onsubmit="return checkForm(this);">

<p>密  码: <input type="password" name="pwd1"><span> </p>
<p>确认密码: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>

js の checkForm() 関数はパスワードを検証し、正規表現を呼び出します:

  function checkForm(form)
  {
    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(!checkPassword(form.pwd1.value)) {
        alert("您输入的密码无效！");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("错误：请检查您输入并确认您的密码！");
      form.pwd1.focus();
      return false;
    }
    return true;
  }

js 正規表現:

function checkPassword(str)
  {
    var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
    return re.test(str);
  }

効果、パスワードを入力 (123456):

ここで使用される式のタイプは「look」と呼ばれます。 -ahead" は、含まれている正規表現を文字列の「future」部分と照合しようとします。

Translate (上記の正規表現によって実装される関数):

1. 少なくとも 1 つの数字 ( \ を含む) の文字列と一致します。 d は [0-9]);

3 の省略形です。少なくとも 1 つの小文字

4。少なくとも 1 つの大文字

をテストします。

パスワードを文字と数字のみ (スペースやその他の文字は禁止) に制限する場合は、少し変更するだけで済みます。ワイルドカード \w を使用すると、次のように完成させることができます。

改善された正規表現:

function checkPassword(str)
  {   
    var re = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])\w{6,}$/;
    return re.test(str);
  }

\W は、「任意の文字、数字、またはアンダースコア」の省略形です。

句読点やその他の記号は追加のセキュリティを提供するため、使用する文字を制限することは実際には良い習慣ではありません。

正規表現検証フォームの例:

html コード:

<form method="POST" action="" onsubmit="return checkForm(this);">
<p>  用 户 名: <input type="text" name="username"><span>  （输入必须只包含字母、数字和下划线）</span></p>
<p>  密     码: <input type="password" name="pwd1"><span>  （输入必须包含至少一个数字/小写/大写字母，并且长度至少为六个字符）</span></p>
<p>确认密码: <input type="password" name="pwd2"></p>
<p><input type="submit"></p>
</form>

js コード:

  function checkPassword(str)
  {
    var re = /(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}/;
    return re.test(str);
  }
  function checkForm(form)
  {
    if(form.username.value == "") {
      alert("Error: Username cannot be blank!");
      form.username.focus();
      return false;
    }
    re = /^\w+$/;
    if(!re.test(form.username.value)) {
      alert("错误：用户名必须只包含字母、数字和下划线！");
      form.username.focus();
      return false;
    }
    if(form.pwd1.value != "" && form.pwd1.value == form.pwd2.value) {
      if(!checkPassword(form.pwd1.value)) {
        alert("您输入的密码无效！");
        form.pwd1.focus();
        return false;
      }
    } else {
      alert("错误：请检查您输入并确认您的密码！");
      form.pwd1.focus();
      return false;
    }
    return true;
  }

これで完了です。

レンダリング:

概要:

ご覧のとおり、正規表現は学ぶ価値があります。これらは JavaScript だけでなく、PHP、Perl、Java、その他多くの言語でも使用できます。一部のテキスト エディタ (vi に限らず) では、テキストの検索または置換時にこれらの機能を使用できます。

以上がJavaScript はフォームを検証するために正規表現をどのように使用しますか? (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。