Validate 表单验证用法说明

前言

Validate 是 jQuery 的一个子插件，该插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足用户的各种验证需求。该插件捆绑了一套有用的验证方法，同时提供了一个用来编写用户自定义方法的 API。默认使用英语作为错误信息，且已翻译成其他 37 种语言，支持中文错误提示。

官网地址：https://jqueryvalidation.org/

菜鸟教程地址：http://www.360doc.com/content/17/0726/06/2708086_674167741.shtml

快速上手

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Validate Form</title>
<!--jQuery-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<!--jQuery Validate-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!--jQuery Validate 中文错误提示-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>
<body><form id="dhjForm">年龄：<input type="text" name="age" id="age"/> <br/><input type="submit" name="submit" id="submit" value="提交"/></form><script type="text/javascript">$(function () {// 表单验证var validateForm = $("#dhjForm").validate({rules: {age: {digits: true,      //只能填写数字range: [0,100],    //年龄应为0~100 required: true,    //必填}}});});</script>
</body>
</html>

当你输入内容或点击提交都会校验输入的数据是否符合表单验证的要求。

至此，一个简单的 jQuery Validate表单验证的的demo就完成了。下面列表说明了Validate具体支持哪些数据校验。

序号	校验类型	取值	描述说明
1	required	true/false	必填字段，提交的时候校验。
2	remote	url接口地址	用户自定义校验规则，使用ajax方法请求指定的url接口地址，接口返回必须是ture/false。ture表示校验通过，false表示不通过，显示错误提示。
3	email	true/false	必须输入正确格式的电子邮件。
4	url	true/false	必须输入正确格式的网址。
5	date	true/false	必须输入正确格式的日期。日期校验 ie6 出错，慎用。
6	dateISO	true/false	必须输入正确格式的日期（ISO），例如：2009-06-23，1998/01/22。只验证格式，不验证有效性。
7	number	true/false	必须输入合法的数字（负数，小数）。
8	digits	ture/false	必须输入整数。
9	creditcard	true/false	必须输入合法的信用卡号。
10	equalTo	#nodeId	输入的值必须和id为nodeId的值相同。
11	accept	文件类型	输入拥有合法后缀名的字符串（上传文件的后缀）。
12	maxlength	num	输入长度最长是 num（汉字算一个字符）。
13	minlength	num	输入长度最短是 num（汉字算一个字符）。
14	rangelength	[minL,maxL]	输入长度必须介于 minL 和 maxL 之间（汉字算一个字符）。
15	range	[min,max]	输入的值转成数字（包括小数）必须介于 5 和 10 之间。
16	max	num	输入的值转成数字（包括小数）不能大于 num。
17	min	num	输入的值转成数字（包括小数）不能小于 num。

Validate进阶一：修改错误提示

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Validate Form</title>
<!--jQuery-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<!--jQuery Validate-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!--jQuery Validate 中文错误提示-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>
<body><form id="dhjForm">年龄：<input type="text" name="age" id="age"/> <br/>电子邮件：<input type="text" name="email" id="email"/> <br/><input type="submit" name="submit" id="submit" value="提交"/></form><script type="text/javascript">// 全局修改Validate错误提示信息，仅当前页有效$.extend($.validator.messages, {required: "这个为必填字段哦~",remote: "自定义校验错误~"});$(function () {// 表单验证var validateForm = $("#dhjForm").validate({rules: {age: {digits: true,      //只能填写数字range: [0,100],    //年龄应为0~100 required: true,    //必填},email: {email: true,      //必须是合法的邮箱地址required: true,    //必填}},messages:{// 修改年龄错误的提示信息，优先级高于全局错误提示age: {digits: "只能填写数字哦",range: "年龄应为0~100的数字", required: "年龄age必填字段哦~",},email: {email: "邮箱格式错误",}}});});</script>
</body>
</html>

Validate进阶二：remote用法

// 前端代码片段，remote 和 equalTo用法<form id="dhjForm">用户名：<input type="text" name="username" id="username"/> <br/>密码：<input type="password" name="password" id="password"/> <br/>重复密码：<input type="password" name="password2" id="password2"/> <br/><input type="submit" name="submit" id="submit" value="提交"/>
</form>
<script type="text/javascript">
$(function () {// 表单验证var validateForm = $("#dhjForm").validate({rules: {// rmote用法，用户名调用自定义接口校验username: {remote: {url: "${basePath}/dhj/userManage/checkUsername",   // 自定义接口type: "post",dataType: "json",data: {username: function () {return $("#username").val();}}}},// 密码重复校验password2: {equalTo: "#password"}},messages: {username: {remote: "用户名已存在！"},password2:{equalTo: "重复密码与原密码不同！"}}});
});
</script>

/*** Java后台代码片段，校验用户名唯一* @param username 用户名*/
@PostMapping("dhj/userManage/checkUsername")
@ResponseBody
public boolean checkUsername(String username) {int count = userService.queryCountByName(username);return count == 0 ? true : false;
}

Validate进阶三：自定义校验类型

Validate虽然内置了很多数据校验类型，且remote允许用户通过接口自定义校验数据，但是其remote自定义接口校验方法对于普通的常用校验来说还是过于复杂。例如：身份证号校验，我们也希望能向内置的校验一样使用，因此，我们可以自定义校验类型。

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Validate Form</title>
<!--jQuery-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/lib/jquery.js"></script>
<!--jQuery Validate-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<!--jQuery Validate 中文错误提示-->
<script src="http://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
</head>
<body>
<form id="dhjForm">手机号：<input type="text" name="phone" id="phone"/> <br/><input type="submit" name="submit" id="submit" value="提交"/>
</form>
<script type="text/javascript">
$(function () {// 校验手机号jQuery.validator.addMethod("isPhone", function(value, element) {var length = value.length;var mobile = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;return this.optional(element) || (length == 11 && mobile.test(value));}, "请填写正确的手机号码");// 表单验证var validateForm = $("#dhjForm").validate({rules: {// 密码重复校验phone: {isPhone: true}}});
});
</script>
</body>
</html>

其他校验类型举例，更多可以百度。

// 校验IP
jQuery.validator.addMethod("isIp", function(value, element) {return this.optional(element) || (/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/.test(value) && (RegExp.$1 <256 && RegExp.$2<256 && RegExp.$3<256 && RegExp.$4<256));
}, "请输入正确的IP地址");// 校验MAC
jQuery.validator.addMethod("isIp", function(value, element) {return this.optional(element) || (/[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}:[A-F\d]{2}/.test(value));
}, "请输入正确的MAC地址");// 邮政编码验证
jQuery.validator.addMethod("isPostCode", function(value, element) {return this.optional(element) || (/^[0-9]{6}$/.test(value));
}, "请正确填写您的邮政编码");// 字母数字校验
jQuery.validator.addMethod("isLetAndNum", function(value, element){return this.optional(element) ||/^[a-zA-Z0-9]+$/.test(value);
}, "只能包括英文字母和数字");// 汉字校验
jQuery.validator.addMethod("IsChina", function(value, element){return this.optional(element) || (/^[u4e00-u9fa5]+$/.test(value));
}, "请输入汉字");// 字符验证
jQuery.validator.addMethod("IsChars", function(value, element){return this.optional(element) ||/^[u0391-uFFE5w]+$/.test(value);
}, "内容不允许包含特殊符号");// 必须以特定字符串开头验证
jQuery.validator.addMethod("isBegin", function(value, element, param){var begin = new RegExp("^" + param);return this.optional(element) || (begin.test(value));
}, $.validator.format("输入的内容必须以 {0} 开头!"));// 身份证号校验
$(function () {jQuery.validator.addMethod("isIdCard", function (value, element){return this.optional(element) || isIdCardNo(value);},"请输入合法的身份证号码");
});
// 校验身份证号的方法，规则太复杂，抽出成方法
function isIdCardNo(num) {var factorArr = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5,8, 4, 2, 1];var parityBit = ["1", "0", "X", "9", "8", "7", "6", "5", "4","3", "2"];var varArray= [];var lngProduct = 0;var intCheckDigit;var intStrLen = num.length;var idNumber= num;//initializeif(intStrLen !== 18) {return false;}// check andset valuefor (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 datevar date8 = idNumber.substring(6, 14);if (!isDate8(date8)) {return false;}// calculate the sum of the productsfor (i = 0; i < 17; i++) {lngProduct = lngProduct + varArray[i];}// calculate the check digitintCheckDigit = parityBit[lngProduct % 11];// check last digitif (varArray[17] != intCheckDigit) {return false;}}else{return false;}return true;
}
// 18位身份证日期校验
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;}return !(day < 1 || day > iaMonthDays[month - 1]);
}

Validate 表单验证用法说明相关推荐

validate表单验证的用法
正则表达式验证字符串 var value='这是待验证的字符串' var char=/^[\u4e00-\u9fa5]+$/; //稚嫩恶搞输入汉字 console.log(char.test(val ...
jQuery-easyui和validate表单验证实例
jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...
html中表单的校验的插件,功能强大的jquery.validate表单验证插件
本文实例为大家分享了jquery.validate表单验证的使用方法,供大家参考,具体内容如下 1 .表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助 ...
jQuery Validate表单验证框架详解
jQuery表单验证框架总结 jQuery Validate验证框架详解 jQuery校验官网地址:bassistance.de » jQuery plugin: Validation 一.导入js库 ...
jQuery Validate 表单验证插件----自定义校验结果样式
一.下载依赖包网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.引入依赖包 <script src="../../scripts/j ...
Laravel POST请求API接口使用validate表单验证返回欢迎页
突然遇到的问题就是使用Laravel进行开发API接口的时候发现在表单验证不通过的时候返回了登录页猜测问题应该是因为表单验证失败后进行了重定向导致的因为返回状态码200 网上找了好久没找到 ...
jQuery validate 表单验证，涵盖各种类型数据
本来觉得用这个会很难,结果试了试,发现却是简单了不少东西啊,什么getElementById,if 什么的,只用几个属性名什么的就可以解决不同状态显示不同提示,很强大很方便. <%@ page ...
jquery validate表单验证插件
1 表单验证的准备工作在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
jQuery validate表单验证demo
Query Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求. 官方文档 http://jqueryvalidation. ...