jQuery Validate 表单验证 — 用户注册简单应用
相信很多coder在表单验证这块都是自己写验证规则的,今天我们用jQuery Validate这款前端验证利器来写一个简单的应用。
可以先把我写的这个小demo运行试下,先睹为快。猛戳链接--》,http://pan.baidu.com/s/1o8zVdoQ
1.Demo讲解(validate参数见第3点)
1.1 Validate 要依赖jQuery的,所以HTML中js的引用关系如下:
<script type="text/javascript" src="../js/common/jquery-1.11.0.js" ></script>
<script type="text/javascript" src="../js/common/jquery-validation-1.14.0/jquery.validate.min.js" ></script>
<script type="text/javascript" src="../js/common/jquery-validation-1.14.0/additional-methods-common.js" ></script>
<script src="../js/controller/blog-validate.js" type="text/javascript" charset="utf-8"></script>
第一个就不用说了,第二个是验证插件(必须引用),第三个是自定义验证规则,第四个我们自己的js
1.2 注册form的结构:
<form class="am-form am-form-horizontal yf-form-tips add-form">
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">用户名: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="text" id="" name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">密码: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="password" id="password1" name="addFormPass1" placeholder="请输入您的密码" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormName" class="am-u-sm-2 am-form-label">确认密码: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="password" id="" name="addFormPass2" placeholder="请再次输入您的密码" class="" maxlength="20">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormPhone" class="am-u-sm-2 am-form-label">手机号: </label>
<div class="am-u-sm-10 yf-pl10">
<input type="text" id="" name="addFormPhone" placeholder="请输入您的手机号" class="" maxlength="11">
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<label for="addFormAdd" class="am-u-sm-2 am-form-label am-vertical-align-top yf-pt0">联系地址: </label>
<div class="am-u-sm-10 yf-pl10">
<textarea id="" placeholder="请输入您的联系地址" name="addFormAdd" class="" maxlength="100"></textarea>
<span class="yf-error-tip"></span>
</div>
</div>
<div class="am-form-group am-g-collapse">
<div class="am-u-sm-offset-2 yf-pl10">
<button type="submit" class="am-btn am-btn-primary" onclick="submitInfo()">提交</button>
</div>
</div> </form>
1.3 主要的js(blog-validate.js):
//表单验证规则
var formValid = $(".add-form").validate({
rules: {
"addFormName":{
"required":true, //必填字段
},
"addFormPass1":{
"required":true
},
"addFormPass2":{
"required":true,
"equalTo": "#password1" //输入值必须和 #password1 相同
},
"addFormPhone":{
"required":true,
"digits":true, //必须输入整数
"minlength":11 //输入长度最小是 11
},
"addFormAdd":{
"required":true
}
},
messages: {
"addFormName":{
"required":"用户名不能为空哦"
},
"addFormPass1":{
"required":"密码不能为空哦"
},
"addFormPass2":{
"required":"确认密码不能为空哦",
"equalTo":"两次输入的密码不一致哦"
},
"addFormPhone":{
"required":"手机号不能为空哦",
"digits":"手机号格式不正确哦",
"minlength":"手机号格式不正确哦",
},
"addFormAdd":{
"required":"地址不能为空哦"
}
},
errorPlacement:function(error,element) {
error.appendTo(element.siblings(".yf-error-tip"));
}
}); //提交前开始验证
var submitInfo = function(){
if($('.add-form').valid()){
alert('恭喜你,验证通过了!');
};
}
说明:
主要通过 $('.add-form').valid() 触发验证;
提示信息可在 errorPlacement 中配置放置的位置,提示默认的样式是"error",如需修改,参考validate ()可选项中的"errorClass"
2.有几个特别要注意的地方:
- validate ()的对象$(".add-form")对应的DOM标签必须是form标签
- 执行$(".add-form").validate 时,form在HTML结构中是存在的,类似jquery的remove之后或者angularJs的ngIf,都会导致验证失败
- validate ()的属性"rules"必须对应验证表单中标签的name属性
- 验证规则可以直接写在HTML中(不推荐,提示信息也不好处理),比如:
<input type="text" id="" name="addFormName" placeholder="请输入您的用户名" class="" maxlength="20" required minlength='2'>
3.Validate官方标准
3.1 Validate的默认校验规则
名称 | 返回类型 | 描述 |
---|---|---|
required() | Boolean | 必填验证元素。 |
required(dependency-expression) | Boolean | 必填元素依赖于表达式的结果。 |
required(dependency-callback) | Boolean | 必填元素依赖于回调函数的结果。 |
remote(url) | Boolean | 请求远程校验。url 通常是一个远程调用方法。 |
minlength(length) | Boolean | 设置最小长度。 |
maxlength(length) | Boolean | 设置最大长度。 |
rangelength(range) | Boolean | 设置一个长度范围 [min,max]。 |
min(value) | Boolean | 设置最小值。 |
max(value) | Boolean | 设置最大值。 |
email() | Boolean | 验证电子邮箱格式。 |
range(range) | Boolean | 设置值的范围。 |
url() | Boolean | 验证 URL 格式。 |
date() | Boolean | 验证日期格式(类似 30/30/2008 的格式,不验证日期准确性只验证格式)。 |
dateISO() | Boolean | 验证 ISO 类型的日期格式。 |
dateDE() | Boolean | 验证德式的日期格式(29.04.1994 或 1.1.2006)。 |
number() | Boolean | 验证十进制数字(包括小数的)。 |
digits() | Boolean | 验证整数。 |
creditcard() | Boolean | 验证信用卡号。 |
accept(extension) | Boolean | 验证相同后缀名的字符串。 |
equalTo(other) | Boolean | 验证两个输入框的内容是否相同。 |
phoneUS() | Boolean | 验证美式的电话号码 |
3.2 validate ()的可选项
描述 |
代码 |
debug:进行调试模式(表单不提交)。 |
$(".selector").validate({ debug:true}) |
把调试设置为默认。 |
$.validator.setDefaults({ debug:true}) |
submitHandler:通过验证后运行的函数,里面要加上表单提交的函数,否则表单不会提交。 |
$(".selector").validate({ submitHandler:function(form) { $(form).ajaxSubmit(); }}) |
ignore:对某些元素不进行验证。 |
$("#myform").validate({ ignore:".ignore"}) |
rules:自定义规则,key:value 的形式,key 是要验证的元素,value 可以是字符串或对象。 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }}) |
messages:自定义的提示信息,key:value 的形式,key 是要验证的元素,value 可以是字符串或函数。 |
$(".selector").validate({ rules:{ name:"required", email:{ required:true, email:true } }, messages:{ name:"Name不能为空", email:{ required:"E-mail不能为空", email:"E-mail地址不正确" } }}) |
groups:对一组元素的验证,用一个错误提示,用 errorPlacement 控制把出错信息放在哪里。 |
$("#myform").validate({ groups:{ username:"fname lname" }, errorPlacement:function(error,element) { if (element.attr("name") == "fname" || element.attr("name") == "lname") error.insertAfter("#lastname"); else error.insertAfter(element); }, debug:true}) |
OnSubmit:类型 Boolean,默认 true,指定是否提交时验证。 |
$(".selector").validate({ onsubmit:false}) |
onfocusout:类型 Boolean,默认 true,指定是否在获取焦点时验证。 |
$(".selector").validate({ onfocusout:false}) |
onkeyup:类型 Boolean,默认 true,指定是否在敲击键盘时验证。 |
$(".selector").validate({ onkeyup:false}) |
onclick:类型 Boolean,默认 true,指定是否在鼠标点击时验证(一般验证 checkbox、radiobox)。 |
$(".selector").validate({ onclick:false}) |
focusInvalid:类型 Boolean,默认 true。提交表单后,未通过验证的表单(第一个或提交之前获得焦点的未通过验证的表单)会获得焦点。 |
$(".selector").validate({ focusInvalid:false}) |
focusCleanup:类型 Boolean,默认 false。当未通过验证的元素获得焦点时,移除错误提示(避免和 focusInvalid 一起使用)。 |
$(".selector").validate({ focusCleanup:true}) |
errorClass:类型 String,默认 "error"。指定错误提示的 css 类名,可以自定义错误提示的样式。 |
$(".selector").validate({ errorClass:"invalid"}) |
errorElement:类型 String,默认 "label"。指定使用什么标签标记错误。 |
$(".selector").validate errorElement:"em"}) |
wrapper:类型 String,指定使用什么标签再把上边的 errorELement 包起来。 |
$(".selector").validate({ wrapper:"li"}) |
errorLabelContainer:类型 Selector,把错误信息统一放在一个容器里面。 |
$("#myform").validate({ errorLabelContainer:"#messageBox", wrapper:"li", submitHandler:function() { alert("Submitted!") }}) |
showErrors:跟一个函数,可以显示总共有多少个未通过验证的元素。 |
$(".selector").validate({ showErrors:function(errorMap,errorList) { $("#summary").html("Your form contains " + this.numberOfInvalids() + " errors,see details below."); this.defaultShowErrors(); }}) |
errorPlacement:跟一个函数,可以自定义错误放到哪里。 |
$("#myform").validate({ errorPlacement:function(error,element) { error.appendTo(element.parent("td").next("td")); }, debug:true}) |
success:要验证的元素通过验证后的动作,如果跟一个字符串,会当作一个 css 类,也可跟一个函数。 |
$("#myform").validate({ success:"valid", submitHandler:function() { alert("Submitted!") }}) |
highlight:可以给未通过验证的元素加效果、闪烁等。 |
更多的用法讲解,大家可以参考validate官网,或者菜鸟教程。
jQuery Validate 表单验证 — 用户注册简单应用的更多相关文章
- ASP.NET MVC Jquery Validate 表单验证的多种方式
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍
在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...
- Jquery Validate 表单验证的多种方式
ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...
- jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验
一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW 访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...
- jquery validate表单验证插件-推荐
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jquery validate表单验证插件
1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家. 1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...
- jQuery Validate 表单验证
在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交,我们可以通过自己编写JavasScript代码来验证,但是有时数据量过多时就会有些难度了.基于jQuery的jquery.valid ...
- jQuery Validate 表单验证插件----Validate简介,官方文档,官方下载地址
一. jQuery Validate 插件的介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆 ...
- (转)jQuery Validate 表单验证
在做网页表单时时常需要在客户端对表单填写的数据进行验证一番才能提交,我们可以通过自己编写JavasScript代码来验证,但是有时数据量过多时就会有些难度了.基于jQuery的jquery.valid ...
随机推荐
- Spring6:基于注解的Spring MVC(上篇)
什么是Spring MVC Spring MVC框架是一个MVC框架,通过实现Model-View-Controller模式来很好地将数据.业务与展现进行分离.从这样一个角度来说,Spring MVC ...
- Team Leader 你不再只是编码, 来炖一锅石头汤吧
h3{ color: #000; padding: 5px; margin-bottom: 10px; font-weight: bolder; background-color: #ccc; } h ...
- C# OracleDBhelper
引用 using System.Configuration;using System.Data.OracleClient; 连接字符串 <connectionStrings> <ad ...
- 新编码神器Atom使用纪要
Atom是 Github 专门为程序员推出的一个跨平台文本编辑器.她很大程度上继承了SublimeText的美,而又不仅如此.有费了蛮大力气总结了一篇关于SublimeText文章: 如何优雅地使用S ...
- Electron的环境配置
原文地址http://huisky.com/blog/161218121551123 本文介绍了Electron的环境配置,包括Electron下载.nodejs下载安装.NPM+Bower安装配置. ...
- Oracle数据库自动备份SQL文本:Procedure存储过程,View视图,Function函数,Trigger触发器,Sequence序列号等
功能:备份存储过程,视图,函数触发器,Sequence序列号等准备工作:--1.创建文件夹 :'E:/OracleBackUp/ProcBack';--文本存放的路径--2.执行:create or ...
- dom addeventlistener与id 绑定事件的区别
文档中有写. //addEventListener() 方法用于向指定元素添加事件句柄. //提示: 使用 removeEventListener() 方法来移除 addEventListener() ...
- git 切换远程分支
http://zhidao.baidu.com/link?url=cuqJsL9skJJn5c556zXfP1dgCAOUK37CDXkNIw_sS0YKmvoROTI0HP7-PbKjgs6Lv4X ...
- 用原始方法解析复杂字符串,json一定要用JsonMapper么?
经常采集数据,肯定会碰到解析字符串,包括整个页面的html,或者json以及一些不标准的json格式... 以前用json序列化,有时候需要实体类,有的时候没有,比较麻烦,听说可以用JsonMappe ...
- Android消息传递之EventBus 3.0使用详解
前言: 前面两篇不仅学习了子线程与UI主线程之间的通信方式,也学习了如何实现组件之间通信,基于前面的知识我们今天来分析一下EventBus是如何管理事件总线的,EventBus到底是不是最佳方案?学习 ...