使用JQuery實(shí)現(xiàn)智能表單驗(yàn)證功能

當(dāng)前位置：首頁 > 范文|應(yīng)用文 > IT技術(shù)專欄 > 網(wǎng)絡(luò)編程

來源：易賢網(wǎng) 閱讀：1059 次日期：2016-07-22 15:26:41

溫馨提示：易賢網(wǎng)小編為您整理了“使用JQuery實(shí)現(xiàn)智能表單驗(yàn)證功能”,方便廣大網(wǎng)友查閱！

先給大家展示下表單效果圖，具體效果如下所示：

1.前臺一開始用JQuery實(shí)現(xiàn)，先來上HTML標(biāo)記:

<body>

</table>

</form>

</body>

2,然后是CSS代碼:

.tble

{

font-size:14px;

text-align:right;

position:absolute;

left:550px;

top:150px;

}

.td

{

border:2px #CCCCCC solid;

}

.btton1

{

position:absolute;

left:65px;

}

.btton2

{

position:absolute;

left:110px;

}

.span

{

color:#cccccc;

font-size:14px;

text-align:right;

}

.spanPwd2

{

color:Red;

}

.spanPwd3

{

color:Red;

}

.spanPwd4

{

color:Red;

}

.spanPwd5

{

color:Green;

}

.spanPwd6

{

color:Red;

}

</style>

3.編寫JQUery代碼前需要引入JQuery支持文件:

4.現(xiàn)在開始編寫JQuery代碼:

$(function () {

GetStyle();

GetPassword();

GetEmail();

function GetStyle() {

$("input.td").focus(function () {

//===================密碼樣式處理===================================

$(this).css("border", "2px #00ccff solid");

var span = "<td class='span'><span>請輸入密碼</span></td>";

$(this).parent().parent().find("td.td2").after(span);

$(this).parent().parent().find("td.spanPwd2").remove();

$(this).parent().parent().find("td.spanPwd3").remove();

$(this).parent().parent().find("td.spanPwd4").remove();

$(this).parent().parent().find("td.spanPwd5").remove();

//==================================================================

//================郵箱樣式處理==============================

$(this).css("border", "2px #00ccff solid");

var spanEmail = "<td class='span'><span>請輸入正確郵箱地址</span></td>";

$(this).parent().parent().find("td.td3").after(spanEmail);

$(this).parent().parent().find("td.spanPwd6").remove();

$(this).parent().parent().find("td.spanPwd5").remove();

//===================用戶名樣式處理========================

$(this).css("border", "2px #00ccff solid");

var spanEmail = "<td class='span'><span>請輸入正確用戶名</span></td>";

$(this).parent().parent().find("td.td1").after(spanEmail);

$(this).parent().parent().find("td.spanPwd6").remove();

$(this).parent().parent().find("td.spanPwd5").remove();

})

}

//================確認(rèn)密碼的驗(yàn)證================================

//非空驗(yàn)證

//確認(rèn)密碼與原密碼一致性的驗(yàn)證

function GetPassword() {

$("input.td").blur(function () {

//================密碼驗(yàn)證=================================

//非空驗(yàn)證

if ($(this).val() == "") {

$(this).css("border", "2px red solid");

$(this).parent().parent().find("td.span").remove();

var span = "<td class='spanPwd2'><span>密碼不能為空!</span></td>";

$(this).parent().parent().find("td.td2").after(span);

return false;

}

//密碼長度的驗(yàn)證

else if ($(this).val().length < 6 || $(this).val().length > 12) {

$(this).css("border", "2px red solid");

$(this).parent().parent().find("td.span").remove();

var span = "<td class='spanPwd3'><span>密碼長度必須為6位到12位之間!</span></td>";

$(this).parent().parent().find("td.td2").after(span);

return false;

}

//如果密碼不為數(shù)字

else if (isNaN($(this).val()) == true) {

$(this).css("border", "2px red solid");

$(this).parent().parent().find("td.span").remove();

var span = "<td class='spanPwd4'><span>密碼必須為數(shù)字!</span></td>";

$(this).parent().parent().find("td.td2").after(span);

return false;

}

else {

//密碼格式通過

$(this).css("border", "2px #cccccc solid");

$(this).parent().parent().find("td.span").remove();

var span = "<td class='spanPwd5'><span>密碼格式通過!</span></td>";

$(this).parent().parent().find("td.td2").after(span);

return true;

}

});

}

//=====================郵箱驗(yàn)證開始========================

function GetEmail() {

$(".td3 input").blur(function () {

var patten = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);

//非空驗(yàn)證

if ($(".td3 input").val() == "") {

$(this).css("border", "2px red solid");

$(this).parent().parent().find("td.span").remove();

var spanxEmail = "<td class='spanPwd6'><span>郵箱不能為空!</span></td>";

$(this).parent().parent().find("td.td3").after(spanxEmail);

return false;

}

//郵箱格式驗(yàn)證

else if (patten.test($(".td3 input").val()) == false) {

$(this).css("border", "2px red solid");

$(this).parent().parent().find("td.span").remove();

var span = "<td class='spanPwd4'><span>郵箱格式不正確，請重新填寫 !</span></td>";

$(this).parent().parent().find("td.td3").after(span);

return false;

} else {

//郵箱格式通過

$(this).css("border", "2px #cccccc solid");

$(this).parent().parent().find("td.span").remove();

var spanEmail = "<td class='spanPwd5'><span>郵箱格式通過!</span></td>";

$(this).parent().parent().find("td.td3").after(spanEmail);

return true;

}

});

}

//==========================郵箱驗(yàn)證結(jié)束============================

//================用戶名驗(yàn)證=================================

function GetUserName() {

$(".td1 input").blur(function () {

//非空驗(yàn)證

if ($(this).val == "") {

$(this).css("border", "2px red solid");

$(this).parent().parent().find("td.span").remove();

var span = "<td class='spanPwd6'><span>用戶名郵箱不能為空!</span></td>";

$(this).parent().parent().find("td.td1").after(span);

return false;

}

//用戶名長度的驗(yàn)證

else if ($(this).length < 4 || $(this).length > 20) {

$(this).css("border", "2px red solid");

$(this).parent().parent().find("td.span").remove();

var spanxEmail = "<td class='spanPwd6'><span>用戶名格式不對，只能輸入4-20字符!</span></td>";

$(this).parent().parent().find("td.td1").after(spanxEmail);

return false;

}

//用戶名格式驗(yàn)證通過

else {

$(this).css("border", "2px #cccccc solid");

$(this).parent().parent().find("td.span").remove();

var spanUserName = "<td class='spanPwd5'><span>用戶名格式通過!</span></td>";

$(this).parent().parent().find("td.td3").after(spanUserName);

return true;

}

});

}

//========================點(diǎn)擊按鈕與服務(wù)器互交驗(yàn)證==============

$("tr td input.btton1").click(function () {

if (GetUserName() && GetEmail() && GetPassword()) {

var userName = $("td.td1 input").val(); //用戶名

var userPwd = $("td.td2 input").val(); //密碼

var userRepass = $("td.td3 input").val(); //確認(rèn)密碼

var email = $("td.td4 input").val(); //郵箱

GetAjax(userName, userPwd, userRepass, email);

}

});

function GetAjax(userName, userPwd, userRepass, email) {

var json = [{ "userName": userName, "userPwd": userPwd, "userRepass": userRepass, "email": email}];

$.post("ProcessResult.aspx?jon=" + json, function (data) {

if (data == "false") {

alert("用戶名重復(fù)了，請重新輸入!");

} else if (data == "ok") {

alert("注冊成功!");

} else {

alert("對不起，你的輸入有誤,請檢查輸入");

}

})

}

});

</script>

5,實(shí)現(xiàn)如下效果:

我沒有實(shí)現(xiàn)后臺JQuery校驗(yàn)，下次有機(jī)會一并補(bǔ)上，這次先寫到這里，只實(shí)現(xiàn)純前端的效果。

關(guān)于使用JQuery實(shí)現(xiàn)智能表單驗(yàn)證功能的相關(guān)知識就給大家介紹到這里，希望對大家有所幫助！

更多信息請查看網(wǎng)絡(luò)編程

上一篇：js獲取當(dāng)前日期時間及其它日期操作匯總

下一篇：js表單處理中單選、多選、選擇框值的獲取及表單的序列化

易賢網(wǎng)手機(jī)網(wǎng)站地址：使用JQuery實(shí)現(xiàn)智能表單驗(yàn)證功能

由于各方面情況的不斷調(diào)整與變化，易賢網(wǎng)提供的所有考試信息和咨詢回復(fù)僅供參考，敬請考生以權(quán)威部門公布的正式信息和咨詢?yōu)闇?zhǔn)！

相關(guān)閱讀網(wǎng)絡(luò)編程

Shell中如何刪除文本比較長的行的實(shí)現(xiàn)方法10月30日

vue.js語法及常用指令10月30日

python 讀寫中文json的實(shí)例詳解10月30日

Objective-C Json 實(shí)例詳解10月30日

bootstrap table sum總數(shù)量統(tǒng)計(jì)實(shí)現(xiàn)方法10月30日

python生成二維碼的實(shí)例詳解10月30日

Python批量更改文件名的實(shí)現(xiàn)方法10月30日

解決出現(xiàn)Incorrect integer value的問題10月30日

jQuery實(shí)現(xiàn)切換隱藏與顯示同時切換圖標(biāo)功能10月30日

docker python api 安裝配置的詳解10月30日

javascript按鈕禁用和啟用的效果實(shí)例代碼10月30日

vue.js todolist實(shí)現(xiàn)代碼10月30日

vue.js 父向子組件傳參的實(shí)例代碼10月30日

apache 開啟重定向 rewrite的實(shí)現(xiàn)方法10月30日

Vue.js劃分組件的方法10月30日

python logging日志模塊的詳解10月30日

vue中的scope使用詳解10月30日

docker cgroup 資源監(jiān)控的詳解10月30日

使用Android Studio 開發(fā)自己的SDK教程10月23日

linux系統(tǒng)下MongoDB單節(jié)點(diǎn)安裝教程10月23日

易賢網(wǎng)移動網(wǎng)站

2026上岸·考公考編培訓(xùn)報(bào)班

報(bào)班類型
姓名
手機(jī)號
驗(yàn)證碼

茄子在线看片免费人成视频,午夜福利精品a在线观看,国产高清自产拍在线观看,久久综合久久狠狠综合