`

jquery validate使用说明

 
阅读更多
//validate 选项***********************************************************
		$("form").validate({

			debug:true  //进行调试模式(表单不提交)
			rules:{
		    	name:"required", //自定义规则,key:value的形式,key是要验证的元素,value可以是字符串或对象
		     	email:{
		     		//内置验证方式
			        required:true, //必填项
			        required:"#aa:checked"表达式的值为真,则必填项
					required:function(){}返回为真,则必填项
			        email:true,   //验证电子邮箱格式
			        minlength:5,  //设置最小长度
			        maxlength:10, //设置最大长度
			        rangelength:[5,10],//设置一个长度范围[min,max]
			        min:2,        //设置最小值
			        max:8,       //设置最大值
			        range:[2,8]      //设置值的范围
			        url:true,         //验证URL格式
			        date:true,    //验证日期格式(类似30/30/2008的格式,不验证日期准确性只验证格式)
			        dateISO:true, //验证ISO类型的日期格式 例如:2009-06-23
			        dateDE:true,  //验证德式的日期格式(29.04.1994 or 1.1.2006)
			        number:true,  //验证十进制数字(包括小数的)
			        digits:true,  //验证整数
			        creditcard:true, //验证信用卡号
			        accept:""     //请输入拥有合法后缀名的字符串(上传文件的后缀)
			        equalTo:"id名" //验证两个输入框的内容是否相同
			        phoneUS:true   //验证美式的电话号码
			        regex:/正则表达式/     //上面addMethod扩展的验证规则
		    	}
			}

			messages:{
			    name:"Name不能为空",  //自定义的提示信息key:value的形式key是要验证的元素,值是字符串或函数
			    email:{
			       required:"E-mail不能为空",
			       email:"E-mail地址不正确"  //validate 内置验证有默认的英语提示 此处为重新自定义
			    }
		    }

		    errorPlacement: function(error,element) {
                element.parents('.form-group').children(".help-block").html(error); //错误显示的位置 element验证的元素error错误提示
            }

            submitHandler:function(form) {//通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交
				$(form).ajaxSubmit();  
				//form.submit();
			}

			success:"类名"   //要验证的元素通过验证后的动作,跟一个字符串,会给输出错误的元素追加一个css类
			ignore:".ignore" //对某些元素不进行验证
		    onsubmit:false   //是否提交时验证 默认:true
		    onfocusout:false //是否在获取焦点时验证 默认:true 
		    onkeyup:false    //是否在敲击键盘时验证 默认:true
            onclick:false    //是否在鼠标点击时验证(一般验证checkbox,radiobox) 默认:true
            focusInvalid:false //提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点 默认:true
            focusCleanup:true  //当未通过验证的元素获得焦点时,并移除错误提示(避免和 focusInvalid.一起使用)默认:false
            errorClass:"类名"  //指定错误提示的css类名,可以自定义错误提示的样式 默认:"error"
            errorElement:"标签" //使用什么标签标记错误 默认:"label"
            wrapper:"标签"      //使用什么标签再把上边的errorELement包起来
            errorLabelContainer:"容器id"  //把错误信息统一放在一个容器里面
            showErrors:function(errorMap,errorList) { //跟一个函数,可以显示总共有多少个未通过验证的元素
		        $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below.");
		        this.defaultShowErrors();
			}
		})


		//validate方法 返回一个Validator对象,它有很多方法, 让你能使用引发校验程序或者改变form的内容**************

		$.validator.setDefaults({//设置validator默认
		    debug:true,  //把调试模式设置为默认 如果一个页面中有多个表单一般用这种方式
		    errorClass: "txt-impt", //设置默认错误提示的css类名
	 	    errorElement: "div"     //设置默认错误提示的标签
		})

		//addMethod(name,method,message)方法:name(自定义rules的key) method(自定义验证方法) message(报错输出的提示)
		jQuery.validator.addMethod("regex",function(value, element, params){  //扩展方法示例:           
			var exp = new RegExp(params); //params rules的value传入的正则表达式
			return exp.test(value);       //value  被验证的input传入的值
		},"输入格式有误");

		//扩展rules规则
		jQuery.validator.addClassRules("name", {
			required: true,
			minlength: 2
		});
		jQuery.validator.addClassRules({
			name: {
				required: true,
				minlength: 2
			},
			zip: {
				required: true,
				digits: true,
			}
		});
		$("#myinput").rules("add", {  
			required: true,  
			minlength: 2,  
			messages: {  
				required: "Required input",  
				minlength: jQuery.format("Please, at least {0} characters are necessary")  
			}  
		}); 
		$("#myinput").rules("remove"); //全部移除验证规则
		$("#myinput").rules("remove", "min max") //移除 min max

		var form=$('form');
		$(".formBtn").click(function(){ //按钮type非submit or submit按钮不在form内
			console.log("Valid: " + form.valid()) //form.valid() 验证成功返回true
			var validator = $("form").validate(setValidate);
			var formState=validator.form();      //判断验证状态 返回Boolean
				//validator.element("id名") 验证某个元素 返回Boolean
				//validator.resetForm()  把前面验证的FORM恢复到验证前原来的状态
				/*validator.showErrors({
					"firstname": "I know that your firstname is Pete, Pete!"
				}); 显示自定义的错误信息 */

			if(formState==false){
				return;
			}else{
				//do someing...
			}	
		})

		//使用ajax方式进行验证,默认会提交当前验证的值到远程地址,如果需要提交其他的值,可以使用data选项 后台只允许返回false和true
   		remote: "check-email.php"  
	    remote: {  
	        url: "check-email.php",     //后台处理程序  
	        type: "post",               //数据发送方式  
	        dataType: "json",           //接受数据格式     
	        data: {                     //要传递的数据  
	            username: function() {  
	                return $("#username").val();  
	            }  
	        }  
	    }  


		//meta String方式***************************************************************

		//引入js
		<script type="text/javascript" src="js/jquery.metadata.js"></script>
		<script type="text/javascript" src="js/jquery.validate.js"></script>

		//dom上验证规则写法
		<input type="text" name="email" class="{validate:{ required:true,email:true }}" />

		//设置为meta String验证方式
		$("#myform").validate({
		   meta:"validate",
		   submitHandler:function() { alert("Submitted!") }
		})

 

分享到:
评论

相关推荐

    jquery.validate 使用说明文档

    在本文中,我们将深入探讨如何使用 jQuery Validate,包括基本的使用方法、可选参数以及常见的验证规则。 首先,要使用 jQuery Validate,你需要在页面中引入 jQuery 库和 jQuery Validate 的脚本文件。如以下代码...

    JQueryValidate验证说明

    首先,使用`jQuery Validate`需要引入相关的文件,包括`jquery.validate.js`作为核心验证框架,`additional-methods.js`包含了一些额外的验证方法,`messages_cn.js`用于本地化消息,以及`jquery.validate.css`定义...

    jquery 部分使用说明,validate使用

    jquery 部分使用说明,validate使用和例子 chm格式

    Jquery插件,JqueryUI,JqueryForm,JqueryValidate,Jqueryvsdoc

    例如,使用 jQuery UI 创建交互式界面,jQuery Form 实现无刷新表单提交,jQuery Validate 确保数据输入正确,而 jQuery vsdoc 则在开发过程中提供文档支持。在实际项目中,开发者可以根据需求选择合适的插件组合,...

    Jquery validate表单验证Demo下载

    要使用jQuery Validate插件,首先需要在页面中引入jQuery库和validate插件的JavaScript文件。接着,你可以选择一个表单元素,并调用`.validate()`方法来初始化验证。例如: ```javascript $('#myForm').validate...

    jquery-validate-中文提示.rar

    总的来说,jQuery Validate插件通过`jquery.validate.min.js`和`additional-methods.min.js`提供了丰富的验证功能,`messages_zh.min.js`解决了中文提示的需求,而`readme.txt`则是理解并使用这些文件的重要指南。...

    jQuery验证控件jquery.validate.js使用说明+中文API

    jQuery 验证控件 jquery.validate.js 使用说明 + 中文 API jQuery 验证控件 jquery.validate.js 是一个功能强大且广泛使用的 JavaScript 验证插件,旨在帮助开发者快速实现表单验证功能。下面是 jquery.validate....

    jquery.validate验证说明

    **jQuery Validate插件详解** jQuery Validate插件是用于在客户端进行表单验证的优秀工具,它简化了HTML表单的验证过程,提供了丰富的验证规则和自定义错误消息功能。这个插件是基于jQuery库的,因此需要在项目中先...

    jquery.validate的使用说明介绍

    下面将详细介绍jquery.validate的使用方法。 一、准备工作 在使用jquery.validate之前,首先需要确保页面已经引入了jQuery库,且版本需在1.2.6以上。这是因为jquery.validate依赖于jQuery,且在1.3.2版本中已进行过...

    jQuery的validate插件使用整理

    jQuery.validate是jQuery库的一个插件,它是一个功能强大的表单验证框架,使用它可以非常方便地实现前端表单验证。通过使用jQuery.validate,开发者可以定义表单元素的验证规则,并在表单提交之前执行这些规则,以...

    jquery-validate验证框架使用详解及JS文件

    以下是对`jQuery Validate`框架的详细说明以及相关JS文件的解释。 ### jQuery Validate 框架 `jQuery Validate`是`jQuery`的一个插件,它提供了丰富的验证规则和错误消息处理功能。通过简单的API,开发者可以轻松...

    jquery表单验证框架:jquery.validate.zip

    jQuery是一个广泛使用的JavaScript库,而jQuery.validate则是jQuery的一个强大插件,专门用于实现客户端的表单验证。本篇文章将详细介绍jQuery.validate框架及其核心功能。 一、jQuery.validate简介 jQuery....

    jquery.validate.js表单验证

    jQuery验证控件jquery.validate.js使用说明+中文API 官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation

    jquery.validate是jquery旗下的一个验证框架

    要使用`jQuery Validate`,首先确保引入了jQuery库以及`jquery.validate.js`文件。以下是基本的使用流程: 1. **引入文件**: 在HTML文件中,添加jQuery库和`jquery.validate.js`的链接,例如: ```html ...

    jquery validation使用指南手册

    ### jQuery Validation 使用指南 #### 一、概述 `jQuery Validation` 是一款强大的客户端验证插件,它可以方便地集成到基于 `jQuery` 的项目中,帮助开发者实现表单数据的有效性和完整性验证。本指南旨在详细介绍 ...

    jquery.validate Validation .js验证框架 帮助 手册 文档.doc

    这个文档主要涵盖了一系列关于jQuery Validate框架的使用方法、可选参数、验证器和实用工具。以下是对这些知识点的详细说明: 1. **启用调试模式**: - `debug` 参数是一个布尔值,默认为 `false`。如果设置为 `...

Global site tag (gtag.js) - Google Analytics