JavaScript實現(xiàn)表單驗證功能

更新時間：2020年12月09日 08:40:15 作者：王菜鳥

這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)表單驗證功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JavaScript實現(xiàn)表單驗證功能的具體代碼，供大家參考，具體內(nèi)容如下

以下是JavaScript的表單驗證功能，可根據(jù)JS代碼編寫出你想要的HTML和CSS的代碼。

關(guān)于正則表達式的使用，以及常用的正則表達式，筆者目前還在整理中，后期整理完成后，會將鏈接放在下面，供大家一起學習。

//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}$/;  //字母數(shù)字下劃線1-10位，不能是數(shù)字開頭
  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 == "";
}

以下代碼是簡單的測試郵箱是否匹配成功的代碼，可根據(jù)下面來實現(xiàn)具體的邏輯

<!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>

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: