The verification method of Jquery+Jquery.metadata.js , this verification method can reduce the amount of code and has high reusability, because some of the verification code is encapsulated and we can use it directly. If the encapsulated verification does not work If you can meet the needs, you can also customize the verification function yourself. Previously, the company used the verification method that comes with struts2, which feels bloated and not reusable, and every time you modify the xml file, you need to restart the server, so I I found information and wrote a verification method for jquery.metadata.js.
1. First, you need to import the js library. The js that need to be imported are as follows:
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>
The five files are described below. The first to fourth js files are encapsulated and do not need to be written by us. We only need to import them when we use them. The fifth file belongs to the verification of the style. For example, if the verification fails, the style will be called. The method in the file shows the wrong picture
2. After the introduction of js is completed, you can directly copy this js code to the page
Figure 1 :
3. The introduced fifth js content is shown in Figure 2. The checkMsg method called in Figure 1 is to call the checkMsg method in Figure 2. Because the jquery verification package for the phone number is not found , you can also customize the verification function here. The jQuery.validator.addMethod() method in Figure 2 is a custom verification package for the phone number. If you want to use the phone number verification on the page in the future, you only need to add the following code:
<inputtype="text" name="telephone" id="telephone" class="{required:true,phone:true}"/>
Figure II:
4. Figure 3 is the HTML code. The validation of the validator is configured in the class attribute, and different configurations are configured according to different requirements.
<input type="password" name="repass" class="{required:true,minlength:6,maxlength:10,equalTo:'#password'}"/>
required is a non-empty option, minlength is the minimum number of characters in the input box, maxlength is the maximum number of input characters in the input box , equalTo :'#password' is for verifying repeated passwords, and the format stipulates that it should be written like this
Figure 3 :
