jquery驗(yàn)證表單中的單選與多選實(shí)例
例如下的選項(xiàng)中,我們要求帶*的是必選的,看圖:
看到上面網(wǎng)頁沒?業(yè)務(wù)辦理渠道下的多選必須要選中一個(gè),怎么辦?如果一個(gè)都沒有選中,在表單提交的時(shí)候我們就要去提示錯(cuò)誤信息,,,。大家都知道jquery驗(yàn)證input是非常簡單的,卻很少要去驗(yàn)證多選或單選,而且還是一組組的驗(yàn)證,是分了組的,并非頁面上的所有??!怎么辦呢?
不用jquery用其他的,可以嗎?可以?。。〔贿^我們還是用jquery來實(shí)它。
先來看一下,沒有選中的效果,我們應(yīng)該是這樣:
假設(shè)選中了一個(gè),提示信息馬上消失,如下圖:
其實(shí)這個(gè)可以用jsmap來實(shí)現(xiàn) 也就是用js模擬map來做。以下的代碼是公用的,以后遇到這種情況,直接把下面js代碼拷入,做一下配置就可以實(shí)現(xiàn)了。
用下面的代碼,你必須要引入jquery驗(yàn)證的js
代碼如下:
首先,把下面的js代碼放入你的js文件里,或是頁面中:
/**
* 數(shù)組存儲器 主要是為了方便juery驗(yàn)證chckbox而設(shè)計(jì) 數(shù)組存儲器,配置對象,為驗(yàn)證checkbox 和單選。
* 私有變量區(qū)定義數(shù)組
* 然后把每一個(gè)數(shù)組配置到setting里面,這樣這個(gè)數(shù)組就存在于存儲器中
* 在應(yīng)用的時(shí)候用數(shù)組名即可方便地操作和得到不同的數(shù)組。
* 當(dāng)你需要某個(gè)數(shù)組的時(shí)候,如果你只操作一個(gè)數(shù)組那這個(gè)方法是多于的,但如果你操作多個(gè)數(shù)組或只有數(shù)組名的情況下,這個(gè)存儲器就很有用。
* @author 電子科大科園 莊濮向
* @return 數(shù)組存儲器對象
*/
var MapArr = (function () {
var BHC = [], BCC = [], BQC = [], IC = [];
var BAC = [];
var BUC = [];
var setting = [
{
key: "BHC",
value: BHC
},
{
key: "BAC",
value: BAC
}, { key: "BUC", value: BUC }, { key: "BCC", value: BCC }, { key: "BQC", value: BQC }, {key:"IC",value:IC}
];
return {
//通過數(shù)組名得到數(shù)組織
getArr: function (arr_name) {
for (var setting_i = 0, setting_len = setting.length; setting_i < setting_len; setting_i++) {
if (setting[setting_i].key == arr_name) {
return setting[setting_i].value;
}
}
},
//刪除指定數(shù)組中的某一個(gè)元素
delArr: function (arr_name, elementValue) {
for (var delArr_i = 0, delArr_len = setting.length; delArr_i < delArr_len; delArr_i++) {
if (setting[delArr_i].key == arr_name) {
for (var arr_i = 0, arr_len = setting[delArr_i].value.length; arr_i < arr_len; arr_i++) {
if (setting[delArr_i].value[arr_i] == elementValue) {
setting[delArr_i].value.splice(arr_i, 1);
}
}
}
}
},
//向某一個(gè)數(shù)組中添加一個(gè)元素
pushArr: function (arr_name, elementValue) {
for (var pushArr_i = 0, pushArr_len = setting.length; pushArr_i < pushArr_len; pushArr_i++) {
if (setting[pushArr_i].key == arr_name) {
setting[pushArr_i].value.push(elementValue);
}
}
}
}
} ());
/**
*復(fù)選框或單選的點(diǎn)擊事件 應(yīng)用到了上面的map
* @author 電子科大科園 莊濮向
* @return 數(shù)組存儲器對象
*/
function chk(event, arrName) {
if (event.checked == true) {
//向名為arrName的數(shù)組中添加一個(gè)元素
MapArr.pushArr(arrName, event.value);
} else {
//在名為arrName的數(shù)組中去除一個(gè)元素
MapArr.delArr(arrName, event.value);
}
var checkInput = document.getElementById(arrName);
if (MapArr.getArr(arrName)[0] == 'undefined' || MapArr.getArr(arrName)[0] == null) {
checkInput.value = null; //把這個(gè)數(shù)組的值給他。 這樣的話,就起到了驗(yàn)證的效果
} else {
checkInput.value = MapArr.getArr(arrName)[0];
}
//如何讓提示信息在加入值過后就消失掉?
if (!$("#form1").valid()) return false; //只是為了讓這一章展開的消失,所以千萬不要去運(yùn)行提交的那個(gè)check,會影響章節(jié)的顯示
}
二:在你需要驗(yàn)證的多選或單選的那一組標(biāo)題后面加入一個(gè)input:
<input id="BAC" name="BAC" type="text" style="width:0;height:0;border:0" class="required" />
三:在你的checkbox或是radio標(biāo)簽內(nèi)加入事件:
onclick="chk(this,'BAC')"
四:一致性:在"二"中的那個(gè)input是用來作提示信息的,所以你的id 和name 一定要有,且名字要一致,如上就是:id="BAC", name="BAC" ,input寫好過后,在加入事件的時(shí)候,你第二個(gè)參數(shù)要與input的id同名,也要是BAC;
五:配置,面子做好了,就是核心的配置了,這個(gè)配置在哪兒配呢,就是叫你引入的我上面的js代碼中。onclick="chk(this,'BAC')",是給每一個(gè)復(fù)選或單選加事件,同時(shí)還有一個(gè)意思,說明要把這個(gè)復(fù)選應(yīng)用到BAC這個(gè)數(shù)組中,所以,我們?nèi)etting中配置一個(gè)數(shù)組。
在MapArr中加入一個(gè)數(shù)組:
var BAC=[];
在MapArr的setting中加入一個(gè)對象:
{
key:"BAC",
value:BAC
}
千萬要保證一致性,不然不會成功。
重點(diǎn):input的id同onclick的第二個(gè)參數(shù)一致 MapArr中加入的數(shù)組變量的變量名與input的id一致,setting中的key的值同input的id一致 setting 中的value的值是你配置的這個(gè)數(shù)組。好啦,現(xiàn)在就可以實(shí)現(xiàn)驗(yàn)證了。
- 基于jquery實(shí)現(xiàn)的可以編輯選擇的下拉框的代碼
- jquery對單選框,多選框,文本框等常見操作小結(jié)
- jQuery對下拉框,單選框,多選框的操作
- jquery取消選擇select下拉框示例代碼
- jQuery實(shí)現(xiàn)下拉框左右選擇的簡單實(shí)例
- JQuery設(shè)置時(shí)間段下拉選擇實(shí)例
- jQuery實(shí)現(xiàn)下拉框選擇圖片功能實(shí)例
- jQuery實(shí)現(xiàn)非常實(shí)用漂亮的select下拉菜單選擇效果
- 自定義Angular指令與jQuery實(shí)現(xiàn)的Bootstrap風(fēng)格數(shù)據(jù)雙向綁定的單選與多選下拉框
- 基于jQuery實(shí)現(xiàn)select下拉選擇可輸入附源碼下載
- 基于jQuery下拉選擇框插件支持單選多選功能代碼
相關(guān)文章
jquery使用$(element).is()來判斷獲取的tagName
這篇文章主要介紹了jquery使用$(element).is()來判斷獲取的tagName以及將取到標(biāo)簽用作到別的地方,需要的朋友可以參考下2014-08-08jQuery晃動(dòng)層特效實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery晃動(dòng)層特效實(shí)現(xiàn)方法,實(shí)例分析了animate方法與css樣式的操作技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-03-03Jquery動(dòng)態(tài)改變圖片IMG的src地址示例
改變圖片IMG的鏈接地址在某些特殊情況下實(shí)現(xiàn)特殊的功能還是比較不錯(cuò)的,下面為大家詳細(xì)介紹下使用jquery改變圖片IMG的鏈接地址,感興趣的朋友可以參考下哈2013-06-06jQuery針對input的class屬性寫了多個(gè)值情況下的選擇方法
這篇文章主要介紹了jQuery針對input的class屬性寫了多個(gè)值情況下的選擇方法,結(jié)合實(shí)例形式對比分析了jQuery選擇器針對class屬性中有多個(gè)值情況下的選中方法,需要的朋友可以參考下2016-06-06基于jquery實(shí)現(xiàn)的服務(wù)器驗(yàn)證控件的啟用和禁用代碼
用戶點(diǎn)擊下一步時(shí),不對Display=none的新增區(qū)域表單進(jìn)行驗(yàn)證,需要在用戶點(diǎn)擊“取消增加時(shí)”,禁用服務(wù)器驗(yàn)證控件。反之,啟用服務(wù)器驗(yàn)證控件。2010-04-04JQuery 自定義CircleAnimation,Animate方法學(xué)習(xí)筆記
最近對看了一些JQuery的基礎(chǔ)教程,被JQuery深深的吸引住了,以前用過Extjs,看了JQuery不禁感嘆,javascript還能這么些,真是太神奇了!2011-07-07