php--validate表单验证
validate表单验证扩展规则
添加自定义检验(验证class)
获取html加入 class
<input id="D_NUMBER" name="D_NUMBER" style="width:100px;" class="checkPost" type="text"/>
addMethod:name, method, message
//扩展验证规则
//邮箱 表单验证规则
jQuery.validator.addMethod("mail", function (value, element) {
var mail = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$/;
return this.optional(element) || (mail.test(value));
}, "邮箱格式不对");
//电话验证规则
jQuery.validator.addMethod("phone", function (value, element) {
var phone = /^0\d{2,3}-\d{7,8}$/;
return this.optional(element) || (phone.test(value));
}, "电话格式如:0371-68787027");
//区号验证规则
jQuery.validator.addMethod("ac", function (value, element) {
var ac = /^0\d{2,3}$/;
return this.optional(element) || (ac.test(value));
}, "区号如:010或0371");
//无区号电话验证规则
jQuery.validator.addMethod("noactel", function (value, element) {
var noactel = /^\d{7,8}$/;
return this.optional(element) || (noactel.test(value));
}, "电话格式如:68787027");
//手机验证规则
jQuery.validator.addMethod("mobile", function (value, element) {
var mobile = /^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mobile.test(value));
}, "手机格式不对");
//邮箱或手机验证规则
jQuery.validator.addMethod("mm", function (value, element) {
var mm = /^[a-z0-9._%-]+@([a-z0-9-]+\.)+[a-z]{2,4}$|^1[3|4|5|7|8]\d{9}$/;
return this.optional(element) || (mm.test(value));
}, "格式不对");
//电话或手机验证规则
jQuery.validator.addMethod("tm", function (value, element) {
var tm=/(^1[3|4|5|7|8]\d{9}$)|(^\d{3,4}-\d{7,8}$)|(^\d{7,8}$)|(^\d{3,4}-\d{7,8}-\d{1,4}$)|(^\d{7,8}-\d{1,4}$)/;
return this.optional(element) || (tm.test(value));
}, "格式不对");
//年龄 表单验证规则
jQuery.validator.addMethod("age", function(value, element) {
var age = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/;
return this.optional(element) || (age.test(value));
}, "不能超过120岁");
///// 20-60 /^([2-5]\d)|60$/
//传真
jQuery.validator.addMethod("fax",function(value,element){
var fax = /^(\d{3,4})?[-]?\d{7,8}$/;
return this.optional(element) || (fax.test(value));
},"传真格式如:0371-68787027");
//验证当前值和目标val的值相等 相等返回为 false
jQuery.validator.addMethod("equalTo2",function(value, element){
var returnVal = true;
var id = $(element).attr("data-rule-equalto2");
var targetVal = $(id).val();
if(value === targetVal){
returnVal = false;
}
return returnVal;
},"不能和原始密码相同");
//大于指定数
jQuery.validator.addMethod("gt",function(value, element){
var returnVal = false;
var gt = $(element).data("gt");
if(value > gt && value != ""){
returnVal = true;
}
return returnVal;
},"不能小于0 或空");
//汉字
jQuery.validator.addMethod("chinese", function (value, element) {
var chinese = /^[\u4E00-\u9FFF]+$/;
return this.optional(element) || (chinese.test(value));
}, "格式不对");
//指定数字的整数倍
jQuery.validator.addMethod("times", function (value, element) {
var returnVal = true;
var base=$(element).attr('data-rule-times');
if(value%base!=0){
returnVal=false;
}
return returnVal;
}, "必须是发布赏金的整数倍");
//身份证
jQuery.validator.addMethod("idCard", function (value, element) {
var isIDCard1=/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$/;//(15位)
var isIDCard2=/^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;//(18位)
return this.optional(element) || (isIDCard1.test(value)) || (isIDCard2.test(value));
}, "格式不对");
// 字符验证
jQuery.validator.addMethod("stringCheck", function(value, element) {
return this.optional(element) || /^[\u0391-\uFFE5\w]+$/.test(value);
}, "只能包括中文字、英文字母、数字和下划线");
------------------------------------------------------------
// 中文字两个字节
jQuery.validator.addMethod("byteRangeLength", function(value, element, param) {
var length = value.length;
for(var i = 0; i <</span> value.length; i++){
if(value.charCodeAt(i) > 127){
length++;
}
}
return this.optional(element) || ( length >= param[0] && length <= param[1] );
}, "请确保输入的值在3-15个字节之间(一个中文字算2个字节)");
------------------------------------------------------------
// 身份证号码验证
jQuery.validator.addMethod("isIdCardNo", function(value, element) {
return this.optional(element) || isIdCardNo(value);
}, "请正确输入您的身份证号码");
------------------------------------------------------------
// 手机号码验证
jQuery.validator.addMethod("isMobile", function(value, element) {
var length = value.length;
var mobile =/^[1][3-8]+\\d{9}/;
return this.optional(element) || (length == 11 && mobile.test(value));
}, "请正确填写您的手机号码");
------------------------------------------------------------
// 电话号码验证
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^\d{3,4}-?\d{7,9}$/; //电话号码格式010-12345678
return this.optional(element) || (tel.test(value));
}, "请正确填写您的电话号码");
------------------------------------------------------------
// 联系电话(手机/电话皆可)验证
jQuery.validator.addMethod("isPhone", function(value,element) {
var length = value.length;
var mobile = /^(((13[0-9]{1})|(15[0-9]{1}))+\d{8})$/;
var tel = /^\d{3,4}-?\d{7,9}$/;
return this.optional(element) || (tel.test(value) || mobile.test(value));
}, "请正确填写您的联系电话");
------------------------------------------------------------
// 邮政编码验证
jQuery.validator.addMethod("isZipCode", function(value, element) {
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您的邮政编码");
[注意:]
使用class="{}"的方式,必须引入包:jquery.metadata.js
可以使用如下的方法,修改提示内容:
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"
在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
class="{required:true,minlength:5,equalTo:'#password'}"
如果你还想在错误信息上显示特别的样式(比如字体为红色)即可通过添加:
<style type="text/css">
#signupForm label.error {
padding-left: 16px;
margin-left: 2px;
color:red;
background: url(img/unchecked.gif) no-repeat 0px 0px;
}
</style>
//messages处,如果某个控件没有message,将调用默认的信息
3.ignore:忽略某些元素不验证
ignore: ".ignore"
4.更改错误信息显示的位置
errorPlacement:Callback
Default: 把错误信息放在验证的元素后面
指明错误放置的位置,默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}
//示例:
<td class="label"><label id="lfirstname" for="firstname">First Name</label></td>
<td class="field"><input id="firstname" name="firstname" type="text" value="" maxlength="100" /></td>
<td class="status"></td>
</tr>
<tr>
<td style="padding-right: 5px;">
<input id="dateformat_eu" name="dateformat" type="radio" value="0" />
<label id="ldateformat_eu" for="dateformat_eu">14/02/07</label>
</td>
<td style="padding-left: 5px;">
<input id="dateformat_am" name="dateformat" type="radio" value="1" />
<label id="ldateformat_am" for="dateformat_am">02/14/07</label>
</td>
<td></td>
</tr>
<tr>
<td class="label"> </td>
<td class="field" colspan="2">
<div id="termswrap">
<input id="terms" type="checkbox" name="terms" />
<label id="lterms" for="terms">I have read and accept the Terms of Use.</label>
</div>
</td>
</tr>
errorPlacement: function(error, element) {
if ( element.is(":radio") )
error.appendTo( element.parent().next().next() );
else if ( element.is(":checkbox") )
error.appendTo ( element.next() );
else
error.appendTo( element.parent().next() );
}
代码的作用是:一般情况下把错误信息显示在<td class="status"></td>中,如果是radio显示在<td></td>中,如果是 checkbox显示在内容的后面
errorClass:String Default: "error"
指定错误提示的css类名,可以自定义错误提示的样式
errorElement:String Default: "label"
用什么标签标记错误,默认的是label你可以改成em
errorContainer:Selector
显示或者隐藏验证信息,可以自动实现有错误信息出现时把容器属性变为显示,无错误时隐藏,用处不大
errorContainer: "#messageBox1, #messageBox2"
errorLabelContainer:Selector
把错误信息统一放在一个容器里面。
wrapper:String
用什么标签再把上边的errorELement包起来
一般这三个属性同时使用,实现在一个容器内显示所有错误提示的功能,并且没有信息时自动隐藏
errorContainer: "div.error",
errorLabelContainer: $("#signupForm div.error"),
wrapper: "li"
5更改错误信息显示的样式
设置错误提示的样式,可以增加图标显示,在该系统中已经建立了一个validation.css专门用于维护校验文件的样式
input.error { border: 1px solid red; }
label.error {
background:url("./demo/images/unchecked.gif") no-repeat 0px 0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}
label.checked {
background:url("./demo/images/checked.gif") no-repeat 0px 0px;
}
6每个字段验证通过执行函数
success:String,Callback
要验证的元素通过验证后的动作,如果跟一个字符串,会当做一个css类,也可跟一个函数
success: function(label) {
// set as text for IE
label.html(" ").addClass("checked");
//label.addClass("valid").text("Ok!")
}
添加"valid" 到验证元素, 在CSS中定义的样式<style>label.valid {}</style>
success: "valid"
php--validate表单验证的更多相关文章
- 基于jQuery的Validate表单验证
表单验证可以说在前端开发工作中是无处不在的~ 有数据,有登录,有表单, 都需要前端验证~~ 而我工作中用到最多的就是基于基于jQuery的Validate表单验证~ 就向下面这样~ 因为今天有个朋 ...
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- 【干货】Laravel --Validate (表单验证) 使用实例
前言 : Laravel 提供了多种方法来验证应用输入数据.默认情况下,Laravel 的控制器基类使用ValidatesRequests trait,该trait提供了便利的方法通过各种功能强大的验 ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
- summernote富文本编辑器配合validate表单验证无法进行表单提交的问题
1.使用summernote富文本编辑器提交图片到服务器 在使用bootstrap中,我们用到了summernote富文本编辑器,使用summernote将图片上传到服务器中,参考我的上篇文章http ...
- thinkphp图片上传+validate表单验证+图片木马检测+缩略图生成
目录 1.案例 1.1图片上传 1.2进行图片木马检测 1.3缩略图生成 1.4控制器中调用缩略图生成方法 1.案例 前言:在thinkphp框架的Thinkphp/Library/Thin ...
- validate表单验证-单独验证
今天编写一个表单验证程序,我来说一下今天遇到的坑:程序不是通过submit按钮提交验证的,是在自己写的一个方法中提交的,出现了表单无法验证的情况.然后我就了解了一下jquery validate的验证 ...
- jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用. 可以先把我写的这个小demo运行试下,先睹为快.猛戳链接--> ...
随机推荐
- BZOJ3012 : [Usaco2012 Dec]First!
建立Trie,那么成为答案的串必须满足其终止节点到根路径上没有其它点. 对于Trie上每个节点维护一个bitset,表示哪些字符必须在哪些字符之前. 每到达一个可能成为答案的终止节点,对图进行拓扑排序 ...
- BZOJ3118 : Orz the MST
对于树边显然只需要减少权值,对于非树边显然只需要增加权值 设i不为树边,j为树边 X[i]:i增加量 X[j]:j减少量 C[i]:修改1单位i的代价 对于每条非树边i(u,v),在树上u到v路径上的 ...
- Origami
Origami 是一个来自 Facebook 设计团队的作品,是 Quartz Composer 的免费工具包,可在无需编程的情况下轻松实现与设计原型进行交互.
- COJ883 工艺品
试题描述 LZJ和XJR是一对好朋友. 他们现在要做一个由方块构成的长条工艺品.但是方块现在是乱的,而且由于机器的要求,他们只能做到把这个工艺品最左边的方块放到最右边. 他们想,在仅这一个操作下,最漂 ...
- Hibernate批处理操作优化 (批量插入、更新与删除)
问题描述 我开发的网站加了个新功能:需要在线上处理表数据的批量合并和更新,昨天下午发布上线,执行该功能后,服务器的load突然增高,变化曲线异常,SA教育了我一番,让我尽快处理,将CPU负载降低. 工 ...
- CentOS 下实现两台服务器之间的共享NFS
NFS的安装配置:centos 5 :yum install nfs-utils portmapcentos 6 :yum install nfs-utils rpcbind yum install ...
- iPhone开发常问的十个问题
iPhone开发常问的十个问题 前言 今天去stackoverflow.com上看了一下iPhone标签下排名最高的10个问题,将它们整理出来,希望这些常见问题能帮到一些iPhone开发的初学者.本来 ...
- VTK 6.3.0 Qt 5.4 MinGW 4.9.1 Configuration 配置
Download VTK 6.3.0 Download Qt 5.4 with MinGW 4.9.1 Download CMake 3.2.0 I assume you've already ins ...
- QPushButton 与 QListWidget 的按键响应
在Qt中添加按钮或表格控件时需要添加其按键响应,一般来说有两种方法,一种是直接实现其响应函数,第二种是自己写一个响应函数,然后用Qt的信号槽将它们连接起来.愚以为第一种方法更为简单一些. 声明这些控件 ...
- java web工程之Hibernate
java web添加structs特性后再添加Hibernate特性,这可以通过右键工程->my eclipse出现工具条选中相应的条目,添加相应的属性, 添加完Hibernate后建立与数据库 ...