JS+jQuery實(shí)現(xiàn)注冊(cè)信息的驗(yàn)證功能
更新時(shí)間：2017年09月26日 08:35:35 作者：小小蒜頭
本文通過實(shí)例代碼給大家分享了基于js+jquery實(shí)現(xiàn)的注冊(cè)信息驗(yàn)證功能，代碼簡單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友參考下吧
用JS和JQuery實(shí)現(xiàn)的效果是一樣的。
HTML代碼
<legend> 請(qǐng)?zhí)顚懽?cè)信息</legend>
<form action="index.html" method="post">
<table style="text-align: right;">
<tr>
<td>用戶名：</td>
<td><input type="text" name="userName" placeholder="由英文字母和數(shù)字組成的4-16位字符，以字母開頭">
</td>
</tr>
<tr>
<td>昵稱：</td>
<td><input type="text" name="nickName" placeholder="由2-6個(gè)漢字組成">
</td>
</tr>
<tr>
<td>郵箱：</td>
<td><input type="text" name="email" placeholder="郵箱賬號(hào)@域名。如good@tom.com、whj@sina.com.cn">
</td>
</tr>
<tr>
<td>密碼：</td>
<td><input type="password" name="pwd" placeholder="由英文字母和數(shù)字組成的4-10位字符">
</td>
</tr>
<tr>
<td>確認(rèn)密碼：</td>
<td><input type="password" name="pwd2" placeholder="確認(rèn)密碼">
</td>
</tr>
<tr>
<td>手機(jī)號(hào)碼：</td>
<td><input type="text" name="phone" placeholder="手機(jī)號(hào)由11位數(shù)字組成，且以13,15,18開頭">
</td>
</tr>
<tr>
<td>出生日期：</td>
<td><input type="text" name="date" placeholder="出生日期在1990-2009之間">
</tr>
<tr>
<td colspan="2" align="left"><input type="button" name="submit" value="提交"></td>
</tr>
</table>
</form>
</fieldset>
CSS樣式
body {
text-align: center;
padding: 0;
margin: 0;
}
fieldset {
width: 800px;
}
table tr td ~ td {
text-align: left;
width: 600px;
}
JS代碼
//驗(yàn)證用戶名
function check_userName() {
var userName = document.getElementById("name").value;
var regName = /[a-zA-Z]\w{4,16}/
if (userName == "" || userName.trim() == "") {
document.getElementById("err_name").innerHTML = "請(qǐng)輸入用戶名";
return false;
} else if (!regName.test(userName)) {
document.getElementById("err_name").innerHTML = "由英文字母和數(shù)字組成的4-16位字符，以字母開頭";
return false;
} else {
document.getElementById("err_name").innerHTML = "ok!!!";
return true;
}
}
//驗(yàn)證昵稱
function check_nickName() {
var nickName = document.getElementById("nick").value;
var regName = /[\u4e00-\u9fa5]{2,6}/
if (nickName == "" || nickName.trim() == "") {
document.getElementById("err_nick").innerHTML = "請(qǐng)輸入昵稱";
return false;
} else if (!regName.test(nickName)) {
document.getElementById("err_nick").innerHTML = "由2-6個(gè)漢字組成";
return false;
} else {
document.getElementById("err_nick").innerHTML = "ok!!!";
return true;
}
}
//驗(yàn)證郵箱
function check_email() {
var email = document.getElementById("email").value;
var regEmail = /^\w+@\w+((\.\w+)+)$/;
if (email == "" || email.trim() == "") {
document.getElementById("err_email").innerHTML = "請(qǐng)輸入郵箱";
return false;
} else if (!regEmail.test(email)) {
document.getElementById("err_email").innerHTML = "郵箱賬號(hào)@域名。如good@tom.com、whj@sina.com.cn";
return false;
} else {
document.getElementById("err_email").innerHTML = "ok!!!";
return true;
}
}
//驗(yàn)證密碼
function check_pwd() {
var pwd = document.getElementById("pwd").value;
var regPwd = /^\w{4,10}$/;
if (pwd == "" || pwd.trim() == "") {
document.getElementById("err_pwd").innerHTML = "請(qǐng)輸入密碼";
return false;
} else if (!regPwd.test(pwd)) {
document.getElementById("err_pwd").innerHTML = "格式錯(cuò)誤";
return false;
} else {
document.getElementById("err_pwd").innerHTML = "ok!!!";
return true;
}
}
//確認(rèn)密碼
function check_pwd2() {
var pwd = document.getElementById("pwd").value;
var pwd2 = document.getElementById("pwd2").value;
if (pwd2 == "" || pwd2.trim() == "") {
document.getElementById("err_pwd2").innerHTML = "請(qǐng)輸入密碼";
return false;
} else if (!pwd2.equals(pwd)) {
document.getElementById("err_pwd2").innerHTML = "兩次輸入密碼不一致";
return false;
} else {
document.getElementById("err_pwd2").innerHTML = "ok!!!";
return true;
}
}
//驗(yàn)證手機(jī)號(hào)
function check_phone() {
var phone = document.getElementById("phone").value;
var regPhone = /[13,15,18]\d{9}/;
if (phone == "" || phone.trim() == "") {
document.getElementById("err_phone").innerHTML = "請(qǐng)輸入手機(jī)號(hào)";
return false;
} else if (!regPhone.test(phone)) {
document.getElementById("err_phone").innerHTML = "手機(jī)號(hào)由11位數(shù)字組成，且以13,15,18開頭";
return false;
} else {
document.getElementById("err_phone").innerHTML = "ok!!!";
return true;
}
}
//驗(yàn)證時(shí)間
function check_date() {
var birthday = document.getElementById("birthday").value;
var regDate = /[13,15,18]\d{9}/;
if (birthday == "" || birthday.trim() == "") {
document.getElementById("err_date").innerHTML = "請(qǐng)輸入日期";
return false;
} else if (!regDate.test(birthday)) {
document.getElementById("err_date").innerHTML = "出生日期在1990-2009之間";
return false;
} else {
document.getElementById("err_date").innerHTML = "ok!!!";
return true;
}
}
Jquery代碼
$(function () {
var errMsg;
$.each($("input"), function (i, val) {
$(val).blur(function () {
if ($(val).attr("name") == "userName") {
$(".nameMsg").remove();
var userName = val.value;
var regName = /[a-zA-Z]\w{4,16}/
if (userName == "" || userName.trim() == "") {
errMsg = "<span class='nameMsg' style='color:red;'>用戶名不能為空</span>";
} else if (!regName.test(userName)) {
errMsg = "<span class='nameMsg' style='color:red;'>由英文字母和數(shù)字組成的4-16位字符，以字母開頭</span>";
} else {
errMsg = "<span class='nameMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "nickName") {
$(".nickMsg").remove();
var nickName = val.value;
var regName = /[\u4e00-\u9fa5]{2,6}/
if (nickName == "" || nickName.trim() == "") {
errMsg = "<span class='nickMsg' style='color:red;'>昵稱不能為空</span>";
} else if (!regName.test(nickName)) {
errMsg = "<span class='nickMsg' style='color:red;'>由2-6個(gè)漢字組成</span>";
} else {
errMsg = "<span class='nickMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "email") {
$(".emailMsg").remove();
var email = val.value;
var regEmail = /^\w+@\w+((\.\w+)+)$/;
if (email == "" || email.trim() == "") {
errMsg = "<span class='emailMsg' style='color:red;'>郵箱不能為空</span>";
} else if (!regEmail.test(email)) {
errMsg = "<span class='emailMsg' style='color:red;'>郵箱賬號(hào)@域名。如good@tom.com、whj@sina.com.cn</span>";
} else {
errMsg = "<span class='emailMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "pwd") {
$(".pwdMsg").remove();
var pwd = val.value;
var regPwd = /^\w{4,10}$/;
if (pwd == "" || pwd.trim() == "") {
errMsg = "<span class='pwdMsg' style='color:red;'>密碼不能為空</span>";
} else if (!regPwd.test(pwd)) {
errMsg = "<span class='pwdMsg' style='color:red;'>格式錯(cuò)誤</span>";
} else {
errMsg = "<span class='pwdMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "pwd2") {
$(".pwd2Msg").remove();
var pwd2 = val.value;
var pwd = $("input")[3].value;
if (pwd2 == "" || pwd2.trim() == "" || !pwd2.equals(pwd)) {
errMsg = "<span class='pwd2Msg' style='color:red;'>兩次輸入密碼不一致</span>";
} else {
errMsg = "<span class='pwd2Msg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "phone") {
$(".phoneMsg").remove();
var phone = val.value;
var regPhone = /[13,15,18]\d{9}/;
if (phone == "" || phone.trim() == "") {
errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 手機(jī)號(hào)不能為空 < /span>"
} else if (!regPhone.test(phone)) {
errMsg = "<span class = 'phoneMsg' style = 'color:red;' > 格式錯(cuò)誤 < /span>"
} else {
errMsg = "<span class = 'phoneMsg' style = 'color:red;' > OK！ < /span>"
}
$(this).parent().append(errMsg);
} else if ($(val).attr("name") == "date") {
$(".dateMsg").remove();
var birthday = val.value;
var regDate = /(199\d|200\d)[-/](0\d|1[0-2])[-/](0\d|[1-2]\d|30|31)/;
if (birthday == "" || birthday.trim() == "") {
errMsg = "<span class='dateMsg' style='color:red;'>請(qǐng)輸入生日</span>";
} else if (!regDate.test(birthday)) {
errMsg = "<span class='dateMsg' style='color:red;'>格式錯(cuò)誤</span>";
} else {
errMsg = "<span class='dateMsg' style='color:red;'>OK！</span>";
}
$(this).parent().append(errMsg);
}
});
});
});
總結(jié)
以上所述是小編給大家介紹的JS+jQuery實(shí)現(xiàn)注冊(cè)信息的驗(yàn)證功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
javascript設(shè)計(jì)模式之中介者模式學(xué)習(xí)筆記
這篇文章主要為大家詳細(xì)介紹了javascript設(shè)計(jì)模式之中介者模式學(xué)習(xí)筆記，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-02-02
JavaScript的for循環(huán)中嵌套一個(gè)點(diǎn)擊事件的問題解決
本文主要介紹了JavaScript的for循環(huán)中嵌套一個(gè)點(diǎn)擊事件點(diǎn)擊一次彈出多個(gè)相同的值的解決方法，具有很好的參考價(jià)值。下面跟著小編一起來看下吧2017-03-03
Electron 使? electron-builder 打包應(yīng)用過程詳解
Electron應(yīng)用開發(fā)中,electron-builder是一個(gè)常用的打包工具,提供了多種自定義配置,不過,使用npm安裝electron-builder時(shí)可能會(huì)遇到下載依賴慢或失敗的問題,本文給大家介紹Electron 使? electron-builder 打包應(yīng)用的相關(guān)操作,感興趣的朋友一起看看吧2024-10-10
修改layui的后臺(tái)模板的左側(cè)導(dǎo)航欄可以伸縮的方法
今天小編就為大家分享一篇修改layui的后臺(tái)模板的左側(cè)導(dǎo)航欄可以伸縮的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09
這篇文章主要為大家介紹了uniapp如何使用定位過程示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-10-10
在JavaScript中，for-in和for-of是兩種不同的循環(huán)結(jié)構(gòu)，本文主要介紹了js中for-in和for-of的區(qū)別，具有一定的參考價(jià)值，感興趣的可以了解一下2023-12-12
詳解JS中的堆棧,事件循環(huán),執(zhí)行上下文和作用域以及閉包
這篇文章主要為大家詳細(xì)介紹了JavaScript中的堆棧,事件循環(huán),執(zhí)行上下文和作用域以及閉包的相關(guān)知識(shí),文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2024-01-01
uni-app的h5頁面中onHide/onUnload方法不觸發(fā)的問題解決方法
uni-app的頁面的生命周期包括onInit、onLoad、onShow、onReady、onHide和onUnload等幾個(gè)階段,這篇文章主要給大家介紹了關(guān)于uni-app的h5頁面中onHide/onUnload方法不觸發(fā)的問題解決方法,需要的朋友可以參考下2023-12-12
JavaScript使用正則表達(dá)式獲取全部分組內(nèi)容的方法示例
這篇文章主要介紹了JavaScript使用正則表達(dá)式獲取全部分組內(nèi)容的方法,結(jié)合實(shí)例形式分析了javascript正則匹配的相關(guān)操作技巧,需要的朋友可以參考下2017-01-01
直接拿來用的頁面跳轉(zhuǎn)進(jìn)度條JS實(shí)現(xiàn)
這篇文章主要為大家分享了一款直接拿來用的頁面跳轉(zhuǎn)進(jìn)度條，由javascript實(shí)現(xiàn)，可以直接跳轉(zhuǎn)到相應(yīng)頁面，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01