`

formValidator 的一些验证实例

阅读更多
    $(function(){
				try {
					$.formValidator.initConfig({
						formid: "formTable",
						errorfocus: false,
						submitonce: true,
						tipstyle: "both",
						onerror: function(){ // 验证不通过时的回调函数
							alert("红色提示处输入非法,请根据提示修改!");
						}
					});
					//验证字符串(必填)
					$("#name").formValidator({ // 验证:模块名称
						onshow: "(必填)",
						onfocus: "(必填)不超过50个字符",
						oncorrect: "(正确)"
					}).inputValidator({
						min: 1,
						max: 50,
						onerrormin: "(错误)不能为空",
						onerrormax: "(错误)不超过50个字符,汉字算两个字符"
					});

					//验证字符串(选填)
					$("#name").formValidator({ // 验证:模块名称
						onshow: "(选填)",
						onfocus: "(选填)不超过50个字符",
						oncorrect: "(正确)",
						empty: true
					}).inputValidator({
						min: 1,
						max: 50,
						onerrormin: "(错误)不能为空",
						onerrormax: "(错误)不超过50个字符,汉字算两个字符"
					});
					

					//验证时间
					$("#addDate").formValidator({ // 验证:发送时间
						onshow: "(必填)",
						onfocus: "(必填)请选择操作时间",
						oncorrect: "(正确)"
					}).functionValidator({
						fun : function(val, elem){
							if(!/^\d{4}-\d{2}-\d{2}[ ]\d{2}:\d{2}$/.test(val)){
								return "(错误)请选择操作时间";
							}
							return true;
						}
					});

					//ajax验证
					$("#account").formValidator({ // 验证:模块名称
						onshow: "(必填)",
						onfocus: "(必填)不超过50个字符",
						oncorrect: "(正确)"
					}).inputValidator({
						min: 1,
						max: 50,
						onerrormin: "(错误)不能为空",
						onerrormax: "(错误)不超过50个字符,汉字算两个字符"
					}).ajaxValidator({
						type : "post",
						url  : "EnterpriseManage!ajaxValidatorUserAccount.action",
						success: function(data){
							if(data == "0"){
								return true;
							}else if(data == "1"){
								return false;
							}
						},
						onerror: "该账号已被占用,请更换!"
					});

					//密码及重复密码验证
					$("#password").formValidator({ // 验证:模块名称
						onshow: "(必填)",
						onfocus: "(必填)不超过11个字符",
						oncorrect: "(正确)"
					}).inputValidator({
						min: 1,
						max: 50,
						onerrormin: "(错误)不能为空",
						onerrormax: "(错误)不超过11个字符,汉字算两个字符"
					});

					$("#passwordRepeat").formValidator({
						onshow: "(必填)",
						onfocus: "(必填)2次密码必须一致",
						oncorrect: "(正确)"
					}).compareValidator({
						desid: "password",
						operateor: "=",
						onerror: "(错误)2次密码不一致,请确认"
					});

					//图片格式验证
					$("#tcCodeLogo").formValidator({
						onshow: "(选填)",
						onfocus: "(选填)请上传图片文件",
						oncorrect: "(正确)",
						empty:true
					}).regexValidator({
						regexp: regexEnum.picture,
						onerror: "只能上传图片文件"
						});

					//数值验证
					$("#nameNum").formValidator({ // 验证:模块名称
						onshow: "(必填)",
						onfocus: "(必填)值1到50",
						oncorrect: "(正确)"
					}).inputValidator({
						min: 1,
						max: 50,
						type: "value",
						onerrormin: "(错误)不能为空",
						onerrormax: "(错误)值1到50"
					});
					//电话验证
					$("#linkPhone").formValidator({
						onshow: "(选填)",
						onfocus: "(选填)",
						oncorrect: "(正确)",
						empty: true
					}).regexValidator({
						regexp: "^(\\d{3,4}-?\\d{7,8}|(13|15|18)\\d{9})$",
						onerror: "(错误)电话号码格式不正确,请检查"
					});

					//EMail验证
					$("#linkEmail").formValidator({
						onshow: "(选填)",
						onfocus: "(选填)请选择正确EMail格式",
						oncorrect: "(正确)",
						empty: true
					}).regexValidator({
						regexp: regexEnum.email,
						onerror: "(错误)Email格式不正确,请检查"
					});

					//select验证
					$("#testSelect").formValidator({
						onshow: "(必填)",
						onfocus: "(必填)请选择选项",
						oncorrect: "(正确)"
					}).inputValidator({
					      min: 0,  //开始索引
					      onerror: "你是不是忘记选择学历了!"
				      });
					  
					  //隐藏时,默认验证通过
					  $("#smsProductName").formValidator({ // 验证
							onshow: "(必填)",
							onfocus: "(必填)不超过50个字符,汉字算两个字符",
							oncorrect: "(正确)"
						}).functionValidator({
							fun: function(val, elem) {
								if($("#smsProductName").is(":hidden")){
									return true;
								}
								if(!/^\S{1,50}$/.test(val)){
									return "(错误)不超过50个字符,汉字算两个字符";
								}
								return true;
							}
						});
					
					//多选选择框的验证方式 略有点复杂了
					$(":checkbox[name='productType']").formValidator({
						onshow: "(至少选择一个)",
						onfocus: "(至少选择一个)",
						oncorrect: "(正确)"
					}).functionValidator({
						fun: function(val, elem){
							var objs = $(":checkbox[name='productType']");
							for(var i=0; i<objs.length; i++){
								if($(objs[i]).attr("checked") == true)
								{
									$('#productTypeTip').removeClass();
									$('#productTypeTip').addClass("onSuccess");
									$('#productTypeTip').html();
									$('#productTypeTip').html("<nobr>正确</nobr>");
									return true;
								}
							}
							$('#productTypeTip').removeClass();
							$('#productTypeTip').addClass("onError");
							$('#productTypeTip').html();
							$('#productTypeTip').html("<nobr>(至少选择一项)</nobr>");
							return false;
						}
					});
					
				}catch(e){
					alert(e);
				}
			});

 

分享到:
评论

相关推荐

    jQuery formValidator表单验证插件实例(php)

    **jQuery formValidator表单验证插件实例(PHP)** 在Web开发中,表单验证是不可或缺的一部分,它确保用户输入的数据符合预设的规则,从而提高数据质量和用户体验。jQuery formValidator是一个强大的验证插件,它...

    jQuery formValidator表单验证源码实例

    很多人下载了jQuery 的formValidator表单验证插件竟然不会用,我下了后研究研究写了几个超级好用的表单验证的demo,下载之后直接使用。立即体验jQuery的强大,formValidator是个神奇的插件,让我做成超好用的demo

    JQuery formvalidator4.1.1(实例+文档).rar

    在压缩包中的"JQuery formvalidator4.1.1资料"中,包含了一些示例代码,这些实例涵盖了FormValidator的基本用法和常见场景。通过这些实例,开发者可以快速掌握如何在项目中引入FormValidator,如何设置验证规则,...

    formvalidator 表单验证框架

    4. **示例文件**:包含HTML和JavaScript文件,展示了如何在实际项目中使用formvalidator,比如“仿126实例”可能是一个模仿126邮箱注册表单的验证示例。 5. **文档**:可能包括HTML或PDF格式的帮助手册,详细解释了...

    jQuery formValidator表单验证插件3.1.rar

    示例代码展示了插件的基本用法和各种验证规则的应用,包括简单的验证实例和复杂的异步验证案例。通过实践这些例子,开发者可以更好地掌握formValidator的用法。 综上所述,jQuery formValidator 3.1是一个功能强大...

    jquery验证框架_formValidator3.3

    **jQuery FormValidator 3.3:打造高效便捷的表单验证体验** `jQuery FormValidator 3.3` 是一个强大的JavaScript验证框架,专为简化和增强网页中的表单验证而设计。它基于流行的jQuery库,提供了丰富的功能和高度...

    jQuery插件formValidator自定义函数扩展功能实例详解

    本文实例讲述了jQuery插件formValidator自定义函数扩展功能的方法。分享给大家供大家参考,具体如下: jQuery formValidator表单验证插件是什么?感兴趣的读者可参考《jQuery formValidator表单验证插件》以及本站...

    jquery formValidator

    `jQuery FormValidator`是一款基于jQuery库的前端表单验证插件,它为开发者提供了一种简单而强大的方式来实现表单验证。这个插件在Web开发领域中颇受欢迎,因为它可以方便地添加验证规则,避免用户提交无效或不完整...

    jquery formValidation表单验证插件实例

    例如,你可以通过CDN或下载压缩包(如`formValidator3.1`)来获取这些资源。在HTML文件中,将它们链接到页面头部: ```html &lt;!DOCTYPE html&gt; &lt;title&gt;jQuery FormValidation示例 ...

    jquery 的 formvalidator插件使用 多选项卡的弹出层效果

    6. **自定义验证规则**:除了内置的验证规则外,`formvalidator`还允许你定义自己的验证函数,以满足特定需求。例如,你可以验证密码强度,确保包含数字、字母和特殊字符。 ```javascript $.formUtils....

    jQuery formValidator4.0.1最全的demo,表单验证一网打尽

    个人认为最牛X的表单验证js,jquery实现的。附带10多个demo页,清楚展现了各种验证的用法,将表单验证的种种情况一网打尽,超赞。当然,我也是其它地方download的,下载了N多,这是最好的。共享给大家。

    jQuery formValidator表单验证插件ASP.NET示例

    内容索引:.NET源码,Ajax相关,formValidator jQuery formValidator是一款不错的表单验证插件,ASP/PHP/平台都可以方便的使用,本实例就是在 环境下的使用formValidator的一个功能演示程序,这其中包含各种表单数据...

    很漂亮的Jquery验证框架(内带实例)

    接着,我们需要对目标表单进行一些基本的配置,包括设置验证规则和错误提示信息。例如: ```html [required,custom[onlyLetterNumber]]" title="请输入用户名" /&gt; [required,custom[email]]" title="请输入有效...

    asp.net 中jquery应用验证注册信息实例【推荐】

    `jQuery formValidator`可能是这个实例中使用的第三方验证插件,它可以提供更复杂的验证功能,如正则表达式匹配、远程验证等。安装并引入这个插件后,可以按照插件文档中的指南配置验证规则,以增强验证功能。 总结...

    flex form 验证(转)

    通过实例化`FormValidator`,我们可以配置验证规则,比如最小值、最大值、正则表达式等,并将其关联到特定的表单字段。 文件`FormValidator.as`很可能包含了自定义的`FormValidator`扩展或实现,可能用于添加额外...

    JS表单验证类

    1. **初始化验证规则**:在创建`FormValidator`实例时,需要传入表单元素和验证规则。规则可能包括必填项、长度限制、格式校验等。 2. **事件绑定**:类内部会自动将验证函数绑定到表单的提交事件或其他相关事件上...

    jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法

    如果`settings`数组长度为1,意味着只有一个formValidator实例,此时不进行验证,直接返回null。否则,如果第一个验证规则不需要Ajax验证,会检查输入框是否为空,若为空则认为验证通过。 对于每一个验证规则(`...

    jquery.validate表单验证密码完整例子(带密码强度显示)

    总的来说,`jQuery Validate`的这个实例提供了一个实用的方法来增强表单验证体验,特别是对于密码安全性的强调。它不仅确保了用户输入的有效性,还鼓励他们创建更强大的密码,从而提高了整体的网络安全。通过理解并...

    javascript表单验证类

    创建一个表单验证类实例,然后绑定到特定表单,如下: ```javascript var formValidator = new FormValidator(formElement); formValidator.addRule('email', /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/)...

Global site tag (gtag.js) - Google Analytics