知问前端——验证插件

验证插件(validate.js),是一款验证常规表单数据合法性的插件。使用它,极大的解放了在表单上繁杂的验证过程,并且错误提示显示的完善也增加了用户体验。

使用validate.js插件

官网下载:http://bassistance.de/jquery-plugins/jquery-plugin-validation

最重要的文件是jquery.validate.js,还有两个可选的辅助文件:additional-methods.js(控件class方式)和message_zh.js(提示汉化)文件(实际使用,请使用min压缩版)。

第一步:引入jquery.validate.js:

<script type="text/javascript" src="jquery.validate.js"></script>

第二步:在JS文件中执行:

$(‘#reg‘).validate();

默认验证规则

validate.js的默认验证规则的写法有两种形式:1.控件属性方式;2.JS键值对传参方式

默认规则列表

规则名 说明
required:true 必须输入字段
email:true 必须输入正确格式的电子邮件
url:true 必须输入正确格式的网址
date:true 必须输入正确格式的日期(IE6验证出错)
dateISO:true 必须输入正确格式的日期(ISO)(只验证格式,不验证有效)
number:true 必须输入合法的数字(负数,小数)
digits:true 必须输入正整数
creditcard:true 必须输入合法的信用卡号,例如:5105105105105100
equalTo:"#field" 输入值必须和#field相同
minlength:5 输入长度最小是5的字符串(汉字算一个字符)
maxlength:10 输入长度最多是10的字符串(汉字算一个字符)
rangelength:[5,10] 输入长度介于5和10之间的字符串(汉字算一个字符)
range:[5,10] 输入值必须介于5和10之间
min:5 输入值不能小于5
max:10 输入值不能大于10
remote:"check.php" 使用ajax方法调用check.php验证输入值

使用控件方式验证——必填和不得小于两位:

<input type="text" class="required" minlength="2" name="user" id="user" />

注意:默认规则里设置布尔值的,直接写到class里即可实现,如果是数字或数组区间,直接使用属性=值的方式即可。而对于错误提示,可以引入中文汉化文件,或直接替换掉即可。

时间: 2024-08-03 22:40:49

知问前端——验证插件的相关文章

知问前端——cookie插件

Cookie是网站用来在客户端保存识别用户的一种小文件.一般可以保存用户登录信息.购物数据信息等一系列微小信息. 一.使用cookie插件 官方网站:http://plugins.jquery.com/cookie/ 从官网下载cookie插件——jquery.cookie.js插件. 1.生成一个cookie,名称为user,内容为liayun: $.cookie("user","liayun"); 2.cookie的参数设置: $.cookie("us

知问前端——Ajax表单插件

传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款form.js表单的Ajax提交插件将解决这个问题. 一.核心方法 官方网站:http://malsup.com/jquery/form/ form.js插件有两个核心方法:ajaxForm()和ajaxSubmit(),它们集合了从控制表单元素到决定如何管理提交进行的功能. 若没有结合其他插件.js.jQuery里的submit()方法时,就用ajaxForm()提交表单. 若用js.jQuery里的submit()方

知问前端——Ajax提交表单

本文,运用两大表单插件,完成数据表新增的工作. 一.创建数据库 创建一个数据库,名称为:zhiwen,表——user表,字段依次为:id.name.pass.email.sex.birthday.date. 本人是使用的Navicat for MySQL创建的user表, user表的结构如下: 所需的PHP文件:config.php.add.php.(本人没学过php,所以不过多解释) config.php: <?php header('Content-Type:text/html; char

知问前端——创建header区

创建界面 我们首先要设计一个header,这个区域将要设计成永远置顶.也就是,往下拉出滚动条也永远在页面最上层可视区内.在header区,目前先设计LOGO.搜索框.按钮.注册和登录即可. 项目的大致骨架如下: index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>知问前端</title> <script type=&q

第一百七十七节,jQuery,知问前端--概述及 jQuery UI

jQuery,知问前端--概述及 jQuery UI 学习要点: 1.项目介绍 2.jQuery UI 3.UI 主题 一.项目介绍 我们重点仿照"知乎"的架构模式来搭建界面和布局,以及大部分前端功能.而"百度 知道"作为辅助功能来确定我们这个项目需要的前端功能. 从以上知名问答站点中,我们可以确认最主要的前端功能:1.弹出对话框:2.前端按钮: 3.折叠菜单:4.选项卡切换:5.滑动块:6.日历:7.自动补全:8 拖放:等一系列前端模块. 二.jQuery UI

知问前端——邮箱自动补全

本节课,我们通过自动补全source属性的function回调函数,来动态的设置我们的数据源,以达到可以实现邮箱补全功能. 数据源function 自动补全UI的source不但可以是数组,也可以是function回调函数,提供了自带的两个参数设置动态的数据源. $('#email').autocomplete({ source : function (request, response) { //获取用户输入的内容 alert(request.term); //可以获取你输入的值 //绑定数据

知问前端——日历UI(一)

日历(datepicker)UI,可以让用户更加直观的.更加方便的输入日期,并且还考虑不同国家的语言限制,包括汉语. 调用datepicker()方法 $('#date').datepicker(); 修改datepicker()样式 日历UI的header背景和对话框UI的背景采用的是同一个class,所以在此之前已经被修改,所以,这里无须再修改了. /* 日历UI的今天单元格样式 */ .ui-datepicker-today .ui-state-highlight { border:1px

第一百七十九节,jQuery-UI,知问前端--按钮 UI

jQuery-UI,知问前端--按钮 UI 学习要点: 1.使用 button 按钮 2.修改 button 样式 3.button()方法的属性 4.button('action', param) 5.单选.复选按钮 按钮(button),可以给生硬的原生按钮或者文本提供更多丰富多彩的外观.它不单单 可以设置按钮或文本,还可以设置单选按钮和多选按钮. 一.使用 button 按钮 使用 button 按钮 UI 的时候,不一定必须是 input 按钮形式,普通的文本也可以设置成 button

知问前端——自动补全UI

自动补全(autocomplete),是一个可以减少用户输入完整信息的UI工具.一般在输入邮箱.搜索关键字等,然后提取出相应完整字符串供用户选择. 调用autocomplete()方法 var host = ['aa', 'aaaa', 'aaaaaa', 'bb']; $("#email").autocomplete({ source:host }); 修改autocomplete()样式 由于autocomplete()方法是弹窗,然后鼠标悬停的样式,我们通过Firebug想获取到