如何使用javascript驗證表單中的全名輸入？

Question

我想編寫一個函數來驗證使用Javascript形式的全名輸入：

一個單詞就可以，名字，中間名之間也可以有一個空白字符的字符串，但是我不希望有任何數字。

有什么建議嗎？

Answer 1

有幾種寫方法，但是，簡單來說，正則表達式

/^[a-zA-Z ]+$/ 

應該為您工作。 它將找到字母字符和空格的任何組合，但沒有數字。

編輯以添加評論中的信息，我認為這很重要：

您可能還希望在方括號之間添加撇號和連字符，因為愛爾蘭和意大利的名字包括前者（O'Donnell，D'Ambrosio），並且有些人已經將姓氏連字符（Claude Levi-Strauss，Ima Page-Turner等） ）。

這將導致以下表達式：

/^[a-zA-Z'- ]+$/ 

Answer 2

我建議不要花太多精力通過JS驗證數據。 如果用戶禁用了JS，您最終將獲得一些不需要的數據庫數據。

通過服務器端對其進行驗證。

現在，關於您的問題，我將嘗試使用正則表達式。

Answer 3

嘗試使用此RegEx獲得最大的兼容性：

如果將其放在用單引號引起來的JavaScript字符串中，請不要忘記轉義單引號（'）。

^(?:((([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-.\\s])){1,}(['',\\-\\.]){0,1}){2,}(([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-. ]))*(([ ]+){0,1}(((([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-\\.\\s])){1,})([''\\-,\\.]){0,1}){2,}((([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-\\.\\s])){2,})?)*)$

例：

  function checkName(eid){ alert(/^(?:((([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-.\\s])){1,}(['',\\-\\.]){0,1}){2,}(([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-. ]))*(([ ]+){0,1}(((([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-\\.\\s])){1,})([''\\-,\\.]){0,1}){2,}((([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-\\.\\s])){2,})?)*)$/.test(document.getElementById(eid).value)? 'Congratulations! You entered a valid name.' : 'Sorry, You entered an invalid name. Please try again.');}; 

 * { color:#535353; font-family:Arial, Helvetica, Sans-Serif; } input:valid { background-color: #DEFFDF; } input:invalid { background-color: #C7D7ED; } 

 <form action="#" method="post" onsubmit="checkName('full_name');return false;"> <label for ="full_name">Your Name: </label> <input type="text" name="full_name" id="full_name" maxlength="85" pattern="^(?:((([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-.\\s])){1,}(['',\\-\\.]){0,1}){2,}(([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-. ]))*(([ ]+){0,1}(((([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-\\.\\s])){1,})([''\\-,\\.]){0,1}){2,}((([^0-9_!¡?÷?¿/\\\\+=@#$%ˆ&*(){}|~<>;:[\\]'',\\-\\.\\s])){2,})?)*)$" title="Please enter your FULL name." style='width:200px;height:auto;' required> <br><br> <button type="submit">Submit</button> &nbsp;&nbsp; <button type="reset">Reset</button> </form>