项目上要求输入框是必输项,于是共通组要求在必输项的控件上加上 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>
这样就可以,
不是每个工程都需要这样,可能和我自己的工程配置有关,以后遇到这样的问题,需要注意