欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-07-13 16:10:04
...

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-4js文件是封装好的不需要我们去写,用的时候只需要引入就好,第5个文件属于样式的验证,比如验证不通过会调用样式文件中的方法显示错误的图片

二、引入js完成后,可直接将这段js代码copy到页面中即可

图一

 

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

 

 

三、引入的第5js内容如图二,图一中调用的checkMsg方法就是调用图二中的checkMsg方法,因为没有找到jquery对于电话号码的验证封装,所以在这里还可以自定义验证函数,图二中的jQuery.validator.addMethod()方法就是自定义的对于电话号的验证封装,如果以后在页面上想要使用电话号码验证,只需要加上如下代码即可:

<inputtype="text" name="telephone" id="telephone" class="{required:true,phone:true}"/>

图二:

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

四、图三为HTML代码,validator的验证是在class属性中配的,根据不同要求配不同的配置

<input type="password" name="repass" class="{required:true,minlength:6,maxlength:10,equalTo:'#password'}"/>

required为非空选项,minlength为输入框的最小字符数,maxlength为输入框的最大输入字符个数,equalTo:'#password'为验证重复密码的,格式规定要这么写

图三

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

下面附上jquery验证整个工程

相关标签: struts2 jquery