博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jquery validate表单验证介绍
阅读量:7144 次
发布时间:2019-06-29

本文共 3282 字,大约阅读时间需要 10 分钟。

hot3.png

  • validate插件简介  
    官方网站:
    学习案例:
    validate()是插件的核心方法,定义了基本的校验规则和配置项。
    rule:设置表单的验证规则;
    messages:设置表单不符合验证规则的提示信息;
    debug:开发调试,为true只验证不提交表单;
  •  基本的校验规则
序号 规则 描述
1 required:true 必须输入的字段。
2 remote:"check.php" 使用 ajax 方法调用 check.php 验证输入值。
3 email:true 必须输入正确格式的电子邮件。
4 url:true 必须输入正确格式的网址。
5 date:true 必须输入正确格式的日期。日期校验 ie6 出错,慎用。
6 dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22。只验证格式,不验证有效性。
7 number:true 必须输入合法的数字(负数,小数)。
8 digits:true 必须输入整数。
9 creditcard: 必须输入合法的信用卡号。
10 equalTo:"#field" 输入值必须和 #field 相同。
11 accept: 输入拥有合法后缀名的字符串(上传文件的后缀)。
12 maxlength:5 输入长度最多是 5 的字符串(汉字算一个字符)。
13 minlength:10 输入长度最小是 10 的字符串(汉字算一个字符)。
14 rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串(汉字算一个字符)。
15 range:[5,10] 输入值必须介于 5 和 10 之间。
16 max:5 输入值不能大于 5。
17 min:10 输入值不能小于 10。

required:必填

minlength:最小长度
maxlength:最大长度
rangelength:长度范围,以数组呈现[2,10],表示表单输入长度为2到10位
remote:可以通过GET或POST请求进行远程验证,通过ajax实现的
{
    url:
    type:默认为GET请求
    data:发送的数据
发送GET请求例子:
check:{
    required:true,
    remote:{
        url:"__CONTROLLER__/check?check="+$("#icode").val()
        //__CONTROLLER__表示当前控制器
    }

  • validator对象

validator.form()验证表单是否有效,返回true或者false;

validator.element(element)验证表单中某个元素是否有效,返回true或者false;
validator.resetForm()把表单恢复到验证前原来的状态;
validator.showErrors(error)针对元素显示特定的错误信息;
validator.numberOfInvalids()返回无效的元素数量;

  • validator对象的静态方法

jQuery.validator.addMethod()增加自定义的验证方法;  (即$.validator.addMethod())

jQuery.validator.format()格式化字符串,用参数代替模板中的{n};
jQuery.validator.setDefaults()修改插件默认设计;
jQuery.validator.addClassRules()为某些包含名为name的class增加组合验证类型。

  • 验证规则

获取表单元素的验证规则:    $("#username").rules();

为表单元素添加验证规则:    $("#username").rules('add',rules); 
为表单元素删除验证规则:    $("#username").rules('remove',rules);

  • 正则表达式

手机号验证:/^1[3,5,7,8]\d{9}$/

金额:/^\d+\.?\d{0,2}$/
8-15位数字:/\d{6,15}$/
URL验证:/^http:\/\/[a-z\d-]+(\w\/)+)$/i

  • 案例
$(document).ready(function(){	$("#form-add").validate({		rules:{			name:{				required:true,								},			password:{				required:true,				checkPwd:true,			},			confirm_pwd:{				required:true,				equalTo:password,			},			email:{				required:true,				checkEmail:true,			}			check:{				//required:true,				//remote:{					//url:"__CONTROLLER__/check?check="+$("#icode").val,					//__CONTROLLER__表示当前控制器					//dataType:"json",				//}			}		},		messages:{			name:{				required:"*必填!",			},			password:{				required:"*必填!",				rangelength:"*长度为6到16位!",			},			confirm_pwd:{				required:"*必填!",				equalTo:"*两次输入的密码不一致!"			},			email:{				required:"*必填!",				email:"*请输入正确的邮箱!",			},			check:{				required:"*必填!",				remote:"*验证码有误!",			},		},		//是否在获取焦点时验证		//onfocusout:false,		//是否在敲击键盘时验证		//onkeyup:false,		//提交表单后,(第一个)未通过验证的表单获得焦点		focusInvalid:true,		//当未通过验证的元素获得焦点时,移除错误提示		focusCleanup:true,	});	//自定义正则表达示验证方法	$.validator.addMethod("checkEmail",function(value,element,params){			var checkEmail = /^[a-z0-9]+@([a-z0-9]+\.)+[a-z]{2,4}$/i;			return this.optional(element)||(checkEmail.test(value));		},"*请输入正确的邮箱!");			$.validator.addMethod("checkName",function(value,element,params){			var checkName = /^\w{2,10}$/g;			return this.optional(element)||(checkName.test(value));		},"*只允许2-10位英文字母、数字或者下画线!");		$.validator.addMethod("checkPwd",function(value,element,params){			var checkPwd = /^\w{6,16}$/g;			return this.optional(element)||(checkPwd.test(value));		},"*只允许6-16位英文字母、数字或者下画线!");});

 

转载于:https://my.oschina.net/u/230843/blog/420632

你可能感兴趣的文章
“Linaro”将推动开源软件新一波开发潮
查看>>
VS201“.NET研究”0实践RUP4+1架构模型
查看>>
两级导航栏联动效果
查看>>
php ftp类
查看>>
VK Cup 2012 Qualification Round 1 A. Next Round
查看>>
(译)cocos2d精灵教程:第二部分
查看>>
高校女生坐等强女干。保安称压力大。。【转】
查看>>
Python 版 Instance Activator
查看>>
分享30套免费的高质量网页按钮素材
查看>>
亲测SQLServer的最大连接数 (转)
查看>>
typeof 运算符用法
查看>>
SignalR 0.5 发布了
查看>>
批量照片缩小器展示多线程控件BackgroundWorker后台工作使用方法
查看>>
HTML5之Canvas绘图——Canvas画布调整之移动、缩放、旋转
查看>>
排查数据库性能的常用sql语句
查看>>
全排列
查看>>
Node.js&NPM的安装与配置(转)
查看>>
C# CRC16 查表法
查看>>
js中获取键盘事件
查看>>
面试(4)-spring-Spring面试题和答案
查看>>