使用JavaScript進行即時表單驗證
[英]Instant form validation with JavaScript
問題描述
我希望能夠在填寫表單后仍能在文本字段中立即驗證表單。 如果缺少/錯誤，它將在文本字段的右側立即通知我。 在這里，我將HTML和JavaScript密碼驗證與警報窗口結合在一起，但是我不知道如何使這些警報顯示在文本旁邊並即時顯示。 有任何建議請。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
</head>
<body>
<form name="passForm" onsubmit="return value (this)">
Your Password: <input type="password" name="passInput">
</br>
Confirm Password: <input type="password" name="confirmPassInput">
</br>
<input type="submit" value="Submit" id="submit" onclick="return value(passForm)">
</form>
<script>
function value(passForm) {
//Validating length
if ((passForm.passInput.value).length < 8) {
alert("Your password has less than 8 characters.");
passForm.passInput.focus();
return false;
}
//check for lower case
if (!passForm.passInput.value.match(/[a-z]/)) {
alert("Password must contain at least one lower case letter.");
passForm.passInput.focus();
return false;
}
//check for upper ase
if (!passForm.passInput.value.match(/[A-Z]/)) {
alert("Password must contain at least one upper case letter.");
passForm.passInput.focus();
return false;
}
//check for number
if (!passForm.passInput.value.match(/\d+/g)) {
alert("Password must contain at least one number.");
passForm.passInput.focus();
return false;
}
//Validating confirmation input
if (passForm.confirmPassInput.value == "") {
alert("Please confirm your password.");
passForm.passInput.focus();
return false;
}
//Validationg confirmation matches
if (passForm.confirmPassInput.value != passForm.passInput.value) {
alert("Your confirmation password does not match.");
passForm.passInput.focus();
return false;
}
};
</script>
</body>
</html>
2 個解決方案
解決方案1
0 2018-12-09 21:23:56
在Bootstrap之類的前端庫中，您可以使用某些表單驗證樣式。 您可以在Bootstrap鏈接上檢查它。
你可以做類似的事情。 只需嘗試在表單元素上使用單一name屬性即可。 當某個元素的值無效時，顯示一些隱藏的元素或創建用於顯示錯誤位置的元素，您可以添加事件偵聽器以監視用戶填充輸入時的內容，此時，您可以動態檢查每個字段。 如果無效，請動態地向用戶使用帶有紅色邊框或紅色的文本消息，當用戶填寫有效字段時，只需在該字段下向其顯示綠色邊框或綠色文本消息即可。
解決方案2
0 2018-12-09 21:49:53
我可以建議2個選項。 首先嘗試使用validateator.js，否則您可以添加keyup事件偵聽器並在每次擊鍵時進行驗證。
React：如何將表單驗證從所有字段的 onSubmit 驗證更改為表單中每個字段的 onBlur 即時驗證？
[英]React: How to change form validation from onSubmit validation for all fields, to onBlur instant validation for each field in the form?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.