JavaScriptオブジェクト指向アプローチを使用してフォームを検証する

Question

JS OOPを使用してフォームの検証を試みました。私はFirefoxとchromeでコードをテストしました。両方のブラウザがちょうど凍っていました。入力が規定の正規表現と一致しているかどうかにかかわらず、提出しなかった。だから、どこが間違っているかは誰が知っていますか？ Pls：jQueryのバリデーターが存在することを知っています。また、状況に応じてJSを使用することもできます。ここでは、JS OOPをDOMに接続することに興味があります。私が今までに読んだブログや教科書は、jS OOPとDOMスクリプティングをどのように結びつけるのかを実際には見せていませんでした。だから、私は道を探して、瓦礫を掃除しています。それをここで共有してください。

<form method = 'post' action ='somewhere.com' onsubmit = 'return formApp.validateInputs.apply(formApp);'> 
<p> 
Name: <input type = 'text' name = 'userName' id = 'userName'> 
</p> 
<p> 
Phone: <input type = 'text' name = 'userPhone' id = 'userPhone'> 
</p> 
<input type = 'submit' id = 'sub' value = 'Submit Data'> 
</form> 

var formApp = { 
    userNameReg: /[a-z0-9 ' _ ]+/gi, 
    onlySpaceReg: /\s+/, 
    phoneReg: /\d{3}/, 
    userName: document.getElementById('userName').value, 
    userPhone: document.getElementById('userPhone').value, 
    error: [], 
    reportError: function() { 
     for (var i = 0; i < this.error.length; i++) { 
      alert(this.error[i] + '\n') 
     } 
    }, 
    validateInputs: function() { 
     if (!this.userNameReg.test(this.userName) || this.onlySpaceReg.test(this.userName)) { 
      this.error.push['Name contains illegal character']; 
      return false 
     } // end name validation 

     if (!this.phoneReg.test(this.userPhone)) { 
      this.error.push['Only a three-digit number']; 
      return false; 
     } // end phone validation 

     if (this.error.length > 0) { 
      this.reportError(); 
      return false; 
     } 

     return true; 
    } // end validateInputs 
}; // end formApp obj 

Answer 1

あなたがエラーを追加し、すべての場合はブロック内の関数から戻るので問題の一つは、あなたが警告を得ることはありませんということです。したがって、 "this.reportError（）;"決して実行することはできません。 ifsから "return false"ステートメントを削除します。

validateInputs: function() { 
    if (!this.userNameReg.test(this.userName) || this.onlySpaceReg.test(this.userName)) { 
    this.error.push['Name contains illegal character']; 
    }// end name validation 
    if (!this.phoneReg.test(this.userPhone)) { 
    this.error.push['Only a three-digit number']; 
    }// end phone validation 
    if (this.error.length > 0) { 
    this.reportError(); 
    return false; 
    } 
    return true; 
}