JQuery validate 各项验证规则讲解

前些天发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击跳转到教程。

使用样例见：http://blog.csdn.net/jiangyu1013/article/details/56014730

//定义中文消息
var cnmsg = {
required: “必选字段”,
remote: “请修正该字段”,
email: “请输入正确格式的电子邮件”,
url: “请输入合法的网址”,
date: “请输入合法的日期”,
dateISO: “请输入合法的日期 (ISO).”,
number: “请输入合法的数字”,
digits: “只能输入整数”,
creditcard: “请输入合法的信用卡号”,
equalTo: “请再次输入相同的值”,
accept: “请输入拥有合法后缀名的字符串”,
maxlength: jQuery.format(“请输入一个长度最多是 {0} 的字符串”),
minlength: jQuery.format(“请输入一个长度最少是 {0} 的字符串”),
rangelength: jQuery.format(“请输入一个长度介于 {0} 和 {1} 之间的字符串”),
range: jQuery.format(“请输入一个介于 {0} 和 {1} 之间的值”),
max: jQuery.format(“请输入一个最大为 {0} 的值”),
min: jQuery.format(“请输入一个最小为 {0} 的值”)
};
jQuery.extend(jQuery.validator.messages, cnmsg);

 Jquery Validate 验证规则

 

(1)required:true              必输字段
(2)remote:”check.PHP”         使用ajax方法调用check.php验证输入值
(3)email:true                 必须输入正确格式的电子邮件
(4)url:true                   必须输入正确格式的网址
(5)date:true                  必须输入正确格式的日期
(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

 Jquery Validate 自定义验证规则

addMethod(name,method,message)方法：
参数name 是添加的方法的名字
参数method是一个函数,接收三个参数(value,element,param) value 是元素的值,element是元素本身param
是参数,我们可以用addMethod 来添加除built-in Validation methods 之外的验证方法比如有一个字段,只
能输一个字母,范围是a-f,写法如下:

$.validator.addMethod(“af”,function(value,element,params){
if(value.length>1){
return false;
}
if(value>=params[0]&&value<=params[1]){
return true;
}else{
return false;
}
},”必须是一个字母,且a-f”);
用的时候,比如有个表单字段的id=”username”,则在rules 中写
username:{
af:["a","f"]
}
方法
addMethod 的第一个参数,就是添加的验证方法的名子,这时是af
addMethod 的第三个参数,就是自定义的错误提示,这里的提示为:”必须是一个字母,且a-f”
addMethod 的第二个参数,是一个函数,这个比较重要,决定了用这个验证方法时的写法
如果只有一个参数,直接写,如果af:”a”,那么a 就是这个唯一的参数,如果多个参数,用在[]里,用逗号分开

Jquery Validate submit 提交

submitHandler:
通过验证后运行的函数,里面要加上表单提交的函
数,否则表单不会提交

$(".selector").validate({submitHandler:function(form) {
$(form).ajaxSubmit();          //用Jquery Form的函数}
})

 

Jquery Validate error 错误提示dom

.errorPlacement：Callback Default: 把错误信息放在验证的元素后面
指明错误放置的位置，默认情况是：error.appendTo(element.parent());即把错误信息放在验证的元素后面
errorPlacement: function(error, element) {
error.appendTo(element.parent());
}

设置错误提示的样式，可以增加图标显示，like：
input.error { border: 1px solid red; }
label.error {
background:url(“./demo/images/unchecked.gif”) no-repeat 0px0px;
padding-left: 16px;
padding-bottom: 2px;
font-weight: bold;
color: #EA5200;
}

附录：常用的自定义验证规则

// 字符验证
jQuery.validator.addMethod(“stringCheck”, function(value, element) {
return this.optional(element) || /^[u0391-uFFE5w]+$/.test(value);
}, ”只能包括中文字、英文字母、数字和下划线”);

// 中文字两个字节
jQuery.validator.addMethod(“byteRangeLength”, function(value, element, param) {
var length = value.length;
for(var i = 0; i < 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 = /^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/;
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));
}, ”请正确填写您的邮政编码”);


function isIdCardNo(num) {

var factorArr = newArray(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var parityBit=newArray(“1″,”0″,”X”,”9″,”8″,”7″,”6″,”5″,”4″,”3″,”2″);
var varArray = new Array();
var intValue;
var lngProduct = 0;
var intCheckDigit;
var intStrLen = num.length;
var idNumber = num;
// initialize
if ((intStrLen != 15) && (intStrLen!= 18)) {
return false;
}
// check and set value
for(i=0;i<intStrLen;i++) {
varArray[i] = idNumber.charAt(i);
if ((varArray[i] < ’0′ || varArray[i]> ’9′) && (i != 17)){
return false;
} else if (i < 17) {
varArray[i] = varArray[i] * factorArr[i];
}
}

if (intStrLen == 18) {
//check date
var date8 = idNumber.substring(6,14);
if (isDate8(date8) == false) {
return false;
}
// calculate the sum of the products
for(i=0;i<17;i++) {
lngProduct = lngProduct + varArray[i];
}
// calculate the check digit
intCheckDigit = parityBit[lngProduct % 11];
// check last digit
if (varArray[17] != intCheckDigit) {
return false;
}
}
else{       //length is 15
//check date
var date6 = idNumber.substring(6,12);
if (isDate6(date6) == false) {

return false;
}
}
return true;

}

function isDate6(sDate) {
if(!/^[0-9]{6}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
if (year < 1700 || year > 2500)return false
if (month < 1 || month > 12) returnfalse
return true
}

function isDate8(sDate) {
if(!/^[0-9]{8}$/.test(sDate)) {
return false;
}
var year, month, day;
year = sDate.substring(0, 4);
month = sDate.substring(4, 6);
day = sDate.substring(6, 8);
var iaMonthDays = [31,28,31,30,31,30,31,31,30,31,30,31]
if (year < 1700 || year > 2500)return false
if (((year % 4 == 0) && (year % 100!= 0)) || (year % 400 == 0)) iaMonthDays[1]=29;
if (month < 1 || month > 12) returnfalse
if (day < 1 || day >iaMonthDays[month - 1]) return false
return true
}
//身份证号码验证   
jQuery.validator.addMethod(“idcardno”, function(value, element){
return this.optional(element) || isIdCardNo(value);
}, “请正确输入身份证号码”);

//字母数字
jQuery.validator.addMethod(“alnum”, function(value, element){
return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value);
}, “只能包括英文字母和数字”);

 // 邮政编码验证
jQuery.validator.addMethod(“zipcode”, function(value, element){
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, “请正确填写邮政编码”);

  // 汉字
jQuery.validator.addMethod(“chcharacter”, function(value, element){
var tel = /^[u4e00-u9fa5]+$/;
return this.optional(element) || (tel.test(value));
}, “请输入汉字”);

// 字符最小长度验证（一个中文字符长度为2）
jQuery.validator.addMethod(“stringMinLength”, function(value,element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length >=param);
}, $.validator.format(“长度不能小于{0}!”));

// 字符最大长度验证（一个中文字符长度为2）
jQuery.validator.addMethod(“stringMaxLength”, function(value,element, param) {
var length = value.length;
for ( var i = 0; i < value.length; i++) {
if (value.charCodeAt(i) > 127) {
length++;
}
}
return this.optional(element) || (length <=param);
}, $.validator.format(“长度不能大于{0}!”));

// 字符验证
jQuery.validator.addMethod(“string”, function(value, element){
return this.optional(element) ||/^[u0391-uFFE5w]+$/.test(value);
}, “不允许包含特殊符号!”);

// 手机号码验证
jQuery.validator.addMethod(“mobile”, function(value, element){
var length = value.length;
return this.optional(element) || (length == 11&&/^(((13[0-9]{1})|(15[0-9]{1}))+d{8})$/.test(value));
}, “手机号码格式错误!”);

// 电话号码验证
jQuery.validator.addMethod(“phone”, function(value, element){
var tel = /^(d{3,4}-?)?d{7,9}$/g;
return this.optional(element) || (tel.test(value));
}, “电话号码格式错误!”);

// 邮政编码验证
jQuery.validator.addMethod(“zipCode”, function(value, element){
var tel = /^[0-9]{6}$/;
return this.optional(element) || (tel.test(value));
}, “邮政编码格式错误!”);

// 必须以特定字符串开头验证
jQuery.validator.addMethod(“begin”, function(value, element, param){
var begin = new RegExp(“^” + param);
return this.optional(element) || (begin.test(value));
}, $.validator.format(“必须以 {0} 开头!”));

// 验证两次输入值是否不相同
jQuery.validator.addMethod(“notEqualTo”, function(value, element,param) {
return value != $(param).val();
}, $.validator.format(“两次输入不能相同!”));

//验证值不允许与特定值等于
jQuery.validator.addMethod(“notEqual”, function(value, element,param) {
return value != param;
}, $.validator.format(“输入值不允许为{0}!”));

// 验证值必须大于特定值(不能等于)
jQuery.validator.addMethod(“gt”, function(value, element, param){
return value > param;
}, $.validator.format(“输入值必须大于{0}!”));

 

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/451899.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

数据结构与算法--8.二叉树的基础知识

数据结构与算法--8.二叉树的基础知识

文章目录一. 二叉树基本概念二. 二叉树的性质三. 二叉树的代码实现四. 二叉树的先序、中序、后序遍历一. 二叉树基本概念 二. 二叉树的性质 三. 二叉树的代码实现 class Node(object):"""二叉树节点"""def __init__(self,item):self.elem item…
阅读更多...
ZooKeeper（二）ZooKeeper能做什么？

ZooKeeper（二）ZooKeeper能做什么？

上一节介绍了ZooKeeper的一些基础知识&#xff0c;这一节主要讲ZooKeeper有哪些用途。命名服务&#xff08;Name Service&#xff09; 主要是作为分布式命名服务&#xff0c;通过调用zk的create node api&#xff0c;能够很容易创建一个全局唯一的path&#xff0c;这个path就可…
阅读更多...
java数组知识

java数组知识

阅读更多...
jquery vilidate 使用小例

jquery vilidate 使用小例

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 // 修改$("#updForm").validate({submitHandler:function(form){new $.flavr({ content : 是否确认修改管理员?,dialog : co…
阅读更多...
RedHat Linux 7.3基础环境搭建

RedHat Linux 7.3基础环境搭建

文章目录1&#xff0e;更改主机名2&#xff0e;关闭selinux3&#xff0e;关闭火墙4&#xff0e;重启机器5&#xff0e;设置ip6&#xff0e;挂载yum源7&#xff0e;升级openssh8&#xff0e;安全基线9&#xff0e;时区10&#xff0e;时间同步11&#xff0e;安装Vmtools12&#x…
阅读更多...
开源http协议库curl和wget的区别和使用

开源http协议库curl和wget的区别和使用

curl和wget基础功能有诸多重叠&#xff0c;如下载等。 在高级用途上的curl由于可自定义各种请求参数所以长于模拟web请求&#xff0c;用于测试网页交互&#xff08;浏览器&#xff09;&#xff1b;wget由于支持ftp和Recursive所以长于下载&#xff0c;用于下载文件&#xff08;…
阅读更多...
java类的设计技巧

java类的设计技巧

阅读更多...
Spring声明式事务管理、事务的传播行为xml配置

Spring声明式事务管理、事务的传播行为xml配置

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. <tx:method name"insert*" propagation"REQUIRED" />中name的值是ServiceImpl中各个要加入事物管理的方法…
阅读更多...
数据结构与算法--9.常见时间复杂度及其之间的关系

数据结构与算法--9.常见时间复杂度及其之间的关系

文章目录1.常见时间复杂度2.常见时间复杂度之间的关系1.常见时间复杂度 2.常见时间复杂度之间的关系
阅读更多...
CodeIgniter中运用composer安装依赖包

CodeIgniter中运用composer安装依赖包

2019独角兽企业重金招聘Python工程师标准>>> 基本信息 CodeIgniter 版本&#xff1a;3.1.8Nginx&#xff1a; Tengine/2.1.2 (nginx/1.6.2)MySQL&#xff1a; Ver 14.14 Distrib 5.6.33, for Linux (x86_64) using EditLine wrapperPHP&#xff1a; 5.6.30Zend Engi…
阅读更多...
屏幕分辨率

屏幕分辨率

http://cn.screenresolution.org/ 转载于:https://www.cnblogs.com/qiqi715/p/9363587.html
阅读更多...
数据结构与算法--10.利益最大值

数据结构与算法--10.利益最大值

1.题目 亚马逊是一家纳斯达克上市的公司&#xff0c;通过其财务报表我们可以解读它在给定时期内的股票走势信息。这些信息包括每天交易的最高价&#xff0c;最低价以及开盘价。假定你作为交易员&#xff0c;必须在股票开盘的时候做出买入或者卖出的决定。你负责设计一个算法&a…
阅读更多...
shiro管理下MD5加密的使用

shiro管理下MD5加密的使用

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 正文&#xff1a; package com.service.impl;import java.util.ArrayList;import java.util.List;import javax.annotation.Resource…
阅读更多...
BZOJ2425：[HAOI2010]计数——题解

BZOJ2425：[HAOI2010]计数——题解

https://www.lydsy.com/JudgeOnline/problem.php?id2425 https://www.luogu.org/problemnew/show/P2518 你有一组非零数字&#xff08;不一定唯一&#xff09;&#xff0c;你可以在其中插入任意个0&#xff0c;这样就可以产生无限个数。比如说给定{1,2},那么可以生成数字12,21…
阅读更多...
java继承的问题

java继承的问题

一个父类对象变量可以引用该父类的任何一个子类的对象。 但是子类是不能引用父类对象的&#xff0c;这违反类 is-a的规则。
阅读更多...
用 @Value(“${xxxx}“)注解从配置文件读取值的用法

用 @Value(“${xxxx}“)注解从配置文件读取值的用法

前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家。点击跳转到教程。 1. 用法&#xff1a; 从配置properties文件中读取init.password 的值。 Value("${init.password}")private String initPwd…
阅读更多...
scanf 输入加逗号（或者不加逗号）出现的异常及解决方案

scanf 输入加逗号（或者不加逗号）出现的异常及解决方案

我们在写 C 语言代码通常 scanf 的格式控制部分都有两种习惯&#xff0c;加逗号与不加逗号&#xff0c;而这两种情况都会因为我们的不同输入习惯产生一定的问题&#xff0c;这里给出另一种方法。 1、不加逗号 1 #include<stdio.h>2 3 #define SWAP(a, b) aa^b;ba^b;aa^b;…
阅读更多...
ant介绍

ant介绍

一般情况下&#xff0c;大多数软件公司做开发的时候都不用myeclipse开发&#xff0c;这是利用ant部署就给我们带来极大的方便&#xff0c;它先将你的project打包成war包&#xff0c;然后部署到指定的服务器中。Ant的概念 当一个代码项目大了以后&#xff0c;每次重新编译&…
阅读更多...
IT大牛说的话，不得不记

IT大牛说的话，不得不记

编程经典语录收集 01. Walking on water and developing software from a specification are easy if both are frozen. – Edward V Berard 在水中行走&#xff0c;和根据一份需求开发软件一样&#xff0c;如果它们都“冻”住了&#xff0c;那就容易了。—— 爱德华贝拉尔德 0…
阅读更多...
linux用户权限管理

linux用户权限管理

阅读更多...
最新文章

Copyright @ 2022~2023