项目上要求输入框是必输项,于是共通组要求在必输项的控件上加上 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>
这样就可以,
不是每个工程都需要这样,可能和我自己的工程配置有关,以后遇到这样的问题,需要注意
相关推荐
php jquery 登录验证 php jquery 登录验证 php jquery 登录验证
一个配合jquery库使用的数据验证js jquery库在1.4以上即可 只需引用一个js,如没有引用jquery库的需引用 如验证input或textbox中输入的时候email只需: 在input或textbox中加入属性ValidDataForEmail='default'即刻...
jquery 前端表单验证框架 简单 实用,有具体Demo实例
jQuery-Validation-Engine-master 表单验证插件 简单好用,已经包含汉化
自做的一个简单的表单验证 jquery validate 表单验证 jquery validate 表单验证
一个简单的jquery ajax 实现页面与后台的无刷验证
jquery表单验证插件简单的会员注册表单验证代码
这是jQuery的一个中文验证框架,简单实用,效果好!基本上的验证都支持。
jquery easyui验证,好看有效,简单!
本插件的宗旨是:用户无需写一行JS验证代码,只需在要验证的表单中加入相应的验证属性即可,让验证功能易维护,可扩展,更容易上手。 DEMO中已经包含了常用的正则表达式,可以直接复用,为了考虑扩展性,所以针对...
jquery validate表单验证插件制作注册表单提交验证 jquery validate表单验证插件制作注册表单提交验证
jquery表单验证插件,是表单验证更简单方便
自己写的一个练习,基于jquery的表单验证控件,主要功能都有,但不很完整. 用法是在需要验证的input标签里加 validate 属性,内容是JSON格式的 比较简单,大家有需要可以拿去免费送,欢迎评论. 这个链接有图片效果和主要...
主要介绍了jQuery简单验证上传文件大小及类型的方法,结合实例形式分析了jQuery针对上传文件的类型与大小运算操作相关技巧,需要的朋友可以参考下
bootstrap-validator是一款简单实用的Bootstrap3表单验证jQuery插件。该表单验证插件使用HTML5的data属性来设置验证属性,可以完成所有常用的表单验证功能。
Jquery正则表达式用户验证,简单易懂
jquery 表单验证实例,自动验证简单方便。 是.net 实例,VS2010版实例。 直接拷贝vail文件到你的网站根目录下即可。文件test.aspx是测试实例!messages_cn.js是中文提示,也可以通过该文件查看验证的字段,比如日期是...
jQuery简单用户注册表单验证模板基于jquery.1.10.2.min.js制作,简单表单验证功能,有用户名、密码、确认密码、邮箱、手机号码等表单元素。
来源:http://www.17sucai.com 使用后感:简单实用
* 给引用页面动态添加验证事件 * 案例: 及格分数</label> 及格分数" fmt="float"> 分 * 解释:input id 为必有项, mstype="1":标识该输入框为需要校验 msg="及格分数" msg:标识这个文本框需要...