Jquery validate usage and extension rules, jqueryvalidate

Jquery validate usage and extension rules, jqueryvalidate
Index.html

<! -- Import required items -->
<Script src = "jquery. js" type = "text/javascript"> </script>
<Script src = "jquery. validate. js" type = "text/javascript"> </script>
<! --
{Required: true, minlength: 5, failed to: '# password'} must be added to metadata. js if you need to use {} in the class.
-->
<Script src = "jquery. metadata. js" type = "text/javascript"> </script>
<! --
Custom Extension
-->
<Script src = "jquery. validate. ext. js" type = "text/javascript"> </script>
<Style type = "text/css">
Label. error {
Padding-left: 2px;
Padding-bottom: 2px;
Font-weight: bold;
Color: red;
Font-size: 13px;
}
</Style>
<Form id = "signupForm" method = "get" action = "">
<P>
<Label for = "firstname"> Firstname </label>
<Input id = "firstname" name = "firstname" class = "required maxrang {haveBlank: true}"/>
</P>
<P>
<Label for = "email"> email </label>
<Input id = "email" name = "email" class = "required email"/>
</P>
<P>
<Label for = "email"> E-Mail (custom rule isEmail) </label>
<Input id = "email" name = "email" class = "required isEmail"/>
</P>
<P>
<Label for = "password"> Password </label>
<Input id = "password" name = "password" type = "password" class = "{required: true, minlength: 5}"/>
</P>
<P>
<Label for = "confirm_password"> Confirm Password </label>
<! -- {Required: true, minlength: 5, failed to: '# password'} metadata. js needs to be introduced -->
<Input id = "confirm_password" name = "confirm_password" type = "password" class = "{required: true, minlength: 5, failed to: '# password'}"/>
</P>
<P>
<Input class = "submit" type = "submit" value = "Submit"/>
</P>
</Form>
<Script type = "text/javascript">
$ (). Ready (function (){
// Form submission
$ ("# SignupForm"). validate ();
});
</Script>

Jquery. validate. ext. js

// Re-write the prompt jQuery. extend (jQuery. validator. messages, {required: "required field", remote: "correct this field", email: "enter an email in the correct format", url: "enter a valid URL", date: "enter a valid date", dateISO: "enter a valid date (ISO ). ", number:" enter a valid number ", digits:" Only an integer can be entered ", creditcard:" enter a valid credit card number ", please: "Enter the same value again", accept: "enter a string with a valid suffix", maxlength: jQuery. validator. format ("enter a string with a maximum length of {0}"), minlength: jQuery. validator. format ("enter a string with at least {0} Length "), Rangelength: jQuery. validator. format ("enter a string between {0} and {1}"), range: jQuery. validator. format ("enter a value between {0} and {1}"), max: jQuery. validator. format ("enter a maximum value of {0}"), min: jQuery. validator. format ("enter a minimum value of {0}")}); // custom extension jQuery. validator. addMethod ("isMobile", function (value, element) {var length = value. length; var mobile =/^ (13 [0-9] {1}) | (15 [0-9] {1 }) | (18 [0-9] {1}) + \ d {8}) $/; return t His. optional (element) | (length = 11 & mobile. test (value) ;}, "Incorrect mobile phone format"); jQuery. validator. addMethod ("isEmail", function (value, element) {var email =/^ (\ w) + (\. \ w +) * @ (\ w) + ((\. \ w +) $/; return this. optional (element) | email. test (true) ;}, "Incorrect email format"); jQuery. validator. addMethod ("filterDBcom", function (value, element) {var command =/select | update | delete | insert | declare | dbcc | alter | drop | creat | backup | add | set | o Pen | close | exec | count | '| "| = | ;||<|%/I; return this. optional (element) |! (Command. test (value) ;}, "cannot contain special SQL characters"); jQuery. validator. addMethod ("filterHTML", function (value, element) {var chrnum =/<[^>] +>/; return this. optional (element) |! (Chrnum. test (value) ;}, "do not include html characters"); jQuery. validator. addMethod ("isIp", function (value, element) {var chrnum =/^ (\ d {1, 2} | 1 \ d | 2 [0-4] \ d | 25 [0-5]) \. (\ d {1, 2} | 1 \ d | 2 [0-4] \ d | 25 [0-5]) \. (\ d {1, 2} | 1 \ d | 2 [0-4] \ d | 25 [0-5]) \. (\ d {1, 2} | 1 \ d | 2 [0-4] \ d | 25 [0-5]) $/; return this. optional (element) | chrnum. test (value) ;}, "Incorrect ip Format"); jQuery. validator. addMethod ("haveBlank", function (value, element) {var is = value. ind ExOf ("")> = 0? False: true; return this. optional (element) | is;}, "cannot contain spaces"); // What label is created for the error message <label> xxxx </label> $. validator. setDefaults ({errorElement: "label "});

Effect