js驗(yàn)證表單提交

普通的H5表單驗(yàn)證存在一定的不足，所以需要通過(guò)js進(jìn)行驗(yàn)證

以下是表單html以及css代碼：

<!DOCTYPE html>

<html lang="en">

<head>

? ? <meta charset="UTF-8">

? ? <title>Index</title>

? ? <style>

? ? label {

? cursor: pointer; }

* {

? margin: 0;

? padding: 0;

? list-style: none;

? text-decoration: none;

? box-sizing: border-box; }

a {

? color: inherit; }

body {

? background: rgba(0, 0, 0, 0.1); }

#Total {

? box-shadow: 2px 2px 10px 1px rgba(0, 0, 0, 0.2);

? background: white;

? width: 60%;

? min-height: 800px;

? margin: 50px auto;

? border-radius: 10px;

? overflow: hidden;

? border-left: 0.5px solid rgba(0, 0, 0, 0.32);

? border-right: 0.5px solid rgba(0, 0, 0, 0.32);

? border-bottom: 0.5px solid rgba(0, 0, 0, 0.32); }

? #Total #Title {

? ? background: forestgreen;

? ? color: white;

? ? width: 100%;

? ? letter-spacing: 5px;

? ? height: 50px;

? ? line-height: 50px;

? ? text-align: center;

? ? font-size: 20px;

? ? font-weight: bold; }

? #Total .item, #Total .item_ {

? ? width: 90%;

? ? margin: 10px auto;

? ? height: 25px;

? ? line-height: 25px;

? ? font-size: 18px;

? ? font-weight: bold;

? ? position: relative; }

? ? #Total .item.item, #Total .item_.item {

? ? ? margin-top: 20px; }

? ? #Total .item .important, #Total .item_ .important {

? ? ? color: #6385d1; }

? ? #Total .item input, #Total .item_ input {

? ? ? position: absolute;

? ? ? width: 50%;

? ? ? height: 40px;

? ? ? top: 50%;

? ? ? left: 15%;

? ? ? margin-top: -20px;

? ? ? font-size: 15px;

? ? ? outline: none;

? ? ? border: 1px solid rgba(0, 0, 0, 0.2);

? ? ? border-radius: 5px;

? ? ? transition: box-shadow .5s; }

? ? ? #Total .item input:focus, #Total .item_ input:focus {

? ? ? ? box-shadow: 1px 1px 10px #6385d1, 1px 1px 10px #6385d1; }

? ? #Total .item.item_, #Total .item_.item_ {

? ? ? width: 60%;

? ? ? height: 30px;

? ? ? border-bottom: .5px solid #6385d1;

? ? ? border-radius: 2px;

? ? ? font-size: 15px;

? ? ? color: rgba(0, 0, 0, 0.6);

? ? ? letter-spacing: 2px;

? ? ? font-weight: lighter;

? ? ? padding-left: 10px;

? ? ? margin: 0;

? ? ? margin-left: 5%; }

? #Total #end {

? ? text-align: center;

? ? height: 50px;

? ? line-height: 50px;

? ? border-top: 1px solid rgba(0, 0, 0, 0.8);

? ? width: 100%;

? ? letter-spacing: 2px; }

? ? #Total #end #choose {

? ? ? margin-right: 20px; }

? ? #Total #end #handup {

? ? ? width: 130px;

? ? ? height: 30px;

? ? ? border: none;

? ? ? background: forestgreen;

? ? ? color: white;

? ? ? border-radius: 5px;

? ? ? margin-left: 10px; }

? ? </style>

</head>

<body>

<div id="Total">

? ? <div id="Title">-- 賬戶信息 --</div>?

? ? <div class="item">

? ? ? ? <span class="important">*</span>

? ? ? ? <label for="userAccount">用戶名 :</label>

? ? ? ? <input type="text" id="userAccount" placeholder=" 用戶設(shè)置成功后不可修改">

? ? </div>

? ? <p class="item_"></p>

? ? <br>

? ? <!--_____________________________________________________________________________________________-->

? ? <div class="item">

? ? ? ? <span class="important">*</span>

? ? ? ? <label for="userPass">登陸密碼 :</label>

? ? ? ? <input type="password" id="userPass" placeholder=" 6-20位字母,數(shù)字或符號(hào)">

? ? </div>

? ? <p class="item_"></p>

? ? <br>

? ? <!--_____________________________________________________________________________________________-->

? ? <div class="item">

? ? ? ? <span class="important">*</span>

? ? ? ? <label for="userPass_">確認(rèn)密碼 :</label>

? ? ? ? <input type="password" id="userPass_">

? ? </div>

? ? <p class="item_"></p>

? ? <br>

? ? <!--_____________________________________________________________________________________________-->

? ? <div class="item">

? ? ? ? <span class="important">*</span>

? ? ? ? <label for="userName">姓名 :</label>

? ? ? ? <input type="text" id="userName" placeholder=" 請(qǐng)輸入姓名,中文且最多五位">

? ? </div>

? ? <p class="item_"></p>

? ? <br>

? ? <!--_____________________________________________________________________________________________-->

? ? <div class="item">

? ? ? ? <span class="important">*</span>

? ? ? ? <label for="information">身份證號(hào) :</label>

? ? ? ? <input type="text" id="information" placeholder=" 請(qǐng)輸入身份證號(hào)">

? ? </div>

? ? <p class="item_"></p>

? ? <br>

? ? <!--_____________________________________________________________________________________________-->

? ? <div class="item">

? ? ? ? <span class="important">*</span>

? ? ? ? <label for="email">郵箱 :</label>

? ? ? ? <input type="email" id="email" placeholder=" 請(qǐng)輸入正確郵箱格式">

? ? </div>

? ? <p class="item_"></p>

? ? <br>

? ? <!--_____________________________________________________________________________________________-->

? ? <div class="item">

? ? ? ? <span class="important">*</span>

? ? ? ? <label for="telephone">手機(jī)號(hào)碼 :</label>

? ? ? ? <input type="tel" id="telephone" placeholder=" 請(qǐng)輸入您的手機(jī)號(hào)碼">

? ? </div>

? ? <p class="item_"></p>

? ? <br>

? ? <!--__________________________________________________________________________________________________-->

? ? <div id="end">

? ? ? ? <input type="checkbox" id="choose">

? ? ? ? <label for="choose">我已閱讀并同意遵守規(guī)定</label>

? ? ? ? <button id="handup">確認(rèn)提交</button>

? ? </div>

</div>

</body>

</html>

我們可以看到生成的樣式：


現(xiàn)在我們對(duì)以下各項(xiàng)進(jìn)行驗(yàn)證：

1.用戶名驗(yàn)證：

var userAccount = document.querySelector("#userAccount"),//獲取用戶名

? ? userPass = document.querySelector("#userPass"),//獲取密碼

? ? userPass_ = document.querySelector("#userPass_"),//獲取確認(rèn)密碼

? ? userName = document.querySelector("#userName"),//獲取姓名

? ? information = document.querySelector("#information"),//獲取身份證號(hào)碼

? ? email = document.querySelector("#email"),//獲取郵箱號(hào)碼

? ? telephone = document.querySelector("#telephone"),//獲取手機(jī)號(hào)碼

? ? items = document.querySelectorAll(".item_"),//獲取所有提示文段的下標(biāo)

? ? aCho = document.querySelector("#choose"), oBtn = document.querySelector("#handup");

var test1 = false, test2 = false, test3 = false, test4 = false, test5 = false, test6 = false, test7 = false

? ? ;

userAccount.onfocus = function () {

? ? items[0].innerHTML = "6-30位字母、數(shù)字或'_'";

? ? items[0].style.color = "green";

};

userAccount.onblur = function () {

? ? var reg = /^\w{6,30}$/;

? ? if (this.value == "") {

? ? ? ? items[0].innerHTML = "請(qǐng)您務(wù)必寫(xiě)入用戶名!";

? ? ? ? items[0].style.color = "red";

? ? } else {

? ? ? ? if (!reg.exec(userAccount.value)) {

? ? ? ? ? ? items[0].innerHTML = "6-30位字母、數(shù)字或'_'";

? ? ? ? ? ? items[0].style.color = "red";

? ? ? ? } else {

? ? ? ? ? ? items[0].innerHTML = "格式正確";

? ? ? ? ? ? items[0].style.color = "green";

? ? ? ? ? ? test1 = true;

? ? ? ? }

? ? }

};

2.登陸密碼驗(yàn)證：

userPass.onfocus = function () {

? ? items[1].innerHTML = "6-20位字母,數(shù)字或符號(hào)";

? ? items[1].style.color = "green";

};

userPass.onblur = function () {

? ? var reg = /^\w{6,20}$/;

? ? if (this.value == "") {

? ? ? ? items[1].innerHTML = "請(qǐng)您務(wù)必寫(xiě)入密碼!";

? ? ? ? items[1].style.color = "red";

? ? } else {

? ? ? ? if (!reg.exec(userPass.value)) {

? ? ? ? ? ? items[1].innerHTML = "請(qǐng)輸入6-20位字母,數(shù)字或符號(hào)";

? ? ? ? ? ? items[1].style.color = "red";

? ? ? ? } else {

? ? ? ? ? ? items[1].innerHTML = "格式正確";

? ? ? ? ? ? items[1].style.color = "green";

? ? ? ? ? ? test2 = true;

? ? ? ? }

? ? }

};

3.確認(rèn)密碼驗(yàn)證：

userPass_.onfocus = function () {

? ? items[2].innerHTML = "請(qǐng)確認(rèn)兩次密碼相同";

? ? items[2].style.color = "green";

};

userPass_.onblur = function () {

? ? if (this.value == "") {

? ? ? ? items[2].innerHTML = "請(qǐng)務(wù)必再次確認(rèn)密碼";

? ? ? ? items[2].style.color = "red";

? ? } else {

? ? ? ? if (this.value != userPass.value) {

? ? ? ? ? ? items[2].innerHTML = "兩次密碼不相同";

? ? ? ? ? ? items[2].style.color = "red";

? ? ? ? } else {

? ? ? ? ? ? items[2].innerHTML = "格式正確";

? ? ? ? ? ? items[2].style.color = "green";

? ? ? ? ? ? test3 = true;

? ? ? ? }

? ? }

};

4.姓名驗(yàn)證：

userName.onfocus = function () {

? ? items[3].innerHTML = "請(qǐng)輸入您的中文名字";

? ? items[3].style.color = "green";

};

userName.onblur = function () {

? ? var reg = /^[\u4e00-\u9fa5]{2,5}$/;

? ? if (this.value == "") {

? ? ? ? items[3].innerHTML = "請(qǐng)務(wù)必寫(xiě)入您的姓名";

? ? ? ? items[3].style.color = "red";

? ? } else {

? ? ? ? if (!reg.exec(userName.value)) {

? ? ? ? ? ? items[3].innerHTML = "請(qǐng)輸入中文名并確認(rèn)是正確格式";

? ? ? ? ? ? items[3].style.color = "red";

? ? ? ? } else {

? ? ? ? ? ? items[3].innerHTML = "格式正確";

? ? ? ? ? ? items[3].style.color = "green";

? ? ? ? ? ? test4 = true

? ? ? ? }

? ? }

};

5.身份證號(hào)驗(yàn)證：

information.onfocus = function () {

? ? items[4].innerHTML = "請(qǐng)輸入您的身份證號(hào)碼";

? ? items[4].style.color = "green";

};

information.onblur = function () {

? ? var reg = /^\d{17}[0-9x]$/;

? ? if (this.value == "") {

? ? ? ? items[4].innerHTML = "請(qǐng)您務(wù)必寫(xiě)入身份證號(hào)碼!";

? ? ? ? items[4].style.color = "red";

? ? } else {

? ? ? ? if (!reg.exec(information.value)) {

? ? ? ? ? ? items[4].innerHTML = "請(qǐng)輸入身份證號(hào)碼正確格式";

? ? ? ? ? ? items[4].style.color = "red";

? ? ? ? } else {

? ? ? ? ? ? items[4].innerHTML = "格式正確";

? ? ? ? ? ? items[4].style.color = "green";

? ? ? ? ? ? test5 = true;

? ? ? ? }

? ? }

};

6.郵箱驗(yàn)證：

email.onfocus = function () {

? ? items[5].innerHTML = "請(qǐng)輸入您郵箱的正確格式";

? ? items[5].style.color = "green";

};

email.onblur = function () {

? ? var reg = /^\w+@\w+.[a-zA-Z]{2,3}(.[a-zA-Z]{2,3})?$/;

? ? if (this.value == "") {

? ? ? ? items[5].innerHTML = "請(qǐng)您務(wù)必寫(xiě)入郵箱!";

? ? ? ? items[5].style.color = "red";

? ? } else {

? ? ? ? if (!reg.exec(email.value)) {

? ? ? ? ? ? items[5].innerHTML = "請(qǐng)輸入郵箱正確格式";

? ? ? ? ? ? items[5].style.color = "red";

? ? ? ? } else {

? ? ? ? ? ? items[5].innerHTML = "格式正確";

? ? ? ? ? ? items[5].style.color = "green";

? ? ? ? ? ? test6 = true;

? ? ? ? }

? ? }

};

7.手機(jī)號(hào)碼驗(yàn)證：

telephone.onfocus = function () {

? ? items[6].innerHTML = "請(qǐng)輸入您的手機(jī)號(hào)碼";

? ? items[6].style.color = "green";

};

telephone.onblur = function () {

? ? var reg = /^\d{11}$/;

? ? if (this.value == "") {

? ? ? ? items[6].innerHTML = "請(qǐng)您務(wù)11位手機(jī)號(hào)碼!";

? ? ? ? items[6].style.color = "red";

? ? } else {

? ? ? ? if (!reg.exec(telephone.value)) {

? ? ? ? ? ? items[6].innerHTML = "請(qǐng)您務(wù)11位手機(jī)號(hào)碼";

? ? ? ? ? ? items[6].style.color = "red";

? ? ? ? } else {

? ? ? ? ? ? items[6].innerHTML = "格式正確";

? ? ? ? ? ? items[6].style.color = "green";

? ? ? ? ? ? test7 = true;

? ? ? ? }

? ? }

};

8.最后是提交按鈕驗(yàn)證，需要以上驗(yàn)證全部通過(guò)：

oBtn.onclick = function () {

? ? if (aCho.checked == false || test1 == false || test2 == false || test3 == false || test4 == false || test5 == false

? ? ? ? || test6 == false || test7 == false) {

? ? ? ? alert(" 您 的 信 息 有 誤 ")

? ? } else {

? ? ? ? alert(" 登 記 成 功 ! ")

? ? }

};

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1. tab列表折疊效果 html: 能源系統(tǒng)事業(yè)部 崗位名稱： 工作地點(diǎn) 崗位名...
    lilyping閱讀 2,013評(píng)論 0贊 1
  • "use strict";function _classCallCheck(e,t){if(!(e instanc...
    久些閱讀 2,142評(píng)論 0贊 2
  • 單例模式 適用場(chǎng)景：可能會(huì)在場(chǎng)景中使用到對(duì)象，但只有一個(gè)實(shí)例，加載時(shí)并不主動(dòng)創(chuàng)建，需要時(shí)才創(chuàng)建 最常見(jiàn)的單例模式，...
    Obeing閱讀 2,315評(píng)論 1贊 10
  • 源站：http://fengyuanchen.github.io/viewer/ 應(yīng)用： html: 源碼上是正常...
    羊繪霖閱讀 5,691評(píng)論 0贊 2
  • 嫂子：今天這雙鞋挺好看，又買的??？ 我：不是啊，買了好久，我今天擦了擦……… ……
    Ada_YYYYYY閱讀 129評(píng)論 0贊 0

友情鏈接更多精彩內(nèi)容