快速的Javascript表單查詢

Question

我已經編寫了一個非常簡單的javascript窗體，但是我不能讓它正常運行。正如你將在下面的代碼&小提琴看到。我需要表單來驗證所有部分，並確保只有字母數字信息被添加到名字和姓氏框中。此外，我想在沒有任何內容輸入到1或全部字段時返回錯誤。

我是新來的Javascript編碼，所以請有人可以幫助我這個查詢。我相信會有一個快速和簡單的解決方案。

在此先感謝。

https://jsfiddle.net/cal122/juwt6wvv/6/

function ValidationEvent() { 
 

 
    var name = document.getElementById("name").value; 
 
    var email = document.getElementById("name2").value; 
 
    var contact = document.getElementById("message").value; 
 

 
    if (name != '' && name2 != '' && message != '') { 
 
     if (/^([\w-\.]+ $/.test(name)) { 
 
      alert("All type of validation has done on OnSubmit event."); 
 
      return true; 
 
     } else { 
 
      alert("Please provide valid first name!"); 
 
      return false; 
 
     } 
 
    } else { 
 
     alert("Please provide valid second name!"); 
 
     return false; 
 
    } 
 
    } else { 
 
     alert("Please put some text in the message box"); 
 
     return false; 
 
    } 
 
    } else { 
 
     alert("All fields are required.....!"); 
 
     return false; 
 
    } 
 
}

.main { 
 
\t width:333px; 
 
\t padding:10px; 
 
\t margin-top:20px; 
 
\t margin-right:-28px; 
 
\t border:1px solid black; 
 
\t float:right; 
 
\t z-index:-1; 
 
} 
 
input[type=text] { 
 
\t width:100%; 
 
\t height:40px; 
 
\t padding:5px; 
 
\t margin-bottom:25px; 
 
\t margin-top:5px; 
 
\t border:2px solid #ccc; 
 
\t color:#4f4f4f; 
 
\t font-size:16px; 
 
} 
 

 
label { 
 
\t color:black; 
 
\t font-size:14px; 
 
} 
 
input[type=submit] { 
 
\t font-size:18px; 
 
\t background: #CF1559; 
 
\t cursor:pointer; 
 
\t width:40%; 
 
} 
 
input[type=submit]:hover { 
 
\t background: #fff; 
 
}

<form action="#" method="post" onsubmit="return ValidationEvent()"> 
 
<label>First Name:</label> 
 
<input id="name" name="name" placeholder="Enter your name" type="text"> 
 
<label>Last Name:</label> 
 
<input id="name2" name="name2" placeholder="Enter your last name" type="text"> 
 
<label>Message:</label> 
 
<input id="Message" name="Message" placeholder="" type="text"> 
 
<input type="submit" value="Submit"> 
 
</form>

Answer 1

的主要問題是，你沒有正確使用正則表達式。

這條線：

if (name == /^([\w-\.]+ $) { 

應該是這個樣子：

if (/^([\w-\.]+)$/.test(name)) { 

注意，正則表達式被包裹在斜槓（/ /）。我們還利用test函數來確定RegExp對象是否找到name的值。

我會建議在MDN正則表達式閱讀起來：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

此外，還有一些網上正則表達式測試工具來幫助你試試你的模式。我喜歡用正則表達式101：https://regex101.com/

次要的問題是，如果/ else邏輯是很破：

if (name != '' && name2 != '' && message != '') { 
    if (/^([\w-\.]+ $/.test(name)) { 
     alert("All type of validation has done on OnSubmit event."); 
     return true; 
    } else { 
     alert("Please provide valid first name!"); 
     return false; 
    } 
} else { 
    alert("Please provide valid second name!"); 
    return false; 
} 
} else { 
    alert("Please put some text in the message box"); 
    return false; 
} 
} else { 
    alert("All fields are required.....!"); 
    return false; 
} 

你不必匹配與你else報表的其他案件if聲明你想陷阱：

if (name != '' && name2 != '' && message != '') { 
    if (/^([\w-\.]+)$/.test(name)) { 
     alert("All type of validation has done on OnSubmit event."); 
     return true; 
    } else { 
     alert("Please provide valid first name!"); 
     return false; 
    } 
    if (/^([\w-\.]+)$/.test(name2)) { 
     return true; 
    } else { 
     alert("Please provide valid second name!"); 
     return false; 
    } 
    if (/^([\w-\.]+)$/.test(message)) { 
     return true; 
    } else { 
     alert("Please put some text in the message box"); 
     return false; 
    } 
} else { 
    alert("All fields are required.....!"); 
    return false; 
} 

這裏，沒有爲每個else的if。除此之外，如果您有不正確的正則表達式，驗證可能不起作用。我不能在這裏糾正，但你應該能夠利用上面的鏈接來解決這個問題。請記住，你應該永遠不會依賴於客戶端驗證，並應該在服務器端的數據庫或API之前，經常仔細檢查您的驗證。