(1)、直接引用

一行代码引入插件,local 参数用来加载对应的配置文件。如果不传 local 参数,配置以及样式就需要自行引入。

<script src="path/to/nice-validator/jquery.validator.js?local=zh-CN"></script>

(2)、通过 RequireJS 模块系统

  1. requirejs.config({
  2. paths: {
  3. jquery: 'http://cdn.jsdelivr.net/jquery/1.12.3/jquery.min',
  4. validator: 'path/to/nice-validator/local/zh-CN'
  5. },
  6. shim: {
  7. validator: ['path/to/nice-validator/jquery.validator.js?css']
  8. }
  9. });
  10. require(['jquery', 'validator'], function($){
  11. $('#form1').validator();
  12. });

2. 了解规则

(1)、定义规则语句

"display: rule1; rule2(p1, p2); ...rulen(n1~n2)"

1.前面的 display: 是可选的,用于替换错误消息中的{0},一般为显示的字段名。

2.多个规则由分号(;)分开,末尾分号可省略,不限制规则数量,按规则先后顺序执行验证

3.未定义的规则自动忽略,对验证不产生影响

规则语句中的符号:

  • 分号 ; - 分隔多个规则,也代表逻辑与
  • 冒号 : - 分隔 display(字段显示名)与规则语句
  • 括号 () - 规则传参使用,也可以使用方括号([ ])
  • 逗号  - 分隔规则的参数,注意:逗号后需加空格
  • 波浪 ~ - 定义范围值使用
  • 俺的 & - 逻辑与,用在某个规则前面,与;(分号)效果差不多
  • 叹号 ! - 逻辑非,用在某个规则前面,对规则取反
  • 竖线 | - 逻辑或,用在多个规则之间,多个规则满足之一则通过

示例

  1. // 单个规则
  2. "required"
  3. // 多个规则
  4. "required; email; remote(/server/check/email)"
  5. // 范围参数
  6. "range(1~100)"
  7. // 规则有多个参数
  8. "match(neq, oldPassword)"
  9. // 定义显示替换名称
  10. "邮箱: required; email"
  11. // 逻辑或
  12. "required; mobile|email; remote(/server/check/user)"
  13. // 逻辑非
  14. "required; !digits"

(2)、配置规则

示例:DOM 配置规则,使用 data-rule

<input name="email" data-rule="required;email;remote(/path/to/server)">

示例:JS 配置规则,使用 fields 参数

  1. $("#form").validator({
  2. fields: {
  3. email: "required;email;remote(/path/to/server)"
  4. }
  5. });

(3)、内置规则

插件内置 8 个规则:

自定义规则如果与内置规则同名,则自定义规则优先
详情参考内置规则

示例:在 local/zh-CN.js 中配置全局规则(全局生效

  1. $.validator.config({
  2. rules: {
  3. mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],
  4. chinese: [/^[\u0391-\uFFE5]+$/, "请填写中文字符"]
  5. }
  6. });

    示例:通过 DOM 方式自定义规则(只对当前字段有效)
  1. <input name="demo" data-rule="required; xxx" data-rule-xxx="[/^\d{6}$/, '请输入6位数字']">
  2.  
  3. 示例:通过 rules 配置规则(当前表单实例有效
  1. $('#form1').validator({
  2. rules: {
  3. // 使用正则表达式定义规则
  4. mobile: [/^1[3-9]\d{9}$/, "请填写有效的手机号"],
  5. // 使用函数定义规则
  6. xxx: function(elem, param) {
  7. return /^1[3458]\d{9}$/.test($(elem).val()) || '请检查手机号格式';
  8. }
  9. },
  10. fields: {
  11. // 对字段 username 应用规则 mobile
  12. 'username': 'required;mobile'
  13. }
  14. });

3. 初始化验证

(1)、DOM 绑定规则,无需 JS 代码

  1. <form id="form1" action="register.php">
  2. <label>Email</label>
  3. <input type="email" name="email" data-rule="required;email">
  4. <label>Password</label>
  5. <input type="password" name="pwd" data-rule="required;length(6~16)">
  6. </form>
  7.  
  8. 参考DOM 绑定

(2)、JS 配置规则,无侵入 DOM

  1. <form id="form1" action="register.php">
  2. <label>Email</label>
  3. <input type="email" name="email">
  4. <label>Password</label>
  5. <input type="password" name="pwd">
  6. </form>
  1. // 初始化验证
  2. $('#form1').validator({
  3. fields: {
  4. 'email': 'required;email',
  5. 'pwd': 'required;length(6~16)'
  6. }
  7. });
  8.  

调用插件方法 .validator(),并使用 fileds 参数

当然,DOM 和 JS 两种方式也支持同时使用,你也可以通过 DOM 绑定规则,然后使用 js 初始化。

4. 提交表单

1.nice-validator 一旦初始化就会阻止表单被提交,直到表单规则全部验证通过。

2.如果传递了valid参数回调或者valid.form事件,表单即使验证通过也不会被提交,而是由valid参数和valid.form事件接管。然后你需要自己决定如何提交表单。

方式一:点击提交按钮,表单验证通过后自动原生方式提交

  1. <form id="form1" action="register.php">
  2. <label>Email</label>
  3. <input type="email" name="email" data-rule="required;email">
  4. <label>Password</label>
  5. <input type="password" name="pwd" data-rule="required;length(6~16)">
  6. <button type="submit">提交</button>
  7. </form>
  8.  

方式二:使用验证通过回调(参考:valid

  1. $('#form1').validator({
  2. valid: function(form) {
  3. // do something
  4. // use native submit.
  5. form.submit();
  6. }
  7. });
  8.  

示例三:绑定表单验证通过的事件(参考:valid.form事件

  1. $('#form1').on('valid.form', function(e){
  2. // You can do something, then submit form by native
  3. // this.submit();
  4. // or use ajax submit
  5. $.post("path/to/server", $(this).serialize())
  6. .done(function(d){
  7. // some code
  8. });
  9. });

Nice Jquery Validator 快速上手的更多相关文章

  1. 快速上手seajs——简单易用Seajs

    快速上手seajs——简单易用Seajs   原文  http://www.cnblogs.com/xjchenhao/p/4021775.html 主题 SeaJS 简易手册 http://yslo ...

  2. 快速上手RaphaelJS-Instant RaphaelJS Starter翻译(一)

       (目前发现一些文章被盗用的情况,我们将在每篇文章前面添加原文地址,本文源地址:http://www.cnblogs.com/idealer3d/p/Instant_RaphaelJS_Start ...

  3. knockoutJS 快速上手

    翻译:Knockout 快速上手 - 3: knockoutJS 快速上手 许多时候,学会一种技术的有效方式就是使用它解决实际中的问题.在这一节,我们将学习使用 Knockout 来创建一个常见的应用 ...

  4. jquery validator

    jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目中早已用过,但看到这篇文章写得还是不错的,转载下与大家共同分享. 一.用前必备 官方网站: ...

  5. 自定义表单验证--jquery validator addMethod的使用

    原文地址:jquery validator addMethod 方法的使用作者:蜡笔小玄 jQuery.validate是一款非常不错的表单验证工具,简单易上手,而且能达到很好的体验效果,虽然说在项目 ...

  6. npm、webpack、vue-cli 快速上手

    npm+webpack+vue-cli快速上手   Node.js   npm 什么是Node.js  以及npm 简单的来说 Node.js 就是运行在服务端的JavaScript,基于Chrome ...

  7. 快速上手 Echarts

    最近使用到了 百度的 Echarts 数据可视化工具,这里简单介绍如何快速上手. 一.下载 这里选择目前最新版本,4.2.1 地址:https://github.com/apache/incubato ...

  8. 【Python五篇慢慢弹】快速上手学python

    快速上手学python 作者:白宁超 2016年10月4日19:59:39 摘要:python语言俨然不算新技术,七八年前甚至更早已有很多人研习,只是没有现在流行罢了.之所以当下如此盛行,我想肯定是多 ...

  9. 快速上手Unity原生Json库

    现在新版的Unity(印象中是从5.3开始)已经提供了原生的Json库,以前一直使用LitJson,研究了一下Unity用的JsonUtility工具类的使用,发现使用还挺方便的,所以打算把项目中的J ...

随机推荐

  1. javascript 获取页面的高度及滚动条的位置的代码

    http://www.jb51.net/article/23331.htm javascript 获取页面的高度及滚动条的位置的代码 作者: 字体:[增加 减小] 类型:转载   javascript ...

  2. 四、$jQuery

    1.你觉得jQuery或zepto源码有哪些写的好的地方 jquery源码封装在一个匿名函数的自执行环境中,有助于防止变量的全局污染,然后通过传入window对象参数,可以使window对象作为局部变 ...

  3. JavaScript 实现 冒泡排序

        <script>         //数组排序(冒泡排序)         //冒泡排序是一种算法,把一系列的数据按照一定的循序进行排列显示(从小到大或从大到小)          ...

  4. S32K142学习记录_day1

    因为项目的原因接触了NXP的S32K142芯片 从官网上download S32DS 安装 找数据手册 发现都是英文的只能看着翻译了 今天看的是关于clock配置的 当clock需要进行切换的时候必须 ...

  5. doxygen上手

    doxygen {#mainpage} doxygen是干什么的 相信大家在看MCU原厂的帮助文档的时候,都能看到doxygen的logo在右下角,没错,doxygen就是用来生成帮助文档的 doxy ...

  6. 利用Nginx设置跨域的方式

    1.服务端可控,添加响应头 2.服务端不可控.通过Nginx反向代理 3.服务端不可控.通过Nginx反向代理添加响应头 第一种方法.服务端可控时,可以在服务器端添加响应头(前端+后端解决) 浏览器地 ...

  7. ajax实现注册并选择头像后上传

    在初次接触ajax后,我们做了一个crm训练的项目,大多数小组都有注册用户这一项,但是都忽略掉了一个功能,那就是,很多网站的注册是可以上传头像的,在这里我做了一个在已有的头像数组里选择图片上传作头像的 ...

  8. 题解 P5329 【[SNOI2019]字符串】

    用栈的做法来水一发. 首先我们有一个暴力的做法,枚举每个被删除的字符,然后排序输出,时间复杂度:$ O ( N \times N \times LogN ) $ . 然后我们观察一下数据,发现有一个数 ...

  9. JavaScript (五) js的基本语法 - - - 面向对象、工程模式、内置对象、JSON

    个人博客网:https://wushaopei.github.io/    (你想要这里多有) 一.编程思想 1.定义: 编程思想:把一些生活中做事的经验融入到程序中 面向过程:凡事都要亲力亲为,每件 ...

  10. 从SpringBoot源码分析 主程序配置类加载过程

    1.@Import(AutoConfigurationPackages.Registrar.class) 初始SpringBoot 我们知道在SpringBoot 启动类上有一个@SpringBoot ...