這篇文章將為大家詳細(xì)講解有關(guān)利用原生JS怎么實(shí)現(xiàn)一個(gè)表單驗(yàn)證功能，文章內(nèi)容質(zhì)量較高，因此小編分享給大家做個(gè)參考，希望大家閱讀完這篇文章后對(duì)相關(guān)知識(shí)有一定的了解。

保山ssl適用于網(wǎng)站、小程序/APP、API接口等需要進(jìn)行數(shù)據(jù)傳輸應(yīng)用場(chǎng)景，ssl證書(shū)未來(lái)市場(chǎng)廣闊！成為創(chuàng)新互聯(lián)建站的ssl證書(shū)銷售渠道，可以享受市場(chǎng)價(jià)格4-6折優(yōu)惠！如果有意向歡迎電話聯(lián)系或者加微信：028-86922220（備注：SSL證書(shū)合作）期待與您的合作！

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

//1.聲明變量
var emailObj;
var usernameObj;
var passwordObj;
var confirmObj;
var emailMsg;
var usernameMsg;
var passwordMsg;
var confirmMsg;
//頁(yè)面加載之后，獲取頁(yè)面中的對(duì)象
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.檢驗(yàn)整個(gè)表單
function checkForm() {
  var bEmail = checkEmail();
  var bUsername = checkUsername();
  var bPassword = checkPassword();
  var bConfirm = checkCondfirm();
  return bUsername && bPassword && bConfirm && bEmail;
}
//4.驗(yàn)證郵箱
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.驗(yàn)證用戶名‘
function checkUsername() {
  var regex = /^[a-zA-Z0-9_-]\w{0,9}$/;  //字母數(shù)字下劃線1-10位，不能是數(shù)字開(kāi)頭
  var value = usernameObj.value;     //獲取usernameObj中的文本
  var msg = "";              //最后的提示小事，默認(rèn)為空
  //如果用戶名是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 == "";            //如果提示消息為空則代表沒(méi)出錯(cuò)，返回true
}
//6.驗(yàn)證密碼
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.驗(yàn)證確認(rèn)密碼
function checkCondfirm() {
  var passwordValue = passwordObj.value;
  var confirmValue = confirmObj.value;
  var msg = "";
  if(!confirmValue) {
    msg = "確認(rèn)密碼填寫";
  } else if (passwordValue != confirmValue) {
    msg = "密碼必須保持一致";
  confirmMsg.innerHTML = msg;
  confirmObj.parentNode.parentNode.style.color = msg == ""?"black":"red";
  return msg == "";
}

文章標(biāo)題：利用原生JS怎么實(shí)現(xiàn)一個(gè)表單驗(yàn)證功能-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://sd-ha.com/article28/ddodcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、App設(shè)計(jì)、虛擬主機(jī)、網(wǎng)站制作、定制網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)