Mvc jq client Form Verification

First download a jquery. Validate. js plug-in

 

<% @ Page Language = "C #" masterpagefile = "~ /Views/shared/site. Master "autoeventwireup =" true "codebehind =" index. aspx. cs "inherits =" MVC. validation. Views. Home. Index "%>
<Asp: Content ID = "indexcontent" contentplaceholderid = "maincontent" runat = "server">
<SCRIPT type = "text/JavaScript">
$ (Document). Ready (function (){
$ ("# Form-sign-up"). Validate ({
Rules :{
Password :{
Required: True,
Minlength: 8
},
Confirm_password :{
Required: True,
Minlength: 8,
Failed to: "# password"
},
Login :{
Required: True,
Remote: '<% = URL. Action ("isloginavailable", "home") %>'
}
},
Messages :{
Confirm_password :{
Required: "Please provide a password ",
Minlength: "Your password must be at least 8 characters long ",
Failed to: "Please enter the same password as abve"
},
Login :{
Required: "Please provide an alias ",
Remote: jquery. Format ("{0} is already in use ")
}
}
});
});
</SCRIPT>

<Form action = "<% = URL. Action (" register "," home ") %>" method = "Post" id = "form-sign-up">
<Table>
<Tr>
<TD> login (try with cibrax): </TD>
<TD class = "field"> <input type = "text" name = "login" id = "login"/> </TD>
</Tr>
<Tr>
<TD> Email: </TD>
<TD class = "field"> <input type = "text" name = "email" id = "email" class = "email required"/> </TD>
</Tr>
<Tr>
<TD> URL: </TD>
<TD class = "field"> <input type = "text" name = "url" id = "url" class = "url required"/> </TD>
</Tr>
<Tr>
<TD> password: </TD>
<TD class = "field"> <input type = "password" name = "password" id = "password"/> </TD>
</Tr>
<Tr>
<TD> password confirm: </TD>
<TD class = "field"> <input type = "password" name = "confirm_password" id = "confirm_password"/> </TD>
</Tr>
<Tr>
<TD colspan = "2"> <input type = "Submit"/> </TD>
</Tr>
</Table>
</Form>
</ASP: content>

 

 

 

(1) required: required field for true
(2) Remote: "check. php" uses ajax to call check. php to verify the input value.
(3) Email: true: You must enter an email in the correct format.
(4) URL: True must enter the URL in the correct format
(5) Date: True must be a date in the correct format
(6) dateiso: true: the date (ISO) in the correct format must be entered. For example, 2009-06-23,1998/01/22: only the format is verified and the validity is not verified.
(7) number: true: a valid number (negative number, decimal number) must be entered)
(8) digits: True must be an integer.
(9) creditcard: a valid credit card number must be entered.
(10) must to: "# field" the input value must be the same as # Field
(11) accept: enter a string with a valid suffix (the suffix of the uploaded file)
(12) maxlength: A string with a maximum length of 5 characters)
(13) minlength: 10 string with a minimum input length of 10 (one character for Chinese characters)
(14) rangelength: [5, 10] The input length must be a string between 5 and 10. ") (a Chinese character is a single character)
(15) range: [5, 10] The input value must be between 5 and 10.
(16) max: 5 input value cannot be greater than 5
(17) min: 10 input value cannot be less than 10

For example:

$ ("# Login"). Validate ({
Rules :{
Username :{
Required: True,
Minlength: 2
},
Email :{
Required: True,
Email: True
},
Password :{
Required: True,
Minlength: 6
},
Confirm_password :{
Required: True,
Minlength: 6,
Failed to: "# password"
}
},
Messages :{
Username :{
Required: "<span style = 'color: red'> enter the user name </span> ",
Minlength: jquery. Format ("<span style = 'color: red'> the user name is incorrect. It must be 2 Chinese characters or more than four characters </span> ")
},
Email :{
Required: "<span style = 'color: red'> enter the email address </span> ",
Email: "<span style = 'color: red'> enter the correct email address </span>"
},
Password :{
Required: "<span style = 'color: red'> enter the password </span> ",
Minlength: jquery. Format ("<span style = 'color: red'> the password you entered is incorrect. It should be six or more characters </span> ")
},
Confirm_password :{
Required: "<span style = 'color: red'> enter the password </span> ",
Minlength: jquery. Format ("<span style = 'color: red'> the password you entered is incorrect. It should be six or more characters </span> "),
Failed to: "<SPAN class = 'fred '> the two passwords are inconsistent </span>"
}
}
});