jquery验证表单中的单选与多选实例
jquery验证表单中的单选与多选实例
发布时间:2016-12-30 来源:查字典编辑
摘要:例如下的选项中,我们要求带*的是必选的,看图:看到上面网页没?业务办理渠道下的多选必须要选中一个,怎么办?如果一个都没有选中,在表单提交的时...

例如下的选项中,我们要求带*的是必选的,看图:

jquery验证表单中的单选与多选实例1

看到上面网页没?业务办理渠道下的多选必须要选中一个,怎么办?如果一个都没有选中,在表单提交的时候我们就要去提示错误信息,,,。大家都知道jquery验证input是非常简单的,却很少要去验证多选或单选,而且还是一组组的验证,是分了组的,并非页面上的所有!!怎么办呢?

不用jquery用其他的,可以吗?可以!!!不过我们还是用jquery来实它。

先来看一下,没有选中的效果,我们应该是这样:

jquery验证表单中的单选与多选实例2

假设选中了一个,提示信息马上消失,如下图:

jquery验证表单中的单选与多选实例3

其实这个可以用jsmap来实现 也就是用js模拟map来做。以下的代码是公用的,以后遇到这种情况,直接把下面js代码拷入,做一下配置就可以实现了。

用下面的代码,你必须要引入jquery验证的js

代码如下:

首先,把下面的js代码放入你的js文件里,或是页面中:

复制代码 代码如下:

/**

* 数组存储器 主要是为了方便juery验证chckbox而设计 数组存储器,配置对象,为验证checkbox 和单选。

* 私有变量区定义数组

* 然后把每一个数组配置到setting里面,这样这个数组就存在于存储器中

* 在应用的时候用数组名即可方便地操作和得到不同的数组。

* 当你需要某个数组的时候,如果你只操作一个数组那这个方法是多于的,但如果你操作多个数组或只有数组名的情况下,这个存储器就很有用。

* @author 电子科大科园 庄濮向

* @return 数组存储器对象

*/

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 {

//通过数组名得到数组织

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;

}

}

},

//删除指定数组中的某一个元素

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);

}

}

}

}

},

//向某一个数组中添加一个元素

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);

}

}

}

}

} ());

/**

*复选框或单选的点击事件 应用到了上面的map

* @author 电子科大科园 庄濮向

* @return 数组存储器对象

*/

function chk(event, arrName) {

if (event.checked == true) {

//向名为arrName的数组中添加一个元素

MapArr.pushArr(arrName, event.value);

} else {

//在名为arrName的数组中去除一个元素

MapArr.delArr(arrName, event.value);

}

var checkInput = document.getElementById(arrName);

if (MapArr.getArr(arrName)[0] == 'undefined' || MapArr.getArr(arrName)[0] == null) {

checkInput.value = null; //把这个数组的值给他。 这样的话,就起到了验证的效果

} else {

checkInput.value = MapArr.getArr(arrName)[0];

}

//如何让提示信息在加入值过后就消失掉?

if (!$("#form1").valid()) return false; //只是为了让这一章展开的消失,所以千万不要去运行提交的那个check,会影响章节的显示

}

二:在你需要验证的多选或单选的那一组标题后面加入一个input:

复制代码 代码如下:

<input id="BAC" name="BAC" type="text" />

三:在你的checkbox或是radio标签内加入事件:

复制代码 代码如下:

onclick="chk(this,'BAC')"

四:一致性:在"二"中的那个input是用来作提示信息的,所以你的id 和name 一定要有,且名字要一致,如上就是:id="BAC", name="BAC" ,input写好过后,在加入事件的时候,你第二个参数要与input的id同名,也要是BAC;

五:配置,面子做好了,就是核心的配置了,这个配置在哪儿配呢,就是叫你引入的我上面的js代码中。onclick="chk(this,'BAC')",是给每一个复选或单选加事件,同时还有一个意思,说明要把这个复选应用到BAC这个数组中,所以,我们去setting中配置一个数组。

在MapArr中加入一个数组:

复制代码 代码如下:

var BAC=[];

在MapArr的setting中加入一个对象:

复制代码 代码如下:

key:"BAC",

value:BAC

千万要保证一致性,不然不会成功。

重点:input的id同onclick的第二个参数一致 MapArr中加入的数组变量的变量名与input的id一致,setting中的key的值同input的id一致 setting 中的value的值是你配置的这个数组。好啦,现在就可以实现验证了。

推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
相关阅读
网友关注
最新Javascript教程学习
热门Javascript教程学习
编程开发子分类