jquery验证表单中的单选与多选实例 |
本文标签: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的值是你配置的这个数组 。好啦,现在就可以实现验证了 。 |