原生js實現表單的正則驗證（驗證通過後才可提交）
阿新 • • 發佈：2021-05-08
實現瞭如下功能：
1.使用者名稱：onfouc顯示msg規則；onkeyup計算字元，其中中文為兩個字元；onblur，驗證是否通過
2.郵箱：onblur 正則匹配，正則是根據自己的需求寫的，可以根據個人需求更改
3..密碼：onkeyup時顯示密碼的強弱度，onblur時驗證密碼，是否為相同字元，是否全字元，或全數字，長度是否符合要求
4.確認密碼：驗證是否和上一次一致
5.提交按鈕只有在全部input驗證通過後才有效，否則無效
主要知識點：
1.中文為兩個字元：
function getLength(str) {
return str.replace(/[^\x00-xff]/g,"xx").length;
//x00-xff表示在ascii碼中所有的雙位元組字元，這句話意思是將所有非單位元組的字元替換成xx，即兩個單位元組字元，然後再計算長度
}2.郵箱驗證的正則：
var re_e = /^[\w_\.\-]+@[\w]+.([\w]{2,4})$/g
3.是否全為相同字元：
function findStr(str,n){
var temp = 0;
for(var i = 0;i<str.length;i++){
www.cppcns.com if(str.charAt(i)==n){
temp++:
};
}
}
4.是否全為數字，是否全為字元
var re_n =/[^\d]/g ;
if(!re_n.test(str)){//全為數字}
var re_n =/[^\a-zA-Z]/g ;
if(!re_n.test(str)){//全為字元}5.表單驗證全部通過按鈕才有效，可提交：
//我的處理是，在每一個input中都加入一個驗證識別符號，例如email_state；另寫一個驗證的函式，驗證這四個input的驗證識別符號則將按鈕設為可點，反之則禁用；再每一次onblur的時候都呼叫一次這個驗證函式。
完整程式碼如下
function register() {
var oName = document.getElementById("name");
var count = document.getElementById("count");
var psw = document.getElementById("psw");
var psw2 = document.getElementById("psw2");
var email = document.getElementById("email");
var name_msg = document.getElementsByClassName("name_msg")[0];
var psw_msg = document.getElementsByClassName("psw_msg")[0];
var psw2_msg = document.getElementsByClassName("psw2_msg")[0];
var email_msg = document.getElementsByClassName("email_msg")[0];
var psw = document.getElementById("psw");
var psw2 = document.getElementById("psw2");
var intensity = getByClass("intensity")[0].getElementsByTagName("span");
var registerbtn = document.getElementById("submit");
var oName_state = false;
var email_state = false;
var psw_state = false;
var psw2_state = false;
var name_length = 0;
oName.onfocus = function() {
name_msg.style.display = "inline-block";
}
oName.onkeyup = function() {
count.style.visibility = "visible";
name_length = getLength(this.value);
count.innerHTML = name_length + "個字元";
if (name_length == 0) {
count.style.visibility = "hidden";
}
}
oName.onblur = function() {
//含有非法字元 不能為空 長度超25 長度少於6個字元
var re = /[^\w\u4e00-\u9fa5]/g;
if (re.test(this.value)) {
name_msg.innerHTML = "<i class='fa fa-close'>含有非法字元</i>";
oName_state = false;
} else if (this.value == "") {
name_msg.innerHTML = "<i class='fa fa-close'>不能為空</i>";
oName_state = false;
} else if (name_length > 25) {
name_msg.innerHTML = "<i class='fa fa-close'>不能超出25個字元</i>";
oName_state = false;
} else if (name_length < 6) {
name_msg.innerHTML = "<i class='fa fa-close'>不能少於6個字元</i>";
oName_state = false;
} else {
name_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
oName_state = true;
}
checkform();
}
psw.onfocus = function() {
psw_msg.style.display = "inline-block";
psw_msg.innerHTML = "<i class='fa fa-lightbulb-o'>6-16個字元，不能單獨使用字母、數字或符號</i>"
}
psw.onkeyup = function() {
if (this.value.length > 5) {
intensity[1].className = "active";
psw2.removeAttribute("disabled");
psw2_msg.style.display = "inline-block";
} else {
intensity[1].className = "";
psw2.setAttribute("disabled","");
psw2_msg.style.display = "none";
}
if (this.value.length > 10) {
intensity[2].className = "active";
psw2.removeAttribute("disabled");
psw2_msg.style.display = "inline-block";
} else {
intensity[2].className = "";
}
}
psw.onblur = function() {
//不能為空 不能相同字元 長度6-16 不能全數字 不能全字母
var m = findStr(psw.value,psw.value[0]);
var re_n = /[^\d]/g;
var re_t = /[^a-zA-Z]/g;
if (this.value == "") {
psw_msg.innerHTML = "<i class='fa fa-close'>不能為空</i>";
psw_state = false;
} else if (m == this.value.length) {
psw_msg.innerHTML = "<i class='fa fa-close'>不能為相同字元</i>";
psw_state = false;
} else if (this.value.length < 6 || this.value.legth > 16) {
psw_msg.innerHTML = "<i class='fa fa-close'>長度應為6-16個字元</i>";
psw_state = false;
} else if (!re_http://www.cppcns.com
部分html程式碼
<form id="form">
<div class="name-field">
<label>使用者名稱</label>
<input type="text" id="name" autofocus requiered/><span class="msg name_msg"><i class="fa fa-lightbulb-o"> 5-25個字元，1個漢字為兩個字元，推薦使用中文會員名</i></span>
<div id="count">0個字元</div>
</div>
<div class="email-field" requiered>
<label>郵箱</label>
<input type="text" id="email" /><span class="msg email_msg"></span>
</div>
<div class="pwd-field" requiered>
<label>密碼</label>
<input type="password" id="psw" /><span class="msg psw_msg"></span>
<div class="intensity">
<span class="active">弱</span><span>中</span><span>強</span>
</div>
</div>
<div class="pwd2-field" requiered>
<label>確認密碼</label>
<input type="password" id="psw2" disabled="" /><span class="msg psw2_msg">請再次輸入</span>
</div>
<button type="submit" id="submit" disabled="" class="submitBtn">註冊</button>
</form>
css部分
.name-field {
margin-top: 10px
}
.email-field {
margin-top: 3px
}
.pwd-field {
margin-top: 10px
}
.pwd2-field {
margin-top: 10px
}
.register label {
float: left;
width: 80px;
margin-right: 10px;
text-align: right
}
程式設計客棧.register .name_msg,.register .psw_msg,.register .psw2_msg,.register .email_msg {
KSszCBmargin-left: 10px;
display: none
}
.intensity,#count {
padding-left: 90px;
margin-top: 3px
}
#count {
visibility: hidden;
color: #999;
font-size: 12px
}
.intensity span {
display: inline-block;
background: #FBAA51;
width: 55px;
height: 20px;
text-align:http://www.cppcns.com center
}
.intensity .active {
background: rgba(0,128,0.61)
}
.register .submitBtn {
width: 163px;
margin: 10px 0 0 90px
}
#submit {
color: #555
}
總結
到此這篇關於原生js實現表單的正則驗證（驗證通過後才可提交）的文章就介紹到這了,更多相關js表單正則驗證內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！