【JQuery】JQuery入门——JQuery 插件-validation

简介: 本期主要介绍JQuery入门——知识点讲解(四)

1. 插件简述


JQuery 有着大量的功能插件,每种插件都有自己独有的功能。

例如:

表单校验----validation

移动互联网开发----BootStrap

Ajax 数据展示-------EasyUI

今天我们学习其表单校验插件---- validation

image.png

2. 插件导入


validate jQuery 插件,及必须在 jQuery 的基础上进行运行。我们将导入 jQuery 库、validate库、和国际化资源库(可选,建议导入)

image.png

准备代码:

image.png

image.png

3. 为指定表单加入校验


validate 需要手动的声明,对那个表单进行校验,及需要手动调用 validate()方法。

image.png

4. 为校验加入规则


validate()方法中可以指定添加规则

image.png

规则速查表

image.png

注意:为了方便展示,请设置如下样式:

image.png

5. 为规则自定义错误信息


messages 可以为已经定好的规则自定义错误信息

image.png

其中

{0} 动态获取规则值的第一个值

{1} 动态获取规则值的第二个值

6. 为错误信息自定义显示位置(扩展-了解)


格式:

<form>

<label class="error" for=" 被添加规则的表单输入项 name" ></label>

……

</form>

例如,表单中的生日 birthday ,已经被添加规则。

<form>

<label class="error" for="birthday"></label>

……

</form>

7. 自定义校验规则(扩展)


如果希望自定义校验规则,需要使用$.validator.addMethod 完成。

image.png

相关文章
|
1月前
|
JavaScript
jQuery 树型菜单插件(Treeview)
jQuery 树型菜单插件(Treeview)
61 2
|
5月前
|
设计模式 JavaScript 前端开发
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
必知的技术知识:jQuery插件开发精品教程,让你的jQuery提升一个台阶
62 1
|
1月前
|
JavaScript 前端开发
jQuery Growl 插件(消息提醒)
jQuery Growl 插件(消息提醒)
47 4
jQuery Growl 插件(消息提醒)
|
1月前
|
存储 JSON JavaScript
jQuery Cookie 插件
jQuery Cookie 插件
40 4
jQuery Cookie 插件
|
17天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
28 0
|
1月前
|
JavaScript 数据安全/隐私保护
jQuery Password Validation(密码验证)
jQuery Password Validation(密码验证)
24 3
|
1月前
|
JavaScript
Jquery从入门到精通
Jquery从入门到精通
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
Validform jQuery插件详解
【8月更文挑战第21天】
|
5月前
|
JavaScript 前端开发 API
jQuery 入门:轻松创建与插入节点
jQuery 入门:轻松创建与插入节点
|
JavaScript 前端开发 数据安全/隐私保护
JQuery验证插件validation的使用
下载:        下载validatation插件地址:jqueryvalidation.org/;这里需要注意的是validation验证插件有依赖于JQuery的,所以连同JQuery也要一起放置到项目中。
6186 0