js怎么實(shí)現(xiàn)表單校驗(yàn)功能

這篇文章主要講解了“js怎么實(shí)現(xiàn)表單校驗(yàn)功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“js怎么實(shí)現(xiàn)表單校驗(yàn)功能”吧！

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

1、所用到的三個(gè)事件：

onfocus（焦點(diǎn)聚焦事件）、onblur（焦點(diǎn)離開事件）、onkeyup（按鍵抬起的事件）

2、利用事件觸發(fā)函數(shù)，函數(shù)中執(zhí)行校驗(yàn)的信息。

3、利用checkform判斷表單中的內(nèi)容是否規(guī)范，如果規(guī)范submit按鈕可以提交表單信息。

簡(jiǎn)單效果：

form中的代碼：

<form action="demo.html" onsubmit="return checkForm()">
      <div>
      <div class="text">
           <p>用戶名</p>
           <input id="value" onfocus="shoeTips('hint','用戶名長(zhǎng)度不能小于六')" onblur="hint_hide()" onkeyup="hint()" type="text" Name="Userame" placeholder="用戶名" />
           <span id="hint"></span>
          </div>
         <div class="text">
           <p>密碼</p>
           <input id="pass_value" onfocus="shoeTips('pass_hint','密碼長(zhǎng)度不能小于六')" onblur="pass_hide()" onkeyup="checkPass()" type="password" name="password" placeholder="密碼" />
            <span id="pass_hint"></span>
            </div>
            <div class="text">
              <p>確認(rèn)密碼</p>
              <input id="passpass_value" onfocus="shoeTips('passpass_hint','兩次密碼要一致')" onblur="passpass_hide()" onkeyup="checkPassPass()" type="password" name="password" placeholder="確認(rèn)密碼" />
              <span id="passpass_hint"></span>
           </div>
           <div class="text">
                    <p>郵箱</p>
                    <input id="email" onfocus="shoeTips('email_hint','郵箱格式要正確')" onblur="emailHide()" onkeyup="emailCheck()" type="email" name="email" placeholder="郵箱" />
                    <span id="email_hint"></span>
                </div>
                <div class="text">
                    <p>手機(jī)號(hào)</p>
                    <input id="phone" type="text" onfocus="shoeTips('phone_hint','格式為十一位數(shù)字的手機(jī)號(hào)')" onblur="phoneHide()" onkeyup="phoneCheck()" Name="Phone" placeholder="手機(jī)號(hào)">
                    <span id="phone_hint"></span>
                </div>
                <div class="submit">
             <input type="submit" value="提交" />
         </div>
    </div>
</form>

js中的：

function shoeTips(spanId, tips) {
 var span = document.getElementById(spanId);
 span.innerHTML = tips;
}
/**
 * 校驗(yàn)用戶名
 */
function hint() {
 var value = document.getElementById("value").value;
 var hint = document.getElementById("hint");
 if(value.length < 6) {
  hint.innerHTML = "用戶名太短";
  return false;
 } else {
  hint.innerHTML = "用戶名合格";
  return true;
 }
}
 
function hint_hide() {
 var hint = document.getElementById("hint");
 hint.innerHTML = "";
}
/**
 * 校驗(yàn)密碼
 */
 
function checkPass() {
 var value = document.getElementById("pass_value").value;
 var hint = document.getElementById("pass_hint");
 if(value.length < 6) {
  hint.innerHTML = "密碼太短";
  return false;
 } else {
  hint.innerHTML = "密碼格式合格";
  return true;
 }
}
 
function pass_hide() {
 var hint = document.getElementById("pass_hint");
 hint.innerHTML = "";
}
/***
 * 確認(rèn)密碼的校驗(yàn)
 */
function checkPassPass() {
 var papavalue = document.getElementById("passpass_value").value;
 var value = document.getElementById("pass_value").value;
 var papahint = document.getElementById("passpass_hint");
 if(papavalue != value) {
  papahint.innerHTML = "兩次密碼不一致";
  return false;
 } else {
  papahint.innerHTML = "";
  return true;
 }
}
 
function passpass_hide() {
 var papahint = document.getElementById("passpass_hint");
 papahint.innerHTML = "";
}
/**
 * 校驗(yàn)郵箱
 */
function checkEmail(strEmail) 
{      
    var emailReg = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/;
    if ( emailReg.test(strEmail) ) {
        return true;
    }
    else {
//      alert("您輸入的Email地址格式不正確！");
        return false;
    }
};
function emailCheck() {
 var emailValue = document.getElementById("email").value;
 var email_hint = document.getElementById("email_hint");
 var flag = checkEmail(emailValue);
 if(flag) {
  email_hint.innerHTML = "郵箱格式正確";
  return true;
 } else {
  email_hint.innerHTML = "郵箱格式錯(cuò)誤";
  return false;
 }
}
 
function emailHide() {
 var email_hint = document.getElementById("email_hint");
 email_hint.innerHTML = "";
}
/**
 * 校驗(yàn)手機(jī)號(hào)
 */
function checkMobile( strMobile )
{ //13588888888
    var regu = /^[1][345678][0-9]{9}$/;
    var re = new RegExp(regu);
    if (re.test(strMobile)) {
        return true;
    }
    else {
        return false;
    }
};
function phoneCheck() {
 var phone = document.getElementById("phone").value;
 var phone_hint = document.getElementById("phone_hint");
 var flag = checkMobile(phone);
 if(flag) {
  phone_hint.innerHTML = "手機(jī)號(hào)格式正確";
  return true;
 } else {
  phone_hint.innerHTML = "手機(jī)號(hào)格式錯(cuò)誤";
  return false;
 }
}
 
function phoneHide() {
 var phone_hint = document.getElementById("phone_hint");
 phone_hint.innerHTML = "";
}
 
function checkForm() {
 var flag = emailCheck() && checkPass() && checkPassPass() && hint() && phoneCheck();
 return flag;
}

感謝各位的閱讀，以上就是“js怎么實(shí)現(xiàn)表單校驗(yàn)功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)js怎么實(shí)現(xiàn)表單校驗(yàn)功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！