フォーム検証に JavaScript を使用する方法

1. データの有効性とセキュリティの検証。 3層の検証。

• 1. クライアント js スクリプトの検証

• 2. サーバー側の Java サーブレット サーバー言語の検証

• 2. onsubmit フォーム送信イベント。フォーム要素の対応するイベントは、送信ボタンをクリックするとトリガーされます。 (type="submit")

onsubmit は true または false の戻り値を受け取ります。

• は現在のフォームを送信するためにtrueを返します。

• はfalseを返してフォームを送信しません

• 3. Stringオブジェクト。

文字列オブジェクトのメソッド: String object.Method name();

• 共通メソッド:
toLowerCase() 文字列を小文字に変換します
toUpperCase() 文字列を大文字に変換します
• charAt(index) を返します指定された位置の文字

  indexOf(string,index) 指定された文字列の最初の出現を検索します
  substring(zindex1.index2) 指定されたインデックスindex1とindex2の間の文字列を返します（インデックスを含みます）index1に対応する文字（インデックス1に対応する文字を除く） Index2
  
  
  
  

  メール形式の検証:

• 1. getElementById() を使用して Email の値を取得します。
文字列メソッド IndexOf() を使用して、Email の値に「@」と「.」が含まれているかどうかを確認します。シンボル。
関数の戻り値が true か false かに基づいてフォームを送信するかどうかを決定します

• var mail=document.getElementById("email").value;
  if(mail.indexOf("@")==-1){
    alert("Email格式不正确\n必须包含@");
     return false;   
  }

  ログイン後にコピー

  
  
  2. String オブジェクトの length 属性を使用して、パスワードの長さを確認します

  var pwd=document.getElementById("pwd").value;
  if(pwd.length<6){
        alert("密码必须等于或大于6个字符");
        return false; 
  }

  ログイン後にコピー

• 3. 2 回入力したパスワードは一貫しています

  var repwd=document.getElementById("repwd").value;
  if(pwd!=repwd){
       alert("两次输入的密码不一致");
       return false;   
  }

  ログイン後にコピー

• 4. length 属性を使用してテキストの長さを取得し、for ループと substring() メソッドを使用して個々の文字を順番に切り捨て、各文字が数字であるかどうかを判断します

  var user=document.getElementById("user").value;
      for(var i=0;i<user.length;i++){
      var j=user.substring(i,i+1)
      if(isNaN(j)==false){
         alert("姓名中不能包含数字");
         return false;   
      }
  }

  ログイン後にコピー

• 5. テキストボックスオブジェクトのプロパティ、メソッド、イベント

イベント:

onfocus はフォーカスを取得し、カーソルがテキスト ボックスに入るとトリガーされます
• onkeypress キーボードのキーが押されて放されます

  
  
  
  メソッド:

  blur() テキストフィールドからフォーカスを削除します
focus() テキストフィールドにフォーカスを設定します、つまりマウスカーソルを取得します
• select()テキスト フィールド

  
  
  
  の内容:

1. テキスト ボックスの最初の内容をクリアし、境界線を赤に設定します:

• function clearText(){
      var mail=document.getElementById("email");
      if(mail.value=="请输入正确的电子邮箱"){
      mail.value="";
      mail.style.borderColor="#ff0000";
      }
  }
  ……
      <td>Email：<input id="email" type="text"  class="inputs" value="请输入正确的电子邮箱" onfocus="clearText()"/></td>
    </tr>

  ログイン後にコピー

  2. ユーザーが無効な電子メール アドレスを入力すると、[電子メール] テキスト ボックスの内容が表示されます。が自動的に選択され、強調表示され、ユーザーに再入力を求めます

  if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
      alert("Email格式不正确\n必须包含符号@和.");
      document.getElementById("email").select();
      return false;
  }

  ログイン後にコピー

  3. メールを空にすることはできないというプロンプト

  function checkEmail(){
      var mail= document.getElementById ("email");
      var pID= document.getElementById ("pEmail");
      pID.innerHTML="";
      if(mail.value==""){
           pID.innerHTML="Email不能为空";
           return false;
      }
  }
  ……
  <input id="email" type="text" class="inputs"  onblur="checkEmail()"/>
  <p class="red" id="pEmail"></p>

  ログイン後にコピー
  id テキストフィールドの ID を設定または返します

• value 設定または返すテキストフィールドの value 属性の値

以上がフォーム検証に JavaScript を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。