Verify the jQuery Validation Engine simple custom regular expression, jqueryvalidation
First on the Control Address http://code.ciaoca.com/jquery/validation-engine/
The specific method of use is clearly stated on the website. I wrote this article mainly to record how to add custom Regular Expressions by myself. This problem has been fixed several times and will be solved just now. I also checked a lot on the Internet and didn't talk about the idea. Maybe I was too stupid to understand it.
This control is very powerful, and validation is enough for us to use. However, sometimes our project needs are unique. What should we do here? Then you have to write a regular expression and then match the regular expression. However, I cannot find the corresponding regular expression at the beginning.
The above is written on the website, But where should I fill this section? This file will be introduced when we introduce the file.<Script src = "js/jquery. validationEngine-zh_CN.js"> </script>, is in this file!
Of course, a smart person may find a place early, but I am stupid. I finally thought about whether to fill in the source file.
'Evername ':{
'Regex': '^ [\ u4E00-\ u9FA5] + $ | ^ [0-9] * $ | \ ·',/* Custom Regular Expression */
'Alertext': 'invalid name'/* indicates that the verification fails */
}
This section is the regular expression that I entered to match a name. It must be a number, a Chinese character, or a hyphen (-). If it does not match, an error is prompted. If it does not match, it passes, of course, this type of ghost generally does not have a general regular expression. You have to write or merge it yourself.
Here I want to talk about some small details. This is my problem:
1. Remember to put regex in quotation marks when writing regular expressions.
2. To match several regular expressions at the same time, use the vertical bar '| '.
3. to match a special character, for example, ".", you only need to add a slash, for example, \. or you need to match a word, for example, if we want to make the two "js" Letters meet the requirements, because our requirements are Chinese and numbers, and English is not in line with the requirements, I just want to make these two letters also meet the requirements. What should we do? \ Js.
Next, let's talk about the basic usage of this control:
1. first introduce the file
<link rel="stylesheet" href="css/validationEngine.jquery.css">
<Script src = "js/jquery. js "> </script> <script src =" js/jquery. validationEngine-zh_CN.js & gt; </script & gt; <script src = "js/jquery. validationEngine. js "> </script>
2. Then add an id to the form.
<Form id = "form_id"...>... </form>
3. Start Using
<Input id = "selectName1" type = "text" class = "validate [required, custom [everyName] "data-errormessage-value-missing =" * this field cannot be blank. "data-errormessage =" * incorrect character format. Please enter it again "/>
First, all the verifications are added to the input class. validate [required] is mandatory, while custom [everyName] is required for regular expression matching, for more information, see the website. I have customized the everyName here. I tested that M [] can only be filled in with one, and there can only be one, not multiple. You can enter multiple values in the brackets of validate [], which are separated by commas, but only one value can exist in validate.
Validate [required, custom [number], maxSize [20], min [0] indicates that this is a required item and can only contain numbers, the maximum number of input characters is 20, and the minimum value is 0.
Data-errormessage-value-missing = "* this field cannot be blank" is understood as: if required is contained, it will prompt this sentence, which can be customized.
Data-errormessage = "* The character format is incorrect. Please enter it again." This section is understood as ". If it is not blank, if it does not meet our custom Regular Expressions and requirements (only numbers are allowed, and the maximum number of characters is 20, and the minimum value is 0), this sentence is prompted, this statement can also be customized.
The above is the summary of this application, mainly for yourself. If you forget to use it, you can refer back to O (∩) O ~
Another record is that if the project has a start time and End Time, the requirement is that when the start time is selected, all the items before the end time cannot be selected. Otherwise, if the end time is selected, the start time must be earlier than the end time. A js is required for control. Because we use the bootstrap-datepicker control, we will record it here for the time being.
$ (". Times_ept"). eq (0). change (function (){
$ (". Times_ept"). eq (1). datepicker ('setstartdate', $ (this). val ());
});
$ (". Times_ept"). eq (1). change (function (){
$ (". Times_ept"). eq (0). datepicker ('setenddate', $ (this). val ());
});
$ (". Times_p"). eq (0). change (function (){
$ (". Times_p"). eq (1). datepicker ('setstartdate', $ (this). val ());
});
$ (". Times_p"). eq (1). change (function (){
$ (". Times_p"). eq (0). datepicker ('setenddate', $ (this). val ());
});