【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

相关文章
|
JavaScript 前端开发
百叶窗效果的jQuery幻灯片插件
百叶窗效果的jQuery幻灯片插件
|
JavaScript
jquery无限循环内容滑块插件
jquery无限循环内容滑块插件
|
JavaScript
简单轻量级的jquery图表插件
简单轻量级的jquery图表插件
|
JavaScript
jQuery响应式内容选项卡插件
jQuery响应式内容选项卡插件
|
JavaScript 前端开发
带完成百分比的jQuery表单插件
带完成百分比的jQuery表单插件
|
JavaScript 内存技术
支持多种动画特效的响应式jQuery幻灯片插件
支持多种动画特效的响应式jQuery幻灯片插件
jQuery+Slick插件实现游戏人物轮播展示切换源码
jQuery+Slick插件实现游戏人物轮播展示切换源码
229 14
|
JavaScript 前端开发 数据安全/隐私保护
JQuery验证插件validation的使用
下载:        下载validatation插件地址:jqueryvalidation.org/;这里需要注意的是validation验证插件有依赖于JQuery的,所以连同JQuery也要一起放置到项目中。
6317 0
|
JavaScript 前端开发
jQuery和CSS3滑动展开菜单按钮插件
这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开
392 21
|
JavaScript
jquery图片和pdf文件预览插件
EZView.js是一款jquery图片和pdf文件预览插件。EZView.js可以为图片和pdf格式文件生成在线预览效果。支持的文件格式有pdf、jpg、 png、jpeg、gif。
462 16