简单好用的表单校验插件——jQuery Validate基本使用方法总结
jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/tag/1.17.0
1.基本用法
从字面就知道既然是jquery的插件,首先得引入jquery,然后下载jquery-validate.js后引入。
其次既然是表单校验,首先得有一个表单,即form标签,然后由于浏览器是通过name属性来提交表单数据的,所以需要给校验的控件都加上name属性。
校验的写法有两种,一种是把校验规则写在控件中,另一种是写在js里。
先看第一种
<form id="loginForm" name='f' action='/auth/login' method='POST'>
<div class="el-form-item">
<input type="text" name='username' id="username" placeholder="用户名" class="el-input" required>
</div>
<div class="el-form-item">
<input type="password" name='password' id="password" placeholder="密码" class="el-input" required>
</div>
<div class="login-btn">
<button type="submit" class="el-button">登录</button>
</div>
</form>
required属性表示必填,默认情况下在点击提交按钮的时候会触发表单校验,之后input在失焦、keyup事件的时候都会校验。
我比较推荐的是第二种写法,即把校验规则写在js里,对象的形式可以规则和提示信息一一对应起来。
还是上面的用户登录,html是基本写法
<form id="loginForm" name='f' action='/auth/login' method='POST'>
<div class="el-form-item">
<input type="text" name='username' id="username" placeholder="用户名" class="el-input">
</div>
<div class="el-form-item">
<input type="password" name='password' id="password" placeholder="密码" class="el-input">
</div>
<div class="login-btn">
<button type="submit" class="el-button">登录</button>
</div>
</form>
$("#loginForm").validate({
rules:{
username:"required",
password:"required",
},
messages:{
username:"请输入用户名",
password:"请输入密码",
}
});
这样感觉更直观清晰。
2.内置验证方式
rules里每个控件可以给多个验证方式,常用的有:
required 必填验证元素。
minlength(length) maxlength(length) rangelength(range) 设置最小长度、最大长度和长度范围 [min,max]。
min(value) max(value) range(range) 设置最大值、最小值和值的范围。
email() 验证电子邮箱格式。
url() 验证 URL 格式。
date() 验证日期格式(类似 30/30/2008 的格式,不验证日期准确性只验证格式)。
number() 验证十进制数字(包括小数的)。
digits() 验证整数。
equalTo(other) 验证两个输入框的内容是否相同。修改密码时经常使用。
3.错误信息显示
默认情况在校验失败时会创建calss为error的label标签存放错误提示信息,并放在当前校验控件的后面,即error.appendTo(element.parent());
如果要自定义显示位置的话可以使用 errorPlacement:callBack修改
errorPlacement: function(error, element) {
//error为校验失败创建的信息提示标签,element为当前校验控件
}
errorClass 可以指定标签类名。
errorElement 可以指定标签类型。
errorLabelContainer 可以把错题信息统一放在一个容器里。
wrapper 用什么标签再把上边的 errorELement 包起来。
关于样式的修改,校验失败当前校验控件也会添加error类名,所以可以定义input.error和label.error的样式。
4.校验成功的信息显示
校验成功可以设置success:"className"来设置样式,也可以在success后接一个函数为校验成功后的操作。
$("#loginForm").validate({
rules:{
username:"required",
password:"required",
},
messages:{
username:"请输入用户名",
password:"请输入密码",
},
success: "valid"
});
5.添加自定义校验
使用addMethod(name,method,message)添加自定义校验,三个参数分别为:自定义校验的名称、方法、提示信息。
在 additional-methods.js 文件中存在一些扩展的自定义校验方法,如notEqualTo(不同于)等。
jQuery.validator.addMethod( "notEqualTo", function( value, element, param ) {
return this.optional(element) || !$.validator.methods.equalTo.call( this, value, element, param );
}, "Please enter a different value, values must not be the same." );
method的三个参数分别为:校验控件中的value值、校验控件元素、调用此校验方法中的参数(如equalTo("#newPassword"),param为“#newPassword”)。
this.optional(element)用于表单控件的值不为空时才触发验证。当表单的值为空时,this.optional(element) == true,即可以不填但是格式不能错的场景。
method返回值true为验证成功,false为验证失败。
6.使用普通按钮代替submit校验
很多时候我们提交表单并不是用的form形式,而是ajax,这时候就不能用submit来触发了。
validator()会返回一个对象,这个对象下的form()方法可以验证 form 返回成功还是失败。
function validform(){
return $("#changePasswordForm").validate({
rules:{
oldPassword:"required",
newPassword:{
required:true,
notEqualTo:"#oldPassword"
},
newPassword2:{
required:true,
equalTo:"#newPassword"
},
},
messages:{
oldPassword:"原密码不能为空",
newPassword:{
required:"新密码不能为空",
notEqualTo:"新密码不能与原密码重复"
},
newPassword2:{
required:"请确认新密码",
equalTo:"两次密码输入不一致"
},
}
});
}
//注册表单验证
$(validform()); //点击按钮事件
$("#submitBtn").click(function(){
if (validform().form()) {
//请求ajax
ajaxSubmit();
}else{}
});
7.需要注意的点
有时候会遇到form表单中按钮点击时自动执行表单提交操作的问题,或者点击form中的按钮请求ajax,可是自动在url后拼了一段奇怪的字符串导致请求status为cancel。
原因是没有给button按钮规定 type 属性。
button按钮如果没有指定type属性的话,Internet Explorer 的默认类型是 "button",而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。
还有更详细的内容没有整理,比如validator其他的常用方法,校验方式,radio、checkbox、select的校验等等。
具体参考菜鸟教程:http://www.runoob.com/jquery/jquery-plugin-validate.html
简单好用的表单校验插件——jQuery Validate基本使用方法总结的更多相关文章
- 表单验证插件jquery.validate的使用方法演示
jQueryValidate表单验证效果 jquery.validate验证错误信息的样式控制 <!--validate验证插件的基础样式--> input.error{border: 1 ...
- jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js
原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...
- jQuery插件 -- 表单验证插件jquery.validate.js
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...
- 表单验证插件jquery.validate.js
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...
- jq中的表单验证插件------jquery.validate
今天我们来说一下表单验证,有人说我们在进行表单验证的时候使用正则来验证是非常麻烦的,现在我来给大家介绍一下表单验证的插件:jquery.validate.min.js 它是与jquery一起结合用来使 ...
- jQuery表单验证插件——jquery.validate.js
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...
- 【JAVAWEB学习笔记】28_jqueryAjax:json数据结构、jquery的ajax操作和表单校验插件
Ajax-jqueryAjax 今天内容: 1.json数据结构(重点) 2.jquery的ajax操作(重点) 3.jquery的插件使用 一.json数据结构 1.什么是json JSON(J ...
- 表单校验插件(bootstrap-validator)
表单校验插件(bootstrap-validator) 参考文档 http://blog.csdn.net/nazhidao/article/details/51542508 http://blog. ...
- 2.12 学习总结 之 表单校验插件validate
一.说在前面 昨天 学习了ajax的相关知识 今天 学习表单校验插件validate, 并使用ajax 自定义校验规则 二.validate 插件 1.网络上有许多成熟的插件共使用者参考,插件就是将j ...
随机推荐
- git 统计命令
git log --author='user' --pretty=tformat: --numstat --since='2018-01-01' --before='2018-10-10' | gaw ...
- nagios 监控shell脚本
线上应用shell脚本 参考链接:http://os.51cto.com/art/201301/376725.htm 0--各方面都正常,检查成功完成. 1--资源处于警告状态.某个地方不太妙. 2- ...
- IaaS vs PaaS vs SaaS
在云计算的早期阶段,企业面临的最大问题是他们是否应该使用公共云服务.如今,几乎所有的组织都在采用一些公共云服务.更重要的问题是企业应该使用哪种云服务:基础设施即服务(IaaS),平台即服务(PaaS) ...
- 程序或-内存区域分配& ELF分析 ***
一.在学习之前我们先看看ELF文件. ELF分为三种类型: 1. .o 可重定位文件(relocalble file) 2. 可执行文件 3. 共享库(shared library) 三种格式基本上从 ...
- (转)c#实现开机自启动
RegistryKey key = Registry.LocalMachine.OpenSubKey("SOFTWARE\\Microsoft\\Windows\\CurrentVersio ...
- Socket代码
服务器端 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; ...
- 「自己开发直播」rtmp-nginx-module实现直播状态、观看人数控制
这是自己搭建直播服务器.开发直播平台系列的文章,前面两篇文章分别为: 通过Nginx-rtmp-module搭建直播服务器并实现直播 实现nginx-rtmp-module多频道输入输出与权限控制 这 ...
- LevelDB Cache实现机制分析
几天前淘宝量子恒道在博客上分析了HBase的Cache机制,本篇文章,结合LevelDB 1.7.0版本的源码,分析下LevelDB的Cache机制. 概述 LevelDB是Google开源的持久化K ...
- linux下软件的种类和对应的安装及卸载的方式
转: 一个Linux应用程序的软件包中可以包含两种不同的内容: 1)一种就是可执行文件,也就是解开包后就可以直接运行的.在Windows中所 有的软件包都是这种类型.安装完这个程序后,你就可以使用,但 ...
- EasyUI TreeJson
1. TreeJson str = GetTreeJsonByTable(dt, "); StringBuilder treeResult = new StringBuilder(); St ...