search
HomeWeb Front-endJS Tutorialjquery.validate Custom validation methods and validate related parameters_jquery

Jquery Validate related parameters

//定义中文消息
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);

validate custom verification

$(document).ready( function() {
/**
* 身份证号码验证
*
*/
function isIdCardNo(num) {
var factorArr = new Array(7,9,10,5,8,4,2,1,6,3,7,9,10,5,8,4,2,1);
var parityBit=new Array("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;
}
/**
* 判断是否为“YYYYMM”式的时期
*
*/
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) return false
return true
}
/**
* 判断是否为“YYYYMMDD”式的时期
*
*/
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) return false
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-\uFFE5\w]+$/.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}-&#63;)&#63;\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}!"));
// 验证值小数位数不能超过两位
jQuery.validator.addMethod("decimal", function(value, element) {
var decimal = /^-&#63;\d+(\.\d{1,2})&#63;$/;
return this.optional(element) || (decimal.test(value));

jQuery.validate usage

Monday, April 12, 2010 14:33

Name Return Type Description

validate(options) returns: Validator to verify the selected FORM

valid() returns: Boolean to check whether the verification is passed

rules() returns: Options Returns the validation rules of the element

rules(add,rules) returns: Options to add verification rules

rules(remove,rules)

jquery.validate is a very excellent verification framework based on jquery. We can quickly verify some common inputs through it, and can expand our own verification methods. It also has very good support for internationalization.

jquery.validate official website: http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Usage:

1. First download jquery.js and jquery.validate.js and import the js file (note: jquery must be introduced before jquery.validate.js, otherwise an error will be reported)

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

2. Write the form code that needs to be verified and write the verification code (there are two ways to write verification code, first use the normal method)

var validator = $("formId").validate({// #formId为需要进行验证的表单ID
errorElement :"div",// 使用"div"标签标记错误, 默认:"label"
wrapper:"li",// 使用"li"标签再把上边的errorELement包起来
errorClass :"validate-error",// 错误提示的css类名"error"
onsubmit:true,// 是否在提交是验证,默认:true
onfocusout:true,// 是否在获取焦点时验证,默认:true
onkeyup :true,// 是否在敲击键盘时验证,默认:true
onclick:false,// 是否在鼠标点击时验证(一般验证checkbox,radiobox)
focusCleanup:false,// 当未通过验证的元素获得焦点时,并移除错误提示
rules: {
loginName: {// 需要进行验证的输入框name
required: true// 验证条件:必填
},
loginPassword: {// 需要进行验证的输入框name
required: true,// 验证条件:必填
minlength: 5// 验证条件:最小长度为5
},
email: {// 需要进行验证的输入框name
required: true,// 验证条件:必填
email: true// 验证条件:格式为email
}
},
messages: {
loginName: {
required: "用户名不允许为空!"// 验证未通过的消息
},
loginPassword: {
required: "密码不允许为空!",
minlength: jQuery.format("密码至少输入 {0} 字符!")
},
email: {
required: "email不允许为空",
email: "邮件地址格式错误!"
}
}

2. Use the meta String method for verification, that is, verify the content and write it into the class (note that the meta String method requires the introduction of the jquery.metadata.js file)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.metadata.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<form id="validate" action="admin/transfer!save.action" method="post">
<input type="text" class="required" name="entity.name" />
<input type="text" class="email" name="entity.email" />
<input type="submit" class="button" value="提 交" />
</form>
<script type="text/javascript">
$(document).ready(
function() {
$("#formId").validate({// #formId为需要进行验证的表单ID
meta :"validate"// 采用meta String方式进行验证(验证内容与写入class中)
errorElement :"div",// 使用"div"标签标记错误, 默认:"label"
wrapper:"li",// 使用"li"标签再把上边的errorELement包起来
errorClass :"validate-error",// 错误提示的css类名"error"
onsubmit:true,// 是否在提交是验证,默认:true
onfocusout:true,// 是否在获取焦点时验证,默认:true
onkeyup :true,// 是否在敲击键盘时验证,默认:true
onclick:false,// 是否在鼠标点击时验证(一般验证checkbox,radiobox)
focusCleanup:false,// 当未通过验证的元素获得焦点时,并移除错误提示
});
})
</script>

Note: In Struts2 applications, we often encounter input forms in the form of name="entity.name" (that is, when the name contains commas or other special symbols), we can enclose the above name in quotation marks ("") That’s it, such as:

rules: {
"entity.loginName": {// 需要进行验证的输入框name
required: true// 验证条件:必填
}
},
messages: {
"entity.loginName": {
required: "用户名不允许为空!"// 验证未通过的消息
}
}

You can send me email: happyczx@126.com. Welcome to discuss issues related to java technology together

Part of the code above comes from the payj open source payment system. This java open source project contains many excellent application source codes of Struts2 spring hibernate jquery and other frameworks, which are worth a look. I would like to recommend it here first, haha. . .

ps: Jquery Validate verification rules

(1)required:true required field
(2)remote:”check.php” Use the ajax method to call check.php to verify the input value
(3)email:true You must enter an email in the correct format
(4)url:true You must enter the URL in the correct format
(5)date:true You must enter the date in the correct format
(6)dateISO:true You must enter the date (ISO) in the correct format, for example: 2009-06-23, 1998/01/22 Only the format is verified, not the validity
(7)number:true You must enter a legal number (negative number, decimal)
(8)digits:true must enter an integer
(9)creditcard: A legal credit card number must be entered
(10)equalTo:”#field” The input value must be the same as #field
(11)accept: Enter a string with a legal suffix (the suffix of the uploaded file)
(12)maxlength:5 Enter a string with a maximum length of 5 (Chinese characters count as one character)
(13)minlength:10 Enter a string with a minimum length of 10 (Chinese characters count as one character)
(14)rangelength:[5,10] The input length must be between 5 and 10") (Chinese characters count as one character)
(15)range:[5,10] The input value must be between 5 and 10
(16)max:5 The input value cannot be greater than 5
(17)min:10 The input value cannot be less than 10

Jquery Validate submit submit

submitHandler: The function that is run after passing verification must include the form submission function, otherwise the form will not be submitted
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); //Use Jquery Form function } })

Jquery Validate error error prompt dom

.errorPlacement: Callback Default: Put the error message after the validated element
Specify the location where the error is placed. The default is: error.appendTo(element.parent()); that is, the error message is placed behind the verified element

errorPlacement: function(error, element) {
error.appendTo(element.parent());
}

Set the style of the error prompt, you can add icon display, like:

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;
}

Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
JavaScript's Role: Making the Web Interactive and DynamicJavaScript's Role: Making the Web Interactive and DynamicApr 24, 2025 am 12:12 AM

JavaScript is at the heart of modern websites because it enhances the interactivity and dynamicity of web pages. 1) It allows to change content without refreshing the page, 2) manipulate web pages through DOMAPI, 3) support complex interactive effects such as animation and drag-and-drop, 4) optimize performance and best practices to improve user experience.

C   and JavaScript: The Connection ExplainedC and JavaScript: The Connection ExplainedApr 23, 2025 am 12:07 AM

C and JavaScript achieve interoperability through WebAssembly. 1) C code is compiled into WebAssembly module and introduced into JavaScript environment to enhance computing power. 2) In game development, C handles physics engines and graphics rendering, and JavaScript is responsible for game logic and user interface.

From Websites to Apps: The Diverse Applications of JavaScriptFrom Websites to Apps: The Diverse Applications of JavaScriptApr 22, 2025 am 12:02 AM

JavaScript is widely used in websites, mobile applications, desktop applications and server-side programming. 1) In website development, JavaScript operates DOM together with HTML and CSS to achieve dynamic effects and supports frameworks such as jQuery and React. 2) Through ReactNative and Ionic, JavaScript is used to develop cross-platform mobile applications. 3) The Electron framework enables JavaScript to build desktop applications. 4) Node.js allows JavaScript to run on the server side and supports high concurrent requests.

Python vs. JavaScript: Use Cases and Applications ComparedPython vs. JavaScript: Use Cases and Applications ComparedApr 21, 2025 am 12:01 AM

Python is more suitable for data science and automation, while JavaScript is more suitable for front-end and full-stack development. 1. Python performs well in data science and machine learning, using libraries such as NumPy and Pandas for data processing and modeling. 2. Python is concise and efficient in automation and scripting. 3. JavaScript is indispensable in front-end development and is used to build dynamic web pages and single-page applications. 4. JavaScript plays a role in back-end development through Node.js and supports full-stack development.

The Role of C/C   in JavaScript Interpreters and CompilersThe Role of C/C in JavaScript Interpreters and CompilersApr 20, 2025 am 12:01 AM

C and C play a vital role in the JavaScript engine, mainly used to implement interpreters and JIT compilers. 1) C is used to parse JavaScript source code and generate an abstract syntax tree. 2) C is responsible for generating and executing bytecode. 3) C implements the JIT compiler, optimizes and compiles hot-spot code at runtime, and significantly improves the execution efficiency of JavaScript.

JavaScript in Action: Real-World Examples and ProjectsJavaScript in Action: Real-World Examples and ProjectsApr 19, 2025 am 12:13 AM

JavaScript's application in the real world includes front-end and back-end development. 1) Display front-end applications by building a TODO list application, involving DOM operations and event processing. 2) Build RESTfulAPI through Node.js and Express to demonstrate back-end applications.

JavaScript and the Web: Core Functionality and Use CasesJavaScript and the Web: Core Functionality and Use CasesApr 18, 2025 am 12:19 AM

The main uses of JavaScript in web development include client interaction, form verification and asynchronous communication. 1) Dynamic content update and user interaction through DOM operations; 2) Client verification is carried out before the user submits data to improve the user experience; 3) Refreshless communication with the server is achieved through AJAX technology.

Understanding the JavaScript Engine: Implementation DetailsUnderstanding the JavaScript Engine: Implementation DetailsApr 17, 2025 am 12:05 AM

Understanding how JavaScript engine works internally is important to developers because it helps write more efficient code and understand performance bottlenecks and optimization strategies. 1) The engine's workflow includes three stages: parsing, compiling and execution; 2) During the execution process, the engine will perform dynamic optimization, such as inline cache and hidden classes; 3) Best practices include avoiding global variables, optimizing loops, using const and lets, and avoiding excessive use of closures.

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

MantisBT

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

mPDF

mPDF

mPDF is a PHP library that can generate PDF files from UTF-8 encoded HTML. The original author, Ian Back, wrote mPDF to output PDF files "on the fly" from his website and handle different languages. It is slower than original scripts like HTML2FPDF and produces larger files when using Unicode fonts, but supports CSS styles etc. and has a lot of enhancements. Supports almost all languages, including RTL (Arabic and Hebrew) and CJK (Chinese, Japanese and Korean). Supports nested block-level elements (such as P, DIV),