jquery表單提交帶錯誤信息提示效果
更新時間：2017年03月09日 09:44:59 作者：IT白菜哥
本篇文章主要介紹了jquery表單提交帶錯誤信息提示效果的實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來看下吧
效果圖：
html代碼：
<form action="" method="" name="form2">
<div class="m_t30 error_div2">
<div>
我是
<select name="identity" id="ko" class="form-control">
<option></option>
<option value="investor">投資者</option>
<option value="developer">地產(chǎn)開發(fā)商</option>
</select>
</div>
<div>
<p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
</div>
</div>
<div class="m_t10 error_div2">
<div>
<input type="text" class="form-control" name="name" placeholder="用戶名">
</div>
<div>
<p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
</div>
</div>
<div class="m_t10 error_div2">
<div>
<input type="email" class="form-control" name="email" placeholder="電子郵箱">
</div>
<div>
<p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
</div>
</div>
<div class="m_t10 error_div2">
<div>
<input type="tel" class="form-control" name="phone" placeholder="手機(jī)">
</div>
<div>
<p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
</div>
</div>
<div class="m_t10 error_div2">
<div>
<select name="country" class="form-control">
<option></option>
<option>國家或地區(qū)</option>
<option value="1">中國</option>
<option value="2">美國</option>
</select>
</div>
<div>
<p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
</div>
</div>
<div class="m_t10 error_div2">
<div>
<select name="province" class="form-control">
<option></option>
<option>州/省</option>
<option value="1">廣東</option>
<option value="2">加州</option>
</select>
</div>
<div>
<p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
</div>
</div>
<div class="m_t10 error_div2">
<div>
<input type="password" class="form-control" name="pwd" placeholder="密碼">
</div>
<div>
<p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
</div>
</div>
<div class="m_t10 error_div2">
<div>
<input type="password" class="form-control" name="pwd2" placeholder="再次確認(rèn)密碼">
</div>
<div>
<p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注冊錯誤信息</p>
</div>
</div>
<div class="m_t10">
<div>
<button class="btn btn_login" type="button" onclick="btn_register()">下一步</button>
</div>
</div>
</form>
css代碼：
<style>
.m_t10 {
margin-top: 20px;
}
.error_p2 {
background-color: #FF6900;
color: white;
font-size: 10px;
padding: 5px;
border-radius: 5px;
display: none;
}
.error_p2 i {
margin-right: 5px;
}
</style>
js代碼
<!--注冊錯誤判斷form2-->
<script>
//定義要提交的所有數(shù)據(jù)為一個數(shù)組validate2，并且全部賦值為false
var validate2 = {
identity: false,
name: false,
phone: false,
email: false,
country: false,
province: false,
mail: false,
pwd: false,
pwd2: false
};
var msg = ""; //定義提示信息
//判斷角色
$('select[name=identity]', form2).blur(function() {
var identity = $(this).val();
var span = $(this).parents('.error_div2').find('.error_p2');
//判斷用戶名是否為空
if(identity == '') {
msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸入您的身份";
span.html(msg);
span.css('display', 'inline');
validate2.identity = false;
return;
} else {
msg = "";
span.css('display', 'none');
validate2.identity = true;
return;
}
})
// //判斷用戶名
$('input[name=name]', form2).blur(function() {
var name = $(this).val();
var span = $(this).parents('.error_div2').find('.error_p2');
//判斷用戶名是否為空
if(name == '') {
msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸入用戶名";
span.html(msg);
span.css('display', 'inline');
validate2.name = false;
return;
} else {
msg = "";
span.css('display', 'none');
validate2.name = true;
return;
}
})
//判斷手機(jī)
$('input[name=phone]', form2).blur(function() {
var phone = $(this).val();
var span = $(this).parents('.error_div2').find('.error_p2');
//判斷用戶名是否為空
if(phone == '') {
msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸入手機(jī)號";
span.html(msg);
span.css('display', 'inline');
validate2.phone = false;
return;
} else {
msg = "";
span.css('display', 'none');
validate2.phone = true;
return;
}
})
//判斷國家
$('select[name=country]', form2).blur(function() {
var country = $(this).val();
var span = $(this).parents('.error_div2').find('.error_p2');
//判斷用戶名是否為空
if(country == '') {
msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸入國家";
span.html(msg);
span.css('display', 'inline');
validate2.country = false;
return;
} else {
msg = "";
span.css('display', 'none');
validate2.country = true;
return;
}
})
//判斷省份
$('select[name=province]', form2).blur(function() {
var province = $(this).val();
var span = $(this).parents('.error_div2').find('.error_p2');
//判斷用戶名是否為空
if(province == '') {
msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸入省或州";
span.html(msg);
span.css('display', 'inline');
validate2.province = false;
return;
} else {
msg = "";
span.css('display', 'none');
validate2.province = true;
return;
}
})
//判斷郵政編碼
$('input[name=mail]', form2).blur(function() {
var mail = $(this).val();
var span = $(this).parents('.error_div2').find('.error_p2');
//判斷用戶名是否為空
if(mail == '') {
msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請輸郵政編碼";
span.html(msg);
span.css('display', 'inline');
validate2.mail = false;
return;
} else {
msg = "";
span.css('display', 'none');
validate2.mail = true;
return;
}
})
//判斷email
$('input[name=email]', form2).blur(function() {
var email = $(this).val();
var reg = /\w+[@]{1}\w+[.]\w+/;
var span = $(this).parents('.error_div2').find('.error_p2');
if(email == '') {
msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "請?zhí)顚戉]箱";
span.html(msg);
span.css('display', 'inline');
validate2.eamil = false;
return;
} else if(reg.test(email) == false) {
msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "郵箱格式不正確";
span.html(msg);
span.css('display', 'inline');
validate2.email = false;
return;
} else {
msg = "";
span.css('display', 'none');
validate2.email = true;
return;
}
})
//判斷密碼
$('input[name=pwd]', form2).blur(function() {
var pwd = $(this).val();
var span = $(this).parents('.error_div2').find('.error_p2');
//判斷用戶名是否為空
if(pwd == '') {
msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "密碼不能為空";
span.html(msg);
span.css('display', 'inline');
validate2.pwd = false;
return;
} else {
msg = "";
span.css('display', 'none');
validate2.pwd = true;
return;
}
})
//判斷再次確認(rèn)密碼
$('input[name=pwd2]', form2).blur(function() {
var pwd2 = $(this).val();
var span = $(this).parents('.error_div2').find('.error_p2');
//判斷用戶名是否為空
if(pwd2 == '') {
msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "確認(rèn)密碼不能為空";
span.html(msg);
span.css('display', 'inline');
validate2.pwd2 = false;
return;
} else if(pwd2 != $('input[name=pwd]', form2).val()) {
msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "確認(rèn)密碼與密碼不一致";
span.html(msg);
span.css('display', 'inline');
validate2.pwd2 = false;
return;
} else {
msg = "";
span.css('display', 'none');
validate2.pwd2 = true;
return;
}
})
//提交表單，isOK的值是所有提交信息的true，false判斷，
//只要有一個為false，isOK的值就是false，
//isOK值為false的話就全部執(zhí)行一次表單元素的失去焦點(diǎn)事件，從而提示錯誤信息
//isOK值為true的話才提交表單。
//因?yàn)橛行╉撁婵赡懿恢挂粋€需要提交的表單或者有些表單元素的name重復(fù)，所以根據(jù)form name=".. "，來區(qū)分元素失去事件，這里是form2就是對應(yīng)的<form name>
function btn_register() {
var isOK = validate2.identity && validate2.name && validate2.phone && validate2.email && validate2.mail && validate2.country && validate2.province && validate2.pwd && validate2.pwd2;
var form2 = $('form[name=form2]');
if(isOK) {
//。。。執(zhí)行提交事件
form2.submit();
} else {
$('select[name=identity]', form2).trigger('blur');
$('input[name=name]', form2).trigger('blur');
$('input[name=phone]', form2).trigger('blur');
$('input[name=email]', form2).trigger('blur');
$('input[name=mail]', form2).trigger('blur');
$('select[name=country]', form2).trigger('blur');
$('select[name=province]', form2).trigger('blur');
$('input[name=pwd]', form2).trigger('blur');
$('input[name=pwd2]', form2).trigger('blur');
}
}
</script>
簡要說明：
//執(zhí)行對應(yīng)表單元素的失去焦點(diǎn)事件$('input[name=XX]',formX).blur()
//定義對應(yīng)的參數(shù)來獲取值，如:var pwd=$(this).val();
//定義參數(shù)獲取對應(yīng)錯誤提示信息的標(biāo)簽元素對象，這里的是var span = $(this).parents('.error_div2').find('.error_p2');
//簡要說明.parents('')方法獲取的是祖先元素為（'.error_div2'），看清楚有帶"s"，簡單來說如果.error_div2是當(dāng)前元素的上三級$('this').parent().parent().parent()，而用$('this').parents('.error_div2')能一步到位獲取到該元素對象，而find('')方法剛好相反，一步到位的獲取對應(yīng)后輩元素對象
//然后就是根據(jù)條件判斷，判斷的正則表達(dá)式我就不一 一舉例了（因?yàn)槲乙灿洸蛔∧敲炊? =、），是否符合返回對應(yīng)的數(shù)組元素true、false值，實(shí)現(xiàn)隱藏錯誤提示，并且給數(shù)組validate2的值賦值。
//最后提交表單時，再次執(zhí)行判斷isOK是否為true
//isOK值為false的話就全部執(zhí)行一次表單元素的失去焦點(diǎn)事件，從而提示錯誤信息
//isOK值為true的話才提交表單。
//ps:表單里的button元素如果不是提交按鈕，記得將type=“button”，否則默認(rèn)是type=“submit”，點(diǎn)擊就會提交;
寫在最后的話：
樣式和布局沒怎么設(shè)置好，頁面效果欠佳，深感抱歉
還是那句話，寫jq先想好要獲取哪些對象，執(zhí)行什么事件，最后什么元素對象達(dá)到怎樣的效果，parents和find方法和省事，不過使用時注意嵌套好div達(dá)到整體性效果
以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時也希望多多支持腳本之家！
您可能感興趣的文章:
- jquery實(shí)現(xiàn)ajax提交表單信息的簡單方法(推薦)
- jquery ajax提交表單數(shù)據(jù)的兩種方式
- jquery實(shí)現(xiàn)ajax提交form表單的方法總結(jié)
- jQuery使用ajaxSubmit()提交表單示例
- JQuery通過Ajax提交表單并返回結(jié)果
- JQuery打造PHP的AJAX表單提交實(shí)例
- jQuery ajax中使用serialize()方法提交表單數(shù)據(jù)示例
- jquery序列化form表單使用ajax提交后處理返回的json數(shù)據(jù)
- jquery下異步提交表單 異步跨域提交表單
- jQuery實(shí)現(xiàn)form表單基于ajax無刷新提交方法詳解
相關(guān)文章
jQuery Checkbox 全選 反選的簡單實(shí)例
本文主要介紹了Checkbox的全選、反選的簡單實(shí)例,需要的朋友可以參考下2016-11-11
從零開始學(xué)習(xí)jQuery (一) 開天辟地入門篇
本篇文章是入門第一篇, 主要是簡單介紹jQuery, 通過簡單示例指導(dǎo)大家如何編寫jQuery代碼以及搭建開發(fā)環(huán)境. 詳細(xì)講解了如何在Visual Studio中配合使用jQuery.2010-10-10
Jquery截取中文字符串的實(shí)現(xiàn)代碼，需要的朋友可以參考下。2010-12-12
這篇文章主要介紹了jquery滾動加載數(shù)據(jù)的方法,實(shí)例分析了jQuery動態(tài)加載數(shù)據(jù)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03
jQuery中對節(jié)點(diǎn)進(jìn)行操作的相關(guān)介紹
本篇文章小編將為大家介紹，在jQuery中對節(jié)點(diǎn)進(jìn)行操作的解決辦法，有需要的朋友可以參考一下2013-04-04
JQUERY 對象與DOM對象之兩者相互間的轉(zhuǎn)換
jquery對象的相應(yīng)方法DOM對象不能使用，而DOM對象的相應(yīng)方法jquery也不能使用。所以在具體項(xiàng)目中要注意Jquery對象與DOM對象的轉(zhuǎn)換問題2009-04-04
jQuery 開發(fā)之EasyUI 添加數(shù)據(jù)的實(shí)例
這篇文章主要介紹了jQuery 開發(fā)之EasyUI 添加數(shù)據(jù)的實(shí)例的相關(guān)資料,希望通過本文能幫助到大家，讓大家理解掌握這部分內(nèi)容，需要的朋友可以參考下2017-09-09
這篇文章主要為大家詳細(xì)介紹了最原始的jQuery注冊驗(yàn)證方式,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
jQuery實(shí)現(xiàn)立體式數(shù)字動態(tài)增加（animate方法）
本文主要分享了基于jQuery實(shí)現(xiàn)立體式數(shù)字動態(tài)增加（animate方法）的實(shí)例代碼。有很好的參考價(jià)值，需要的朋友一起來看下吧2016-12-12
jQuery+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query+正則+文本框只能輸入數(shù)字的實(shí)現(xiàn)方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-10-10