生活随笔
收集整理的這篇文章主要介紹了
JavaScript实现表单验证功能
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
以下是JavaScript的表單驗證功能，可根據JS代碼編寫出你想要的HTML和CSS的代碼。
關于正則表達式的使用，以及常用的正則表達式，筆者目前還在整理中，后期整理完成后，會將鏈接放在下面，供大家一起學習。
var emailObj
;
var usernameObj
;
var passwordObj
;
var confirmObj
;
var emailMsg
;
var usernameMsg
;
var passwordMsg
;
var confirmMsg
;
window
.onload = function() {emailObj
= document
.getElementById("email");usernameObj
= document
.getElementById("username");passwordObj
= document
.getElementById("password");confirmObj
= document
.getElementById("confirm");emailMsg
= document
.getElementById("emaileMsg");usernameMsg
= document
.getElementById("usernameMsg");confirmMsg
= document
.getElementById("confirmMsg");
};
function checkForm() {var bEmail
= checkEmail();var bUsername
= checkUsername();var bPassword
= checkPassword();var bConfirm
= checkCondfirm();return bUsername
&& bPassword
&& bConfirm
&& bEmail
;
}
function checkEmail() {var regex
= /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;var value
= emailObj
.value
;var msg
= "";if(!value
) {msg
= "郵箱必須填寫";} else if (!regex
.test(value
)) {msg
= "郵箱格式不合法";}emailMsg
.innerHTML
= msg
;emailObj
.parentNode
.parentNode
.style
.color
= msg
== ""?"black":"red";return msg
== "";
}
function checkUsername() {var regex
= /^[a-zA-Z0-9_-]\w{0,9}$/; var value
= usernameObj
.value
; var msg
= ""; if(!value
) {msg
= "用戶名必須填寫";} else if (regex
.test(value
)) {msg
= "用戶名不合法";}usernameMsg
.innerHTML
= msg
;usernameObj
.parentNode
.parentNode
.style
.color
= msg
== ""?"black":"red";return msg
== "";
}
function checkPassword() {var regex
= /^.{6,16}$/; var value
= passwordObj
.value
;var msg
= "";if(!value
) {msg
= "密碼必須填寫";} else if (!regex
.test(value
)) {msg
= "密碼不合法";}passwordMsg
.parentNode
.parentNode
.style
.color
= msg
== ""?"black":"red";return msg
== "";
}
function checkCondfirm() {var passwordValue
= passwordObj
.value
;var confirmValue
= confirmObj
.value
;var msg
= "";if(!confirmValue
) {msg
= "確認密碼填寫";} else if (passwordValue
!= confirmValue
) {msg
= "密碼必須保持一致";confirmMsg
.innerHTML
= msg
;confirmObj
.parentNode
.parentNode
.style
.color
= msg
== ""?"black":"red";return msg
== "";
}
以下代碼是簡單的測試郵箱是否匹配成功的代碼，可根據下面來實現具體的邏輯
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Document
</title>
</head>
<body><input type="text" placeholder="請輸入郵箱" id="email">
</body>
<script>email.onchange = function(){var email = this.value;var reg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;if(reg.test(email)){alert("郵箱格式正確");}else{alert("郵箱格式不正確");}}
</script>
</html>
總結
以上是生活随笔為你收集整理的JavaScript实现表单验证功能的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
