项目上要求输入框是必输项,于是共通组要求在必输项的控件上加上 class=“required”
当时就觉得奇怪,为什么加了个class就能实现,必输项控制,class不是CSS里的类么
最近查阅了一下,做个简述
这里用了jquery的验证
在jsp文件中引入jquery, jquery.validate.js,jquery.message.js,jquery.metadata.js
在jsp中加入
$.validator.setDefaults( { submitHandler:function(){ alert("validate OK"); document.forms[0].submit(); } } ); $.metadata.setType("attr", "validate"); $("form").validate( { errorPlacement:function(error, element){ error.appendTo(element.parent()); } } );
在某个输入控件上添加class=“required”就可以在提交表单时检查该控件是否输入值,并给予提示。如
<form:form action="/springjpaquery/find" commandName="mainCondition" method="post"> <form:input path="zipCode" class="required isZipCode"/> <input type="submit" value="refresh" /> </form:form>
这里form:form标签是spring的表单标签,我直接自己工程中拷贝过来的。
如果没有输入直接点击提交会提示“ This field is required. ”
这个信息是jquey.validate.js中定义好的,可以在js文件中看见
当然啊如果需要自定义也可以,在文件中加入
jQuery.extend(jQuery.validator.messages, {
required: "必选字段",
});
这时既可以提示“ 必选字段 ”
isZipCode是自定义的验证规则,当没有提供现成的时候需要自己定义规则
jQuery.validator.addMethod("isZipCode", function(value, element) { var tel = /^[0-9]{6}$/; return this.optional(element) || (tel.test(value)); }, "请正确填写您的邮政编码");
提示消息的位置,方式,style都可以按照自己的方式进行设置。这里不作细述
在尝试的时候发现一个问题,总是提示不能识别$,也就是js没有成功引入。在输入框直接输入js文件地址,也访问不到jquery文件,找了半天才发现是web.xml文件的配置问题。
在web.xml文件中加入
<servlet-mapping> <servlet-name>default</servlet-name> <url-pattern>*.js</url-pattern> </servlet-mapping>
这样就可以,
不是每个工程都需要这样,可能和我自己的工程配置有关,以后遇到这样的问题,需要注意
相关推荐
### jQuery表单验证插件详解 #### 一、概述 jQuery表单验证插件是一种用于简化Web表单处理过程的强大工具。它不仅能够帮助开发者轻松地实现表单数据的Ajax提交,还支持文件上传等功能,极大地提升了用户体验并降低...
jQuery,作为一款广泛使用的JavaScript库,提供了强大的表单验证插件——jQuery Validate,使得表单验证变得简单易行。本文将深入探讨jQuery表单验证的相关知识点,帮助开发者更好地理解和应用这一功能。 1. **...
jQuery前端验证框架以其简单易用和高度可定制性,为开发者提供了强大的表单验证解决方案。通过学习和实践,我们可以根据项目需求快速构建出高效、用户体验良好的前端验证系统。无论你是初学者还是经验丰富的开发者,...
对于电话号码的验证,使用了较为简单的正则表达式`/^[0-9\-\+\(\)]*$`,这允许数字、破折号、加号和括号。这种规则适合多种国际电话号码格式,但可能需要根据具体需求进一步细化。 #### 2. 邮政编码的验证 邮政...
一个配合jquery库使用的数据验证js jquery库在1.4以上即可 只需引用一个js,如没有引用jquery库的需引用 如验证input或textbox中输入的时候email只需: 在input或textbox中加入属性ValidDataForEmail='default'即刻...
通过简单的配置,可以实现各种复杂的验证需求。 **4. 验证规则** - **非空检查**:确保用户填写了必填字段,如`required`规则。 - **格式校验**:检查电子邮件、电话号码、日期等特定格式,如`email`、`phoneUS`...
jQuery Validation Engine 是一个功能强大的表单验证插件,以其简单易用和丰富的自定义选项而受到开发者的青睐。 ## 1. jQuery Validation Engine 插件简介 jQuery Validation Engine 是一款基于 jQuery 库的验证...
传统的JavaScript验证方式较为繁琐,而jQuery则提供了简单易用的方法来实现这一功能。jQuery表单验证插件是一种常用的解决方案,它基于jQuery框架,可以轻松地为网页表单添加各种验证规则。 #### 二、jQuery 验证...
jQuery作为一个强大的JavaScript库,提供了简单易用的API来进行表单验证。本实例将深入探讨如何利用jQuery实现网站会员注册表单的验证,并在用户提交form表单时进行有效控制。 首先,我们需要理解jQuery的核心概念...
1. **简单易用**:EasyValidator 2.0的API设计简洁明了,只需几行代码即可实现表单验证。 2. **丰富的验证规则**:内置多种验证规则,如必填、邮箱、电话、URL、数字、日期等,也可以自定义验证规则。 3. **TIP...
这个插件基于jQuery库,利用JavaScript的强大功能,简化了表单验证的过程,使得前端数据验证变得简单易行。 在JavaScript的世界里,jQuery是一个广泛使用的库,它极大地简化了DOM操作,事件处理和Ajax交互。而...
总结,jQuery.validate插件以其强大的功能和易用性,使得客户端表单验证变得简单而高效。结合中文API文档,开发者可以快速上手并熟练掌握各种验证技巧,提升开发效率,提供更优质的用户体验。无论你是初学者还是经验...
1. **易用性**:jQuery验证插件最大的优点是其简单易用的API。开发者无需预先编写HTML提示信息,而是通过JavaScript代码动态设置验证规则和错误消息。 2. **灵活性**:该插件支持多种验证规则,如非空、邮箱格式、...
总结来说,jQuery验证控件是jQuery库的一个强大补充,它使得在网页上创建强大的、用户友好的验证机制变得简单。开发者可以利用现有的插件,结合自定义规则和提示,创建出满足各种需求的验证解决方案。通过深入学习和...
总的来说,jQuery Validate框架通过提供丰富的验证规则、回调函数和自定义选项,使得在HTML表单中实现复杂的验证逻辑变得简单易行。无论你是新手还是经验丰富的开发者,这个框架都能帮助你快速构建安全、用户友好的...
本篇文章将详细探讨如何利用PHP和jQuery实现一个简单的登录验证系统。 首先,PHP(Hypertext Preprocessor)是一种服务器端脚本语言,用于开发动态网站和应用程序。在登录验证场景中,PHP主要负责处理用户提交的...
jQuery,一个流行的JavaScript库,提供了简单易用的API来实现这一功能。本篇文章将深入探讨基于jQuery的表单验证技术。 ### 1. jQuery简介 jQuery是由John Resig于2006年创建的一个轻量级的JavaScript库,它的核心...
同时,插件内置了许多常见的验证规则,如非空、邮箱格式、手机号码等,通过简单的配置即可应用到表单元素上。 其次,该插件的国际化特性是其一大亮点。支持中文意味着中国用户在使用表单时可以看到清晰易懂的错误...
jQuery Form 验证插件充分利用了jQuery的优势,使得开发者可以通过简单的API调用来实现复杂的表单验证功能。 **HTML**(HyperText Markup Language)是网页制作的基础,而**form**元素则是HTML中的表单标签,用于...