`
阅读更多

formValidator是一个很好的表单验证框架,由于才刚开始了解,用了只有几天,先把目前知道你的使用方法记下来,以后有发现再添加。

这里有一个很好地关于各个类型的使用的网址http://www.cnblogs.com/talk/archive/2012/01/29/2330887.html

我这里只是介绍一种例子,知道了一种使用,其他的就都会用了

首先是使用:

基本的包formValidator_min.js,formValidatorRegex.js,当然还有jQueri的包,直接官网下载,下面的文件中也有

使用很简单,比方说输入框是这样的

<input style="width: 200px;height:20px;" id="mobileTyp"/><span class="onError" style="padding-left:10px" id="mobileTypeTip">输入手机号码</span>

 注意两个id号的区别,js代码为

$("#mobileType").formValidator({ onshow: "内容不能为空", onfocus: "请输入手机号码", oncorrect: "<span style='color:green'>格式正确</span>" }).inputValidator({ min: 11, max: 11, onerror: "手机号码长度不对" }).regexValidator({ regexp: "mobile", datatype: "enum",onerror: "手机号码格式不正确" });

 好了,完成,输入内容的室友会有验证,表单提交的时候也有验证

今天遇到一个非常头疼的问题,验证文件上传,找各种例子找不到,官网的文档一点都不详细,弄了好久,关键是我的文件上传的输入框还是使用.append()方法加进去的,尝试了各种办法,一直没有弄出来,最后使用了functionValidator()方法才搞定的,代码如下:

$("#fileType").formValidator({ onshow: "文件不能为空", onfocus: "请输入文件", oncorrect: "<span style='color:green'>格式正确</span>" }).functionValidator({
				            fun: function (val, elem) {
					    alert(val);//为上传文件的路径和名字
						//chooseType为允许上传文件的格式,以加号分隔
				                for(var i=0;i<=chooseType.split('+').length;i++){
				                	chooseType = chooseType.replace("+","|");
				                }
				           	 //匹配格式
				      var m =val.split('.')[val.split('.').length-1].match(chooseType);
				           	if(m==null){
				           	 $("#fileType"+i+"Tip").html("格式错误");
				           		return false;
				           		} 
				$("#fileType"+i+"Tip").html("<span style='color:green'>正确</span>");
				           	return true;
				            }
				        }); 

 由于我也是刚开始使用该控件,所以我也有很多地方没弄明白,上面的代码是质量不怎么高,但是是可以用的,先用起来再说,以后有问题再改,欢迎大家参与讨论。

在使用checkbox的时候,使用该控件好像不行,反正我是没成功的,如果有人知道怎么使用该控件验证多选按钮,希望能分享一下,再此谢谢了。我最终解决多选按钮的方法是用js代码设置多选默认选中一项,而且至少选中一项,这样就不需要验证了。设置代码如下:

$('.checkboxType').change(function(){
					var c_chenked = 0
					for(var j=0;j<$('.checkboxType').length;j++){
						if($('.checkboxType')[j].checked){c_chenked++;}
					}
					if(c_chenked == 0){$(this)[0].checked=true;}
					});

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics