溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章將為大家詳細講解有關利用原生JS怎么實現一個表單驗證功能，文章內容質量較高，因此小編分享給大家做個參考，希望大家閱讀完這篇文章后對相關知識有一定的了解。
以下是JavaScript的表單驗證功能，可根據JS代碼編寫出你想要的HTML和CSS的代碼。
//1.聲明變量
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");
};
//3.檢驗整個表單
function checkForm() {
var bEmail = checkEmail();
var bUsername = checkUsername();
var bPassword = checkPassword();
var bConfirm = checkCondfirm();
return bUsername && bPassword && bConfirm && bEmail;
}
//4.驗證郵箱
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 == "";
}
//5.驗證用戶名‘
function checkUsername() {
var regex = /^[a-zA-Z0-9_-]\w{0,9}$/; //字母數字下劃線1-10位，不能是數字開頭
var value = usernameObj.value; //獲取usernameObj中的文本
var msg = ""; //最后的提示小事，默認為空
//如果用戶名是null或"",!value的值為false，如果不為空 !value值為true
if(!value) {
msg = "用戶名必須填寫";
} else if (regex.test(value)) {
msg = "用戶名不合法";
}
usernameMsg.innerHTML = msg;
usernameObj.parentNode.parentNode.style.color = msg == ""?"black":"red";
return msg == ""; //如果提示消息為空則代表沒出錯，返回true
}
//6.驗證密碼
function checkPassword() {
var regex = /^.{6,16}$/; //任意字符，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 == "";
}
//7.驗證確認密碼
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>關于利用原生JS怎么實現一個表單驗證功能就分享到這里了，希望以上內容可以對大家有一定的幫助，可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
