jquery.metadata.js 方式验证用户输入框功能

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验证整个工程