原生js實(shí)現(xiàn)表單的正則驗(yàn)證（驗(yàn)證通過后才可提交）
更新時(shí)間：2021年05月07日 12:05:48 作者：Kou_Hi
這篇文章主要給大家介紹了關(guān)于如何利用原生js實(shí)現(xiàn)表單的正則驗(yàn)證，所有驗(yàn)證都通過后提交按鈕才可用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
實(shí)現(xiàn)了如下功能：
1.用戶名：onfouc顯示msg規(guī)則；onkeyup計(jì)算字符，其中中文為兩個(gè)字符；onblur，驗(yàn)證是否通過
2.郵箱：onblur 正則匹配，正則是根據(jù)自己的需求寫的，可以根據(jù)個(gè)人需求更改
3..密碼：onkeyup時(shí)顯示密碼的強(qiáng)弱度，onblur時(shí)驗(yàn)證密碼，是否為相同字符，是否全字符，或全數(shù)字，長度是否符合要求
4.確認(rèn)密碼：驗(yàn)證是否和上一次一致
5.提交按鈕只有在全部input驗(yàn)證通過后才有效，否則無效
主要知識(shí)點(diǎn)：
1.中文為兩個(gè)字符：
function getLength(str) {
return str.replace(/[^\x00-xff]/g, "xx").length;
//x00-xff表示在ascii碼中所有的雙字節(jié)字符，這句話意思是將所有非單字節(jié)的字符替換成xx，即兩個(gè)單字節(jié)字符，然后再計(jì)算長度
}
2.郵箱驗(yàn)證的正則：
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++){
if(str.charAt(i)==n){
temp++:
};
}
}
4.是否全為數(shù)字，是否全為字符
var re_n =/[^\d]/g ;
if(!re_n.test(str)){//全為數(shù)字}
var re_n =/[^\a-zA-Z]/g ;
if(!re_n.test(str)){//全為字符}
5.表單驗(yàn)證全部通過按鈕才有效，可提交：
//我的處理是，在每一個(gè)input中都加入一個(gè)驗(yàn)證標(biāo)識(shí)符，例如email_state；另寫一個(gè)驗(yàn)證的函數(shù)，驗(yàn)證這四個(gè)input的驗(yàn)證標(biāo)識(shí)符則將按鈕設(shè)為可點(diǎn)，反之則禁用；再每一次onblur的時(shí)候都調(diào)用一次這個(gè)驗(yàn)證函數(shù)。
完整代碼如下
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 + "個(gè)字符";
if (name_length == 0) {
count.style.visibility = "hidden";
}
}
oName.onblur = function() {
//含有非法字符 不能為空 長度超25 長度少于6個(gè)字符
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個(gè)字符</i>";
oName_state = false;
} else if (name_length < 6) {
name_msg.innerHTML = "<i class='fa fa-close'>不能少于6個(gè)字符</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個(gè)字符，不能單獨(dú)使用字母、數(shù)字或符號(hào)</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 不能全數(shù)字 不能全字母
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'>長度應(yīng)為6-16個(gè)字符</i>";
psw_state = false;
} else if (!re_n.test(this.value)) {
psw_msg.innerHTML = "<i class='fa fa-close'>不能全部為數(shù)字</i>";
psw_state = false;
} else if (!re_t.test(this.value)) {
psw_msg.innerHTML = "<i class='fa fa-close'>不能全部為字母</i>";
psw_state = false;
} else {
psw_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
psw_state = true;
}
checkform();
}
psw2.onblur = function() {
if (psw2.value != psw.value) {
psw2_msg.innerHTML = "<i class='fa fa-close'>兩次輸入不一致</i>";
psw2_state = false;
} else {
psw2_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
psw2_state = true;
}
checkform();
}
email.onblur = function() {
var re_e = /^[\w_\-\.]+@[\w]+\.([\w]{2,4})$/g;
if (!re_e.test(this.value)) {
email_msg.innerHTML = "<i class='fa fa-close'>請輸入正確的郵箱格式</i>";;
email_state = false;
} else {
email_msg.innerHTML = "<i class='fa fa-check-square'>OK!</i>";
email_state = true;
}
checkform();
}
function checkform() {
if (oName_state && oName_state && psw_state && psw2_state) {
registerbtn.removeAttribute("disabled");
// registerbtn.className+=" "+"readySubmit";
$("#submit").addClass("readySubmit");
} else {
registerbtn.setAttribute("disabled", "");
//registerbtn.className = registerbtn.className.replace( new RegExp( "(\\s|^)" + "readySubmit" + "(\\s|$)" ), " " );
// registerbtn.className = registerbtn.className.replace( /(\s|^)readySubmit(\s|$)/g, " " );
$("#submit").removeClass("readySubmit");
}
}
}
function getLength(str) {
return str.replace(/[^\x00-xff]/g, "xx").length;
}
function findStr(str, n) {
var temp = 0;
for (var i = 0; i < str.length; i++) {
if (str.charAt(i) == n) {
temp++;
}
}
return temp;
}
部分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個(gè)字符，1個(gè)漢字為兩個(gè)字符，推薦使用中文會(huì)員名</i></span>
<div id="count">0個(gè)字符</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>強(qiáng)</span>
</div>
</div>
<div class="pwd2-field" requiered>
<label>確認(rèn)密碼</label>
<input type="password" id="psw2" disabled="" /><span class="msg psw2_msg">請?jiān)俅屋斎?lt;/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 {
margin-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: center
}
.intensity .active {
background: rgba(0, 128, 0, 0.61)
}
.register .submitBtn {
width: 163px;
margin: 10px 0 0 90px
}
#submit {
color: #555
}
總結(jié)
到此這篇關(guān)于原生js實(shí)現(xiàn)表單的正則驗(yàn)證（驗(yàn)證通過后才可提交）的文章就介紹到這了,更多相關(guān)js表單正則驗(yàn)證內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
- JavaScript表單驗(yàn)證示例詳解
- 原生js 實(shí)現(xiàn)表單驗(yàn)證功能
- JavaScript實(shí)現(xiàn)表單驗(yàn)證功能
- JS簡單表單驗(yàn)證功能完整示例
- JavaScript使用表單元素驗(yàn)證表單的示例代碼
- JavaScript實(shí)現(xiàn)表單注冊、表單驗(yàn)證、運(yùn)算符功能
- JS實(shí)現(xiàn)的簡單表單驗(yàn)證功能完整實(shí)例
- JS實(shí)現(xiàn)的簡單表單驗(yàn)證功能示例
- JavaScript 基礎(chǔ)表單驗(yàn)證示例(純Js實(shí)現(xiàn))
- JavaScript實(shí)現(xiàn)表單驗(yàn)證
相關(guān)文章
JavaScript實(shí)現(xiàn)計(jì)算多維嵌套數(shù)組深度
在前端開發(fā)中，經(jīng)常會(huì)遇到需要處理多維嵌套的數(shù)據(jù)結(jié)構(gòu)，并需要計(jì)算出它們的深度，本文就來講講如何使用JavaScript實(shí)現(xiàn)計(jì)算多維嵌套數(shù)組深度吧2023-06-06
IE 上下滾動(dòng)展示模仿Marquee機(jī)制
最近要做一個(gè)大屏幕展示上下滾動(dòng)的列表，而IE自帶的Marquee，無法滿足需要，隨自己寫了一個(gè)滾動(dòng)機(jī)制，代碼在附件中2009-12-12
JavaScript 禁止用戶保存圖片的實(shí)現(xiàn)代碼
這篇文章主要介紹了JavaScript 禁止用戶保存圖片的實(shí)現(xiàn)代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-04
echarts實(shí)現(xiàn)橫向和縱向滾動(dòng)條(使用dataZoom)
這篇文章主要給大家介紹了關(guān)于echarts使用dataZoom實(shí)現(xiàn)橫向和縱向滾動(dòng)條的相關(guān)資料,最近項(xiàng)目中使用到echarts圖表,當(dāng)數(shù)據(jù)過多時(shí)需要添加橫向滾動(dòng)條,需要的朋友可以參考下2023-08-08
微信小程序下拉加載和上拉刷新兩種實(shí)現(xiàn)方法詳解
這篇文章主要介紹了微信小程序下拉加載和上拉刷新兩種實(shí)現(xiàn)方法詳解,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-09-09
js計(jì)算精度問題小結(jié)，需要的朋友可以參考一下2013-04-04
這篇文章主要介紹了js操作滾動(dòng)條事件的方法,實(shí)例分析了滾動(dòng)條的使用技巧與相關(guān)注意事項(xiàng),需要的朋友可以參考下2015-01-01
這篇文章主要介紹了Jquery對數(shù)組的操作技巧,需要的朋友可以參考下2014-03-03
JS快速實(shí)現(xiàn)移動(dòng)端拼圖游戲
最近開發(fā)一個(gè)有關(guān)手機(jī)端拼圖游戲，是基于js實(shí)現(xiàn)的。今天小編抽時(shí)間把具體實(shí)現(xiàn)代碼分享到腳本之家平臺(tái)供大家參考，對js移動(dòng)端拼圖游戲感興趣的朋友參考下吧2016-09-09
這篇文章主要為大家詳細(xì)介紹了微信小程序使用字體圖標(biāo)的方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05