• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > nice Validator验证插件

nice Validator验证插件

作者:u013943009 字体:[增加 减小] 来源:互联网

u013943009通过本文主要向大家介绍了nice Validator验证插件等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

1. 加载插件

nice-validator 依赖 jQuery(1.7+)。除了直接引用插件,还支持 AMD 模块系统。

(1)、直接引用

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

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

(2)、通过 RequireJS 模块系统

requirejs.config({
    paths: {
        jquery: 'http://cdn.jsdelivr.net/jquery/1.12.3/jquery.min',
        validator: 'path/to/nice-validator/local/zh-CN'
    },
    shim: {
        validator: ['path/to/nice-validator/jquery.validator.js?css']
    }
});
require(['jquery', 'validator'], function($){
    $('#form1').validator();
});

 

2. 了解规则

(1)、定义规则语句

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

a. 前面的 display: 是可选的,用于替换错误消息中的{0},一般为显示的字段名。 b. 多个规则由分号(;)分开,末尾分号可省略,不限制规则数量,按规则先后顺序执行验证 c. 未定义的规则自动忽略,对验证不产生影响

规则语句中的符号:

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

示例:

// 单个规则
"required"

// 多个规则
"required; email; remote(/server/check/email)"

// 范围参数
"range(1~100)"

// 规则有多个参数
"match(neq, oldPassword)"

// 定义显示替换名称
"邮箱: required; email"

// 逻辑或
"required; mobile|email; remote(/server/check/user)"

// 逻辑非
"required; !digits"

(2)、配置规则

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

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

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

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

(3)、内置规则

插件内置 8 个规则:

  • required - 使字段必填
  • checked - 必选,还可以控制选择项目的数量
  • match - 当前字段与另一个字段比较
  • remote - 获取服务器端验证的结果
  • integer - 只能填写整数
  • range - 只能填写指定范围的数
  • length - 字段值必须符合指定长度
  • filter - 过滤当前字段的值,不做验证

自定义规则如果与内置规则

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 使用jquery实现的一个图片延迟加载插件(含图片延迟加载原理)
  • jquery版轮播图效果和extend扩展
  • jQuery事件处理的特征(事件命名机制)
  • jquery异步调用页面后台方法&#8207;(asp.net)
  • jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
  • 利用jquery正则表达式在页面验证url网址输入是否正确
  • jquery 实现轮播图详解及实例代码
  • 鼠标拖动实现DIV排序示例代码
  • jQuery 在光标定位的地方插入文字的插件
  • jquery实现的一个文章自定义分段显示功能

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jquery 图片轮换效果
    • jQuery实现优雅的弹窗效果(6)
    • jQuery 1.8 Release版本发布了
    • jQuery oLoader实现的加载图片和页面效果
    • jquery中获得元素尺寸和坐标的方法整理
    • jquery分析文本里url或邮件地址为真实链接的方法
    • 一个简单的jQuery插件制作 学习过程及实例
    • jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
    • 浅谈jQuery中replace()方法
    • jQuery生成假加载动画效果

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有