jquery验证表单中的单选与多选实例
例如下的选项中,我们要求带*的是必选的,看图: 看到上面网页没?业务办理渠道下的多选必须要选中一个,怎么办?如果一个都没有选中,在表单提交的时候我们就要去提示错误信息,,,。大家都知道jquery验证input是非常简单的,却很少要去验证多选或单选,而且还是一组组的验证,是分了组的,并非页面上的所有!!怎么办呢? 不用jquery用其他的,可以吗?可以!!!不过我们还是用jquery来实它。 先来看一下,没有选中的效果,我们应该是这样: 假设选中了一个,提示信息马上消失,如下图: 其实这个可以用jsmap来实现 也就是用js模拟map来做。以下的代码是公用的,以后遇到这种情况,直接把下面js代码拷入,做一下配置就可以实现了。 用下面的代码,你必须要引入jquery验证的js 代码如下: 首先,把下面的js代码放入你的js文件里,或是页面中: 复制代码 代码如下: /** * 数组存储器 主要是为了方便juery验证chckbox而设计 数组存储器,配置对象,为验证checkbox 和单选。 * 私有变量区定义数组 * 然后把每一个数组配置到setting里面,这样这个数组就存在于存储器中 * 在应用的时候用数组名即可方便地操作和得到不同的数组。 * 当你需要某个数组的时候,如果你只操作一个数组那这个方法是多于的,但如果你操作多个数组或只有数组名的情况下,这个存储器就很有用。 * @author 电子科大科园 庄濮向 * @return 数组存储器对象 */ var MapArr = (function () { var BHC = [],BCC = [],BQC = [],IC = []; var setting = [ },{ key: "BUC",value: BUC },{ key: "BCC",value: BCC },{ key: "BQC",value: BQC },{key:"IC",value:IC} return { //通过数组名得到数组织 } } ());
if (event.checked == true) { var checkInput = document.getElementById(arrName); 二:在你需要验证的多选或单选的那一组标题后面加入一个input: 复制代码 代码如下: <input id="BAC" name="BAC" type="text" style="width:0;height:0;border:0" class="required" /> 三:在你的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的值是你配置的这个数组。好啦,现在就可以实现验证了。 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |