注:必须配合jq使用。

基本语法 例如有如下:

<form action="" method="post" id="demoForm">
<p>
<label name="email">email:</label>
<input type="text" id="email" value="" name="email1"/>
</p>
<p>
<label name="pasword1">password:</label>
<input type="text" id="password1" value="" name="pass1"/>
</p>
<p>
<label name="pasword2">confirm-password:</label>
<input type="text" id="password2" value="" name="pass2"/>
</p>
<p>
<input type="submit" id="btn" name="" />
</p>
</form>

 基本类型:

  

$(function(){
$("#demoForm").validate({
rules:{
//指定元素对应的规则
},
messages:{
//如果不符合要求时要提示的信息
}, })
})

  属性:

require :true   必填  布尔类型
rangelength:[,] 长度范围
equalTo 保证两次密码一致
email: true 布尔类型
submitHandler:function(){ //校验通过时可执行的东西
} invalidHander:function(){
校验通不过时可执行
} focusInvalid : true 布尔
提交表单后,未通过验证的表单(第一个或提交之 前获得焦点的未通过验证的表单)会获得焦点 focusCleanup : false 默认
当未通过验证的元素获得焦点时,并移除错误提示 (避免和 focusInvalid.一起使用) errorElement:'div'将错误信息放在什么地方 errorClass:'worng' 可给错误信息添加一个类名 通过类名可给错误信息修饰样式
highlight:function(element,erroeClass){
$(element).addClass(errorClass);
$(element).fadeOut().fadeIn();
}
出错时的样式设置
minlength :  num 最小值
maxlength: num 最大值
digits:true 年龄必须为正整数
range:[]范围
date:true 日期格式要求较宽泛
dateISO:true; 日期规范较严格

      jq 表单验证插件不仅可以在数据获取之前在前端做首要的的判断,还通过submintHandler:这个属性通过ajax获取数据

ajax获取数据的同时结合php接口对数据进行添加至数据库

 

表单验证插件及一些属性的用法 validate的更多相关文章

  1. jQuery Validate 表单验证插件----通过name属性来关联字段来验证,改变默认的提示信息,将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  2. jQuery Validate 表单验证插件----在class属性中添加校验规则进行简单的校验

    一.下载插件包. 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二.jQuery表单验证插件----添加class属性形式的校验 <!DOCTY ...

  3. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  4. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  5. jQuery学习之路(8)- 表单验证插件-Validation

    ▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...

  6. jquery validate表单验证插件-推荐

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  7. 表单验证插件之jquery.validate.js

    提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...

  8. jQuery学习之:Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  9. jquery validate表单验证插件

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

随机推荐

  1. 新姿势!Redis中调用Lua脚本以实现原子性操作

    背景:有一服务提供者Leader,有多个消息订阅者Workers.Leader是一个排队程序,维护了一个用户队列,当某个资源空闲下来并被分配至队列中的用户时,Leader会向订阅者推送消息(消息带有唯 ...

  2. 最小生成树+LCA【洛谷 P2245】 星际导航

    [洛谷 P2245] 星际导航 题目描述 sideman做好了回到Gliese 星球的硬件准备,但是sideman的导航系统还没有完全设计好.为了方便起见,我们可以认为宇宙是一张有N 个顶点和M 条边 ...

  3. luogu3911 最小公倍数之和(莫比乌斯反演)

    link 给定\(A_1,A_2,\dots,A_N\),求\(\sum_{i=1}^N\sum_{j=1}^Nlcm(A_i,A_j)\) \(1\le N\le 50000;1\le A_i\le ...

  4. [比赛|考试]nowcoder 小白月赛7

    牛客小白月赛7 比赛地址.本次比赛我切了8道(ACM赛制),rank(20). 反思:刚入手ACM赛,光追求刺激了,没有总结ACM赛制的经验.是应该多提交>..还是少提交...小白赛还有两道不会 ...

  5. centos yum命令找不到包

    https://blog.csdn.net/joe_le/article/details/80107832 yum  install epel-release  //扩展包更新包 yum  updat ...

  6. shell学习(12)- jq

    jq命令允许直接在命令行下对JSON进行操作,包括分片.过滤.转换等 ,jq是用C编写,没有运行时依赖,所以几乎可以运行在任何系统上.预编译的二进制文件可以直接在Linux.OS X和windows系 ...

  7. How can I use wget in Windows

    http://www.ehow.com/how_10054131_use-wget-windows.html

  8. Jenkins自动化CI CD流水线之1--介绍与安装

    第1章 大纲 CI/CD, DevOps介绍 Git安装与使用 Jenkins安装与使用 权限管理 参数化构建 Master-Slave 流水线(Pipeline) 邮件通知 应用案例 自动发布PHP ...

  9. vue(4)hello world

    在前一章基础上开发. 1.下载vue.js.(https://cn.vuejs.org/v2/guide/installation.html) 在hello-vue根目录下创建js文件夹,并将该vue ...

  10. java——删除链表中等于给定值的所有元素

    class ListNode{ int val ; ListNode next; public ListNode(int x) { val = x; } public ListNode(int[] a ...