0

0

jquery validata 表单验证DEMO

php中文网

php中文网

发布时间:2016-07-25 08:48:25

|

1258人浏览过

|

来源于php中文网

原创

  1. jQuery验证框架
  2. 六、框架内建的验证方法( List of built-in Validation methods )
  3. [1] required( ) 返回:Boolean
  4. 说明:让表单元素必须填写(选择)。
  5. 如果表单元素为空(text input)或未选择(radio/checkbox)或选择了一个空值(select)。
  6. 作用于text inputs, selects, checkboxes and radio buttons.
  7. 当select提供了一个空值选项则强迫用户去选择一个不为空的值。
  8. Js代码
  9. $("#myform").validate({
  10. rules: {
  11. fruit: "required"
  12. }
  13. });
  14. [2] required( dependency-expression ) 返回:Boolean
  15. 参数 dependency-expression 类型:String 在form上下文中的一个表达式( String ),表单元素是否需要填写依赖于该表达式返回一个或多个元素。
  16. 说明:让表单元素必须填写(选择),依赖于参数的返回值。
  17. 表达式中像#foo:checked, #foo:filled, #foo:visible这样的选择过滤器将经常用到。
  18. Js代码
  19. $("#myform").validate({
  20. rules: {
  21. details: {
  22. required: "#other:checked"
  23. }
  24. }, debug:true
  25. });
  26. $("#other").click(function() {
  27. $("#details").valid();
  28. });
  29. [3] required( dependency-callback ) 返回:Boolean
  30. 参数 dependency-callback 类型:Callback 该回函数以待验证表单元素作为其唯一的参数。当该回调函数返回true,则该表单元素是必须的。
  31. 说明:让表单元素必须填写(选择),依赖于参数的返回值。
  32. 表达式中像#foo:checked, #foo:filled, #foo:visible这样的选择过滤器将经常用到。
  33. Js代码
  34. $("#myform").validate({
  35. rules: {
  36. age: {
  37. required: true,
  38. min: 3
  39. },
  40. parent: {
  41. required: function(element) {
  42. return $("#age").val() }
  43. }
  44. }
  45. });
  46. $("#age").blur(function() {
  47. $("#parent").valid();
  48. });
  49. [4] remote( options ) 返回:Boolean
  50. 参数 options 类型:String, Options 请求服务器端资源的url(String)。或$.ajax()方法中的选项(Options)。
  51. 说明:请求服务器端资源验证。
  52. 服务器端的资源通过$.ajax (XMLHttpRequest)获取key/value对,响应返回true则表单通过验证。
  53. Js代码
  54. $("#myform").validate({
  55. rules: {
  56. email: {
  57. required: true,
  58. email: true,
  59. remote: "check-email.php"
  60. }
  61. }
  62. });
  63. [5] minlength( length ) 返回:Boolean
  64. 参数 length 类型:Integer 至少需要多少个字符数。
  65. 说明:确保表单元素满足给定的最小字符数。
  66. 在文本框(text input)中输入的字符太少、没有选中足够的复选框(checkbox)、一个选择框(select)中没有选中足够的选项。这以上三种情况中该方法返回false。
  67. Js代码
  68. $("#myform").validate({
  69. rules: {
  70. field: {
  71. required: true,
  72. minlength: 3
  73. }
  74. }
  75. });
  76. [6] maxlength( length ) 返回:Boolean
  77. 参数 length 类型:Integer 允许输入的最大字符数。
  78. 说明:确保表单元素的文本不超过给定的最大字符数。
  79. 在文本框(text input)中输入的字符太多、选择太多的复选框(checkbox)、一个选择框(select)中没有选中太多的选项。这以上三种情况中该方法返回false。
  80. Js代码
  81. $("#myform").validate({
  82. rules: {
  83. field: {
  84. required: true,
  85. maxlength: 4
  86. }
  87. }
  88. });
  89. [7] rangelength( range ) 返回:Boolean
  90. 参数 range 类型:Array 允许输入的字符数范围。
  91. 说明:确保表单元素的文本字符数在给定的范围当中。
  92. 在文本框(text input)中输入的字符数不在给定范围内、选择的复选框(checkbox)不在给在的范围内、一个选择框(select)选中的选项不在给定的范围内。这以上三种情况中该方法返回false。
  93. Js代码
  94. $("#myform").validate({
  95. rules: {
  96. field: {
  97. required: true,
  98. rangelength: [2, 6]
  99. }
  100. }
  101. });
  102. [8] min( value ) 返回:Boolean
  103. 参数 value 类型:Integer 需要输入的最小整数。
  104. 说明:确保表单元素的值大于等于给定的最小整数。
  105. 该方法只在文本输入框(text input)下有效。
  106. Js代码
  107. $("#myform").validate({
  108. rules: {
  109. field: {
  110. required: true,
  111. min: 13
  112. }
  113. }
  114. });
  115. [9] max( value ) 返回:Boolean
  116. 参数 value 类型:Integer 给定的最大整数。
  117. 说明:确保表单元素的值小于等于给定的最大整数。
  118. 该方法只在文本输入框(text input)下有效。
  119. Js代码
  120. $("#myform").validate({
  121. rules: {
  122. field: {
  123. required: true,
  124. max: 23
  125. }
  126. }
  127. });
  128. [10] range( range ) 返回:Boolean
  129. 参数 range 类型:Array 给定的整数范围。
  130. 说明:确保表单元素的值在给定的范围当中。
  131. 该方法只在文本输入框(text input)下有效。
  132. Js代码
  133. $("#myform").validate({
  134. rules: {
  135. field: {
  136. required: true,
  137. range: [13, 23]
  138. }
  139. }
  140. });
  141. [11] email( ) 返回:Boolean
  142. 说明:确保表单元素的值为一个有效的email地址。
  143. 如果值为一个有效的email地址,则返回true。该方法只在文本输入框(text input)下有效。
  144. Js代码
  145. $("#myform").validate({
  146. rules: {
  147. field: {
  148. required: true,
  149. email: true
  150. }
  151. }
  152. });
  153. [12] url( ) 返回:Boolean
  154. 说明:确保表单元素的值为一个有效的URL地址(http://www.mydomain.com)。
  155. 如果值为一个有效的url地址,则返回true。该方法只在文本输入框(text input)下有效。
  156. Js代码
  157. $("#myform").validate({
  158. rules: {
  159. field: {
  160. required: true,
  161. url: true
  162. }
  163. }
  164. });
  165. [13] date( ) dateISO( ) dateDE( ) 返回:Boolean
  166. 说明:用来验证有效的日期。这三个函数分别验证的日期格式为(mm/dd/yyyy)、(yyyy-mm-dd,yyyy/mm/dd)、(mm.dd.yyyy)。
  167. Js代码
  168. $("#myform").validate({
  169. rules: {
  170. field: {
  171. required: true,
  172. date: true
  173. /*dateISO: true
  174. dateDE: true*/
  175. }
  176. }
  177. });
  178. [14] number( ) numberDE() 返回:Boolean
  179. 说明:用来验证小数。number()的小数点为圆点( . ),numberDE()的小数点为英文逗号( , )。
  180. Js代码
  181. $("#myform").validate({
  182. rules: {
  183. field: {
  184. required: true,
  185. number: true
  186. //numberDE: true
  187. }
  188. }
  189. });
  190. [15] digits() 返回:Boolean
  191. 说明:确保文本框中的值为数字。
  192. Js代码
  193. $("#myform").validate({
  194. rules: {
  195. field: {
  196. required: true,
  197. digits: true
  198. }
  199. }
  200. });
  201. [16] digits() 返回:Boolean
  202. 说明:确保文本框中的值为数字。
  203. Js代码
  204. $("#myform").validate({
  205. rules: {
  206. field: {
  207. required: true,
  208. digits: true
  209. }
  210. }
  211. });
  212. [17] accept( [extension] ) 返回:Boolean
  213. 参数 extension(Optional) 类型:String 允许的文件后缀名,用"|"或","分割。默认为"png|jpe?g|gif"
  214. 说明:确保表单元素接收给定的文件后缀名的文件。如果没有指定参数,则只有图片是允许的(png,jpeg,gif)。
  215. Js代码
  216. $("#myform").validate({
  217. rules: {
  218. field: {
  219. required: true,
  220. accept: "xls|csv"
  221. }
  222. }
  223. });
  224. [18] equalTo( other ) 返回:Boolean
  225. 参数 other 类型:Selector 要与当前值比较的另一个表单元素。
  226. 说明:确保两个表单元素的值是一致的。
  227. Js代码
  228. $("#myform").validate({
  229. rules: {
  230. password: "required",
  231. password_again: {
  232. equalTo: "#password"
  233. }
  234. }
  235. });
复制代码


本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
C# ASP.NET Core微服务架构与API网关实践
C# ASP.NET Core微服务架构与API网关实践

本专题围绕 C# 在现代后端架构中的微服务实践展开,系统讲解基于 ASP.NET Core 构建可扩展服务体系的核心方法。内容涵盖服务拆分策略、RESTful API 设计、服务间通信、API 网关统一入口管理以及服务治理机制。通过真实项目案例,帮助开发者掌握构建高可用微服务系统的关键技术,提高系统的可扩展性与维护效率。

76

2026.03.11

Go高并发任务调度与Goroutine池化实践
Go高并发任务调度与Goroutine池化实践

本专题围绕 Go 语言在高并发任务处理场景中的实践展开,系统讲解 Goroutine 调度模型、Channel 通信机制以及并发控制策略。内容包括任务队列设计、Goroutine 池化管理、资源限制控制以及并发任务的性能优化方法。通过实际案例演示,帮助开发者构建稳定高效的 Go 并发任务处理系统,提高系统在高负载环境下的处理能力与稳定性。

38

2026.03.10

Kotlin Android模块化架构与组件化开发实践
Kotlin Android模块化架构与组件化开发实践

本专题围绕 Kotlin 在 Android 应用开发中的架构实践展开,重点讲解模块化设计与组件化开发的实现思路。内容包括项目模块拆分策略、公共组件封装、依赖管理优化、路由通信机制以及大型项目的工程化管理方法。通过真实项目案例分析,帮助开发者构建结构清晰、易扩展且维护成本低的 Android 应用架构体系,提升团队协作效率与项目迭代速度。

83

2026.03.09

JavaScript浏览器渲染机制与前端性能优化实践
JavaScript浏览器渲染机制与前端性能优化实践

本专题围绕 JavaScript 在浏览器中的执行与渲染机制展开,系统讲解 DOM 构建、CSSOM 解析、重排与重绘原理,以及关键渲染路径优化方法。内容涵盖事件循环机制、异步任务调度、资源加载优化、代码拆分与懒加载等性能优化策略。通过真实前端项目案例,帮助开发者理解浏览器底层工作原理,并掌握提升网页加载速度与交互体验的实用技巧。

97

2026.03.06

Rust内存安全机制与所有权模型深度实践
Rust内存安全机制与所有权模型深度实践

本专题围绕 Rust 语言核心特性展开,深入讲解所有权机制、借用规则、生命周期管理以及智能指针等关键概念。通过系统级开发案例,分析内存安全保障原理与零成本抽象优势,并结合并发场景讲解 Send 与 Sync 特性实现机制。帮助开发者真正理解 Rust 的设计哲学,掌握在高性能与安全性并重场景中的工程实践能力。

223

2026.03.05

PHP高性能API设计与Laravel服务架构实践
PHP高性能API设计与Laravel服务架构实践

本专题围绕 PHP 在现代 Web 后端开发中的高性能实践展开,重点讲解基于 Laravel 框架构建可扩展 API 服务的核心方法。内容涵盖路由与中间件机制、服务容器与依赖注入、接口版本管理、缓存策略设计以及队列异步处理方案。同时结合高并发场景,深入分析性能瓶颈定位与优化思路,帮助开发者构建稳定、高效、易维护的 PHP 后端服务体系。

458

2026.03.04

AI安装教程大全
AI安装教程大全

2026最全AI工具安装教程专题:包含各版本AI绘图、AI视频、智能办公软件的本地化部署手册。全篇零基础友好,附带最新模型下载地址、一键安装脚本及常见报错修复方案。每日更新,收藏这一篇就够了,让AI安装不再报错!

169

2026.03.04

Swift iOS架构设计与MVVM模式实战
Swift iOS架构设计与MVVM模式实战

本专题聚焦 Swift 在 iOS 应用架构设计中的实践,系统讲解 MVVM 模式的核心思想、数据绑定机制、模块拆分策略以及组件化开发方法。内容涵盖网络层封装、状态管理、依赖注入与性能优化技巧。通过完整项目案例,帮助开发者构建结构清晰、可维护性强的 iOS 应用架构体系。

246

2026.03.03

C++高性能网络编程与Reactor模型实践
C++高性能网络编程与Reactor模型实践

本专题围绕 C++ 在高性能网络服务开发中的应用展开,深入讲解 Socket 编程、多路复用机制、Reactor 模型设计原理以及线程池协作策略。内容涵盖 epoll 实现机制、内存管理优化、连接管理策略与高并发场景下的性能调优方法。通过构建高并发网络服务器实战案例,帮助开发者掌握 C++ 在底层系统与网络通信领域的核心技术。

34

2026.03.03

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号