Jquery+Jquery.metadata.js 的验证方式,这种验证方式可减少代码量,并且重用性高,因为有部分验证的代码是封装好的我们直接拿来用就可以了,如果封装好的验证不能够满足需求的话还可以自己自定义验证函数,之前公司用的是struts2自带的验证方式,用起来感觉很臃肿而且重用性不高,并且每次修改了xml文件的话还需要重启服务器,所以我自己找资料写了个jquery.metadata.js的验证方式。
一、???????????? 首先需要引入js库需要引入的js如下:
1.<scriptsrc="valForm/jquery.js"type="text/javascript"></script>
2.<scriptsrc="valForm/jquery.validate.js"type="text/javascript">
</script>
3.<scriptsrc="valForm/jquery.metadata.js"type="text/javascript">
</script>
4.<script src="valForm/messages_cn.js" type="text/javascript">
</script>
5.<scriptsrc="valForm/validateMessage.js"type="text/javascript">
</script>
下面介绍下这五个文件,第1-4个js文件是封装好的不需要我们去写,用的时候只需要引入就好,第5个文件属于样式的验证,比如验证不通过会调用样式文件中的方法显示错误的图片
二、引入js完成后,可直接将这段js代码copy到页面中即可
图一:
?
?
?
三、引入的第5个js内容如图二,图一中调用的checkMsg方法就是调用图二中的checkMsg方法,因为没有找到jquery对于电话号码的验证封装,所以在这里还可以自定义验证函数,图二中的jQuery.validator.addMethod()方法就是自定义的对于电话号的验证封装,如果以后在页面上想要使用电话号码验证,只需要加上如下代码即可:
<inputtype="text" name="telephone" id="telephone" class="{required:true,phone:true}"/>
图二:
四、图三为HTML代码,validator的验证是在class属性中配的,根据不同要求配不同的配置
<input type="password" name="repass" class="{required:true,minlength:6,maxlength:10,equalTo:'#password'}"/>
required为非空选项,minlength为输入框的最小字符数,maxlength为输入框的最大输入字符个数,equalTo:'#password'为验证重复密码的,格式规定要这么写
图三:
下面附上jquery验证整个工程