页面特效 UI组件库 菜单导航 窗口特效 幻灯片滑动 图像相册 表单 选项卡 表格 评分星级 手风琴 文本链接 布局 日历 颜色选择器 按钮 图表 html5 提示 ExtJS 在线客服 其他特效 地图 树形控件 移动开发 BootStrap 滑动条 文件上传 表单验证 分页 播放器 Angular

强大的JQuery表单验证插件FormValidator(推荐)

表单 表单验证 HTML我帮您 1年前  次浏览
jQuery formValidator表单验证插件,它是基于jQuery类库,实现了js脚本于页面html代码的分离。你可以划分多个校验组,每个组的校验都是互不影响。对一个表单对象,你只需要写一行代码就可以轻松实现无数种(理论上)脚本控制。插件支持6种大的校验方式,分别是:inputValidator(针对input、textarea、select控件的字符长度、值范围、选择个数的控制)、compareValidator(提供2个对象的比较,目前可以比较字符串和数值型)、ajaxValidator(通过ajax到服务器上做数据校验)、regexValidator(提供可扩展的正则表达式库) 、functionValidator (可使用外部函数来做校验,可以当做过程处理)、passwordValidator(密码强度校验)。插件支持四种提示模式:固定提示层(FixTip)、自动构建提示层(AutoTip)、单个提示层跟随(SingleTip)、弹出提示内容(AlertTip)。插件支持换肤:默认情况下提供6套皮肤,其中包括58网、网易邮箱注册、百度注册等。 强大的JQuery表单验证插件FormValidator 1、校验功能可以扩展。 对中文、英文、数字、整数、实数、Email地址格式、基于HTTP协议的网址格式、电话号码格式、手机号码格式、货币格式、邮政编码、身份证号码、QQ号码、日期等等这些控制,别的表单校验控件是代码里写死的,而formValidator是通过外部js文件来扩展的,你可以通过写正则表达式和函数来无限的扩展这些功能。 2、实现了校验代码于html代码的完全分离。 你的所有信息都无需配置在校验表单元素上,你只要在js上配置你的信息。使美工(界面)和javascript工程师的工作不交织在一起 3、你只需写一行代码就能完成一个表单元素的所有校验。你只需要写一行代码就能完成一下所有的控制 支持所有类型客户端控件的校验 支持jQuery所有的选择器语法,只要控件有唯一ID和type属性 支持函数和正则表达式的扩展。提供扩展库formValidatorReg.js,你可以自由的添加、修改里面的内容。 支持2种校验模式。第一种:文字提示(showword模式);第二种:弹出窗口提示(showalert模式) 支持多个校验组。如果一个页面有多个提交按钮,分别做不同得提交,提交前要做不同的校验,所以你得用到校验组的功能。 支持4种状态的信息提示功能,可以灵活的控制4种状态是否显示。第一种:刚打开网页的时候进行提示;第二种:获得焦点的时候进行提示;第三种:失去焦点时,校验成功时候的提示;第四种:失去焦点时,校验失败的错误提示。 支持自动构建提示层。可以进行精确的定位。 支持自定义错误提示信息。 支持控件的字符长度、值范围、选择个数的控制。值范围支持数值型和字符型;选择的个数支持radio/checkbox/select三种控件 支持2个控件值的比较。目前可以比较字符串和数值型。 支持服务器端校验。 支持输入格式的校验。 4、支持多大4种提示模式。 固定提示层(FixTip)、自动构建提示层(AutoTip)、单个提示层跟随(SingleTip)、弹出提示内容(AlertTip) 5、支持换肤。 默认提供6套皮肤(ArrowSolidBox、Default、SolidBox、126、baidu、bull) 可以下载无数网友编辑的皮肤。
$(document).ready(function(){
	$.formValidator.initConfig({formID:"form1",theme:"ArrowSolidBox",submitOnce:true,
		onError:function(msg,obj,errorlist){
			$("#errorlist").empty();
			$.map(errorlist,function(msg){
				$("#errorlist").append("<li>" + msg + "</li>")
			});
			alert(msg);
		},
		ajaxPrompt : '有数据正在异步验证,请稍等...'
	});

	$("#us").formValidator({onShowText:"请输入用户名",onShow:"请输入用户名,只有输入\"maodong\"才是对的",onFocus:"用户名至少5个字符,最多10个字符",onCorrect:"该用户名可以注册"}).inputValidator({min:5,max:10,onError:"你输入的用户名非法,请确认"})//.regexValidator({regExp:"username",dataType:"enum",onError:"用户名格式不正确"})
	    .ajaxValidator({
		dataType : "html",
		async : true,
		url : "http://www.yhuan.com/Handler.ashx",
		success : function(data){
            if( data == "0" ) return true;
			return "该用户名不可用,请更换用户名";
		},
		buttons: $("#button"),
		error: function(jqXHR, textStatus, errorThrown){alert("服务器没有返回数据,可能服务器忙,请重试"+errorThrown);},
		onError : "该用户名不可用,请更换用户名",
		onWait : "正在对用户名进行合法性校验,请稍候..."
	}).defaultPassed();
	$("#password1").formValidator({onShow:"请输入密码",onFocus:"至少1个长度",onCorrect:"密码合法"}).inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"密码两边不能有空符号"},onError:"密码不能为空,请确认"});
	$("#password2").formValidator({onShow:"输再次输入密码",onFocus:"至少1个长度",onCorrect:"密码一致"}).inputValidator({min:1,empty:{leftEmpty:false,rightEmpty:false,emptyError:"重复密码两边不能有空符号"},onError:"重复密码不能为空,请确认"}).compareValidator({desID:"password1",operateor:"=",onError:"2次密码不一致,请确认"});
	$(":radio[name='xb_one']").formValidator({tipID:"sexTip",onShow:"请选择你的性别",onFocus:"没有第三种性别了,你选一个吧",onCorrect:"输入正确",defaultValue:["1"]}).inputValidator({min:1,max:1,onError:"性别忘记选了,请确认"});//.defaultPassed();
	$("#pic").formValidator({triggerEvent:"change",onShow:"请修改您的头像 ", onFocus:"图片格式可以为jpg|bmp|gif|ico|pcx|jpeg|tif|png|raw|tga ", onCorrect:"恭喜您,图片可用" }).inputValidator({min:1, empty:{leftEmpty:false,emptyError:"不允许有空格 "}, onError:"必须上传头像" }).regexValidator({regExp:"picture",dataType:"enum",onError:"图片格式不正确 " })

	$("#nl").formValidator({autoModify:true,onShow:"请输入的年龄(1-99岁之间)",onFocus:"只能输入1-99之间的数字哦",onCorrect:"恭喜你,你输对了"}).inputValidator({min:1,max:99,type:"value",onErrorMin:"你输入的值必须大于等于1",onError:"年龄必须在1-99之间,请确认"}).defaultPassed();
	$("#csny").formValidator({onShow:"请输入的出生日期",onFocus:"请输入的出生日期,不能全部是0哦",onCorrect:"你输入的日期合法"}).inputValidator({min:"1900-01-01",max:"2000-01-01",type:"string",onError:"日期必须在\"1900-01-01\"和\"2000-01-01\"之间"}).defaultPassed();
	$("#sfzh").formValidator({ajax:true,onShow:"请输入15或18位的身份证",onFocus:"输入15或18位的身份证",onCorrect:"输入正确"}).functionValidator({fun:isCardID});
	$("#email").formValidator({onShow:"请输入邮箱",onFocus:"邮箱6-100个字符,输入正确了才能离开焦点",onCorrect:"恭喜你,你输对了",defaultValue:"@"}).inputValidator({min:6,max:100,onError:"你输入的邮箱长度非法,请确认"}).regexValidator({regExp:"^([\\w-.]+)@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.)|(([\\w-]+.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(]?)$",onError:"你输入的邮箱格式不正确"});
	$("#xueli").formValidator({onShow:"请选择你的学历",onFocus:"学历必须选择",onCorrect:"谢谢你的配合",defaultValue:"a"}).inputValidator({min:1,onError: "你是不是忘记选择学历了!"}).defaultPassed();
	$("#ewjy").formValidator({onShow:"无论你输入什么都会提示你额外校验出错",onFocus:"如果你输入\"猫冬\",额外校验就会成功",onCorrect:"额外校验成功"}).inputValidator({min:1,onError:"这里至少要一个字符,请确认"}).functionValidator({
	    fun:function(val,elem){
	        if(val=="猫冬"){
			    return true;
		    }else{
			    return "额外校验失败,想额外校验通过,请输入\"猫冬\""
		    }
		}
	});
	$("#Tel_country").formValidator({tipID:"teltip",onShow:"请输入国家区号",onFocus:"国家区号2位数字",onCorrect:"恭喜你,你输对了",defaultValue:"86"}).regexValidator({regExp:"^\\d{2}$",onError:"国家区号不正确"});
	$("#Tel_area").formValidator({tipID:"teltip",onShow:"请输入地区区号",onFocus:"地区区号3位或4位数字",onCorrect:"恭喜你,你输对了"}).regexValidator({regExp:"^\\d{3,4}$",onError:"地区区号不正确"});
	$("#Tel_number").formValidator({tipID:"teltip",onShow:"请输入电话号码",onFocus:"电话号码7到8位数字",onCorrect:"恭喜你,你输对了"}).regexValidator({regExp:"^\\d{7,8}$",onError:"电话号码不正确"});
	$("#Tel_ext").formValidator({tipID:"teltip",onShow:"请输入分机号码",onFocus:"分机号码1到5位数字",onCorrect:"恭喜你,你输对了"}).regexValidator({regExp:"^\\d{1,5}$",onError:"分机号码不正确"});
	$(":checkbox[name='xqah_one']").formValidator({tipID:"test3Tip",onShow:"请选择你的兴趣爱好(至少选一个)",onFocus:"你至少选择1个",onCorrect:"恭喜你,你选对了"}).inputValidator({min:1,onError:"你选的个数不对"});
	$(":checkbox[name='xqah_more']").formValidator({tipID:"test2Tip",onShow:"请选择你的兴趣爱好(至少选择2个,最多选择3个)",onFocus:"你至少选择2个,最多选择3个",onCorrect:"恭喜你,你选对了",defaultValue:["7","8"]}).inputValidator({min:2,max:3,onError:"你选的个数不对(至少选择2个,最多选择3个)"});
	$(":radio[name='aiguo']").formValidator({tipID:"aiguoTip",onShow:"爱国的人一定要选哦",onFocus:"你得认真思考哦",onCorrect:"不知道你爱不爱,反正你是选了",defaultValue:["4"]}).inputValidator({min:1,max:1,onError:"难道你不爱国?你给我选!!!!"}).defaultPassed();
	$("#shouji").formValidator({empty:true,onShow:"请输入你的手机号码,可以为空哦",onFocus:"你要是输入了,必须输入正确",onCorrect:"谢谢你的合作",onEmpty:"你真的不想留手机号码啊?"}).inputValidator({min:11,max:11,onError:"手机号码必须是11位的,请确认"}).regexValidator({regExp:"mobile",dataType:"enum",onError:"你输入的手机号码格式不正确"});;
	$("#lxdh").formValidator({empty:true,onShow:"请输入你的联系电话,可以为空哦",onFocus:"格式例如:0577-88888888",onCorrect:"谢谢你的合作",onEmpty:"你真的不想留联系电话了吗?"}).regexValidator({regExp:"^(([0\\+]\\d{2,3}-)?(0\\d{2,3})-)?(\\d{7,8})(-(\\d{3,}))?$",onError:"你输入的联系电话格式不正确"});
	$("#sjdh").formValidator({empty:true,onShow:"请输入你的手机或电话,可以为空哦",onFocus:"格式例如:0577-88888888或11位手机号码",onCorrect:"谢谢你的合作",onEmpty:"你真的不想留手机或电话了吗?"}).regexValidator({regExp:["tel","mobile"],dataType:"enum",onError:"你输入的手机或电话格式不正确"});
	$("#selectmore").formValidator({onShow:"按住CTRL可以多选",onFocus:"按住CTRL可以多选,至少选择2个",onCorrect:"谢谢你的合作",defaultValue:["0","1","2"]}).inputValidator({min:2,onError:"至少选择2个"});
	$("#ms").formValidator({onShowText:"这家伙很懒,什么都没有留下。",onShow:"请输入你的描述",onFocus:"描述至少要输入10个汉字或20个字符",onCorrect:"恭喜你,你输对了",defaultValue:"这家伙很懒,什么都没有留下。"}).inputValidator({min:20,onError:"你输入的描述长度不正确,请确认"});
});

相关链接

发表评论