热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

jQueryValidation的使用详解

jQuery验证框架 :基本html代码:1<scriptsrc"jsjquery-1.9.1.js?1.1.10"><script>2<scriptsrc"jsjquery.validate.min.js?1.1.10"><script>3<script>4$(functio
jQuery验证框架 :

基本html代码:

 1    2      3     40 41 42 html:43     44     45     

46 47 48

49 50

51 52 53

54 55

56   

从以上代码中我来说说jQuery Validation的使用。

  1.validate(options)是运行form表单的开始,他是用来验证你所选的form,以上代码的第五行“#myForm"是form的id名。

  2.rules() 是校验规则他就是validate里的options,是用户定义的键/值对规则===键为一个表单元素的 name属性、值为一个简单的字符串或者由规则/参数对组成的一个对象。

  3. messages ()是用户自定义的 键/值 对消息===键为一个表单元素的name属性,值为该表单元素将要显示的消息。

  4.rules() 里的username和password是input中的name值。

  

   5.required的值为true时验证该项是必选项。

  

   6.minlength(length)设置验证元素的最小长度。

  

   7.maxlength(length)设置验证元素的最大长度。

   8.rangelength(range)设置验证元素的一个长度范围。

   9.max(value)设置验证元素的最大值。

   10.min(value)设置验证元素的最小值。

   

   11.range()设置指的范围。

   12.email()验证电子邮箱格式是否正确。

   13.url() 验证URL格式是否正确。

   14.date()验证日期格式是否正确。【注:不验证日期的准确性,只验证格式

   15.submitHandler 当表单通过验证,提交表单。

// 校验全部通过                submitHandler: function () {
                    alert("校验全部通过!")
                },

   16.invalidHandler当未通过验证的表单提交时,可以在该回调函数中处理一些事情。

 //  校验不通过              invalidHandler: function () {
                    alert("no")
                },

  17.focusInvalid默认值为true,校验不通过时,焦点跳到第一个无效的表单元素。

  18.focusCleanup默认值为true,当表单得到焦点时,移除在该表单上的errorClass并隐藏所有错误消息。【注:避免与focusInvalid一起使用。

  19. errorElement 用html元素类型创建错误消息的容器。默认写在label中

    

  20.errorClass设定样式来定义错误信息的样式。

  21.highlight将未通过验证的表单元素设置高亮。

highlight: function (element, errorClass) {
                  $(element).addClass(errorClass);
                   $(element).fadeOut.fadeIn();
                }

以上这些是我所接触的,关于jQuery验证框架 还有许多。有兴趣的可以查查jQuery.validate.js的API.

以上就是jQuery Validation的使用详解的详细内容,更多请关注其它相关文章!


推荐阅读
  • 全能终端工具推荐:高效、免费、易用
    介绍一款备受好评的全能型终端工具——MobaXterm,它不仅功能强大,而且完全免费,适合各类用户使用。 ... [详细]
  • 容器与微服务基础:快速入门指南
    探索容器和微服务的基础知识,了解如何通过先进的应用性能管理(APM)工具提升监控效能。加入AppDynamics APM的导览,掌握容器与微服务实施及监控的最佳实践。 ... [详细]
  • ServletContext接口在Java Web开发中扮演着重要角色,它提供了一种方式来获取关于整个Web应用程序的信息。通过ServletContext,开发者可以访问初始化参数、共享数据以及应用资源。 ... [详细]
  • 近期,谷歌公司的一名安全工程师Eduardo Vela在jQuery Mobile框架中发现了一项可能引发跨站脚本攻击(XSS)的安全漏洞。此漏洞使得使用jQuery Mobile的所有网站面临潜在的安全威胁。 ... [详细]
  • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
  • 本文介绍了如何通过自定义配置类,利用 `WebMvcConfigurer` 接口来扩展 Spring MVC 的功能,实现默认首页的自动跳转,同时避免使用 `@EnableWebMvc` 注解全面接管 Spring MVC 的默认配置。 ... [详细]
  • 前端常用的布局类型——前端布局
    1.Static静态布局固定宽高:2.Liquid流式布局宽高用百分比,按屏幕分辨率调整,布局不发生变化3.Adaptive自适应 ... [详细]
  • 探讨在 Vue 框架中遇到的数据更新延迟或失败的问题,并提供解决方案。 ... [详细]
  • JSP服务器概述及搭建指南
    本文详细介绍了JSP服务器的概念、主流服务器软件及其搭建步骤,旨在帮助开发者更好地理解和使用JSP技术。 ... [详细]
  • 构建首个Spring MVC应用程序
    本指南将指导您如何从零开始创建一个简单的Spring MVC应用,涵盖项目模块创建、依赖管理、核心配置及控制器开发等关键步骤。 ... [详细]
  • 使用Bootstrap创建响应式渐变固定头部导航栏的方法
    本文详细介绍了如何利用Bootstrap框架构建一个具有渐变效果的固定顶部响应式导航栏,包括HTML结构、CSS样式以及JavaScript交互的完整实现过程。适合前端开发者和学习者参考。 ... [详细]
  • C# 对象转 JSON 字符串的方法与应用
    本文介绍如何在 C# 中使用一般处理程序(ASHX)将对象转换为 JSON 字符串,并通过设置响应类型为 application/json 来确保客户端能够正确解析返回的数据。同时,文章还提供了 HTML 页面中不依赖 jQuery 的 AJAX 方法来接收和处理这些 JSON 数据的具体实现。 ... [详细]
  • 本文探讨了使用JQuery UI可调整大小插件时遇到的一个常见问题:如何在用户调整元素大小后避免不必要的点击事件触发,导致元素被意外取消选中。 ... [详细]
  • 本文深入探讨了 Prototype.js 框架及其与 JavaScript 原生 toString() 方法之间的区别,适合对前端开发感兴趣的开发者阅读。文章将帮助读者理解两者在功能实现和应用场景上的不同,从而更好地利用这些工具进行高效编程。 ... [详细]
  • 本文详细介绍了如何使用JavaScript实现数据的双向绑定,包括MVVM架构的基本概念、不同框架下的实现方式以及具体的代码示例。 ... [详细]
author-avatar
弍大爺
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有