Validate使用及配置
时间:2022-07-23
本文章向大家介绍Validate使用及配置,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
官网地址:http://jqueryvalidation.org/
导入JS文件
下载压缩包后validate文件位于dist目录,目录中包含jquery.validate.js 与 additional-methods.js以及各自的min文件。additional-methods.js为附加的验证方法,可根据情况导入。
<script src="./js/jquery.js" type="text/javascript"></script>
<script src="./js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/additional-methods.js" type="text/javascript"></script>
使用方法
以注册页为例,需要验证用户名、密码、重复密码、验证码。其中用户名需检测唯一性,验证码需检测是否正确。form-register为表单ID,验证代码如下:
$().ready(function(){
$("#form-register").validate({
debug: true,
onfocusout: function (element) {
$(element).valid();
},
errorElement: 'label',
errorClass: 'text-error',
submitHandler: function(form) {
form.submit();
},
errorPlacement: function(error, element) {
if(element.attr("name") == 'data[captcha]') {
error.insertAfter("#captcha_msg");
} else {
error.insertAfter(element);
}
},
rules:{ 'data[username]': {
required: true,
minlength: 6,
maxlength:20,
lettersonly:true,
remote:{ url: "{{ site_url('ajax/user_check') }}", type: "post"
}},
'data[password]': {
required: true,
minlength: 6,
maxlength:50
},
'data[repassword]': {
required: true,
equalTo: "#password"
},
'data[captcha]': {
required: true,
minlength: 4,
remote:{ url: "{{ site_url('captcha/check') }}", type: "post" }
} },
messages:{}
});
});
提示信息
点击提交按钮后验证不通过的会自动在input后增加提示信息
<label for="username" class="text-error" style="">This field is required.</label>
默认提示信息为英文,可将下面提示信息保存到messages_zh.js并引入。
/* * Translated default messages for the jQuery validation plugin. * Locale: ZH (Chinese, 中文 (Zhōngwén), 汉语, 漢語) */
(function ($) {
$.extend($.validator.messages,
{ required: "必填字段",
remote: "请修正该字段",
email: "请输入正确格式的电子邮件",
url: "请输入合法的网址",
date: "请输入合法的日期",
dateISO: "请输入合法的日期 (ISO).",
number: "请输入合法的数字",
digits: "只能输入整数",
creditcard: "请输入合法的信用卡号",
equalTo: "请再次输入相同的值",
accept: "请输入拥有合法后缀名的字符串",
maxlength: $.validator.format("请输入一个长度最多是 {0} 的字符串"),
minlength: $.validator.format("请输入一个长度最少是 {0} 的字符串"),
rangelength: $.validator.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
range: $.validator.format("请输入一个介于 {0} 和 {1} 之间的值"),
max: $.validator.format("请输入一个最大为 {0} 的值"),
min: $.validator.format("请输入一个最小为 {0} 的值")
});
}(jQuery));
默认的提示信息可能还不够友好,可以进提示信息进行配置,设置messages字段即可
messages:{
'data[username]': {
required: '请输入用户名',
minlength: '请输入6-20个英文字符',
maxlength: '请输入6-20个英文字符',
lettersonly: '请输入6-20个英文字符',
remote: '该用户名已被使用'
},
'data[password]': {
required: "请输入密码",
minlength: jQuery.format("密码不能小于{0}个字 符"),
maxlength: jQuery.format("密码不能大于{0}个字 符")
},
'data[repassword]': {
required: "请输入确认密码",
equalTo: "两次密码输入不一致"
},
'data[captcha]': {
required: "请输入验证码",
minlength: "验证码输入错误",
remote: "验证码输入错误"
}
}
常用设置
- debug:开启调试,当设置true时只验证, 不会提交表单。
- onfocusout:失去焦点验证,上例中是失去焦点就验证,不需要点击submit按钮。
- errorElement: 用来指定错误提示标签,默认为label。
- errorClass: 指定错误提示的css类名,可以自定义错误提示的样式。
- submitHandler:可以接管submit事件。
- errorPlacement:指定错误显示为位置,默认为验证元素后。
- rules:验证规则。
- message:指定提示信息。
- ignore:对某些元素不进行验证
自定义验证方法
addMethod(name,method,message)方法:
- 参数name是添加的方法的名字
- 参数method是一个函数,接收三个参数(value,element,param)
-
- value是元素的值,
- element是元素本身
- param是参数
如additional-methods.js中的lettersonly验证
jQuery.validator.addMethod("lettersonly", function(value, element) { return this.optional(element) || /^[a-z]+$/i.test(value); }, "Letters only please");
- RestTemplate的逆袭之路,从发送请求到负载均衡
- limit_area_cirle
- Spring RestTemplate中几种常见的请求方式
- 什么是客户端负载均衡
- jQuery 升级踩坑大全
- Eureka中的核心概念
- Spring Cloud Zuul中异常处理细节
- Spring Cloud Zuul中路由配置细节
- Spring Cloud中的API网关服务Zuul
- MYSQL | 企业整合解决方案之mysql集群搭建-主从配置
- Spring Cloud中Feign配置详解
- Spring Cloud中Feign的继承特性
- JavaScript 常用方法总结
- Spring Cloud中声明式服务调用Feign
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaWeb——Redis数据库之Jedis操作5种类型数据的使用总结与前端Ajax获取Redis缓存数据的案例实战(结合了MySQL数据库)
- Java——数据库编程JDBC之快速入门吐血总结及各关键对象详解(提供了JDBCUtils工具类)
- MySQL数据库——事务的操作(开启、回滚、提交)、特征、隔离级别基础总结
- MySQL数据库——数据库的设计(多表之间的关系与三大范式)与备份还原
- JavaWeb——JSP入门学习(JSP基本概念、JSP脚本、JSP内置对象)
- MySQL数据库——数据库CRUD之基本DML增删改表操作及DQL查表操作
- JavaWeb——AJAX异步技术实现方式与案例实战(原生的JS方式、使用JQuery方式)
- JavaWeb——一文带你入门Servlet(生命周期、注解配置方法、IDEA与tomcat的相关配置)
- JavaWeb——JQuery之基础案例实战(实现表格隔行换色、实现全选全不选、QQ表情选择、下拉列表选中条目左右选择功能)
- JavaWeb——JQuery之DOM操作应用及实践案例总结(DOM内容操作、DOM属性操作、CRUD操作)
- JavaWeb——Filter过滤器快速入门与是否登录验证&过滤敏感词汇案例实战(Filter配置方式、执行流程、生命周期方法、过滤器链)
- JavaWeb——会话技术之Session快速入门与验证码登录案例实战(Session实现原理、使用细节、快速入门、Session的特点)
- Nginx配置文件服务器
- JavaWeb——会话技术之Cookie快速入门与案例实战(详细讲解了Cookie实现原理、Cookie使用细节、Cookie的特点及作用)
- docker安装kibana