Validate of jquery plugins

The JQuery.validate.js plugin is used to validate form input and its configuration is very simple. Supports multi-event triggering, comes with multiple validation rules, and also supports custom validation rules.

1, configuration method.

Import the jquery library first, then import the validate plug-in, if the Chinese hint also need to import messages_zh.js.

Note that the import of validate is to be behind the jquery library. The code is as follows:

    <script src= "Jquery.1.8.3.js" type= "Text/javascript" ></script>    <script src= "Jquery.validate.js "Type=" Text/javascript "></script>    <script src=" messages_zh.js "type=" Text/javascript "></ Script>

Then just define the validation rules and specify the location of the error prompt.

In the document. Ready (), add the validation rule and the location of the error prompt, the code is as follows:

   JS code: <script type= "Text/javascript" > $ (Function () {$ ("#form1"). Validate ({/  * Custom Validation rules */rules:{username:{required:true,minlength:6}, userpass:{ REQUIRED:TRUE,MINLENGTH:10}},/* ERROR prompt Location */errorplacement:function (Error,ele                ment) {error.appendto ("element.siblings (" span "));        }            }); }) </script> HTML code: <form id= "Form1" action= "#" method= "POST" > <p> user Login </p> <p> Name: <input id= "txtname" name= "username" type= "text" class= "TXT"/><span style= "color:red;font-size:10px;" ></span></p> <p> Password: <input id= "Txtpass" name= "userpass" type= "password" class= "TXT"/>< Span style= "color:red;font-size:10px;" ></span></p> <div> <input id= "btnlogin" type= "button" value= "Login" class= "BTN"/>&nbs　p;&nbsp;　　　　　<input id= "btnreset" type= "button" value= "Cancel" class= "BTN"/>&nbsp;&nbsp; </div> </form>

This completes the very simple form validation feature, and validate displays an error message in <input> 's brother <span> element when the form is filled out incorrectly.

2. Description: The JQuery.validate.js plugin is associated with <input> using the Name property of the form. Only the <input> of the name attribute is available to verify!

Two, the custom error prompt location, when we want to set the error prompt display location How to set?

The answer is that in the Errorplacement parameter, you can customize the writing according to your own needs, using jquery

          /* ERROR Tip location *          /errorplacement:function (error,element) {///The first parameter is the wrong hint text, the second parameter is the current input box               error.appendto (　　Element.siblings ("span")); With jquery, which is set here, the error hint text is displayed in the sibling span of the current text box.          

Third, custom error message, such as when we have multiple require:true options, I would like to set different options according to the different ways to do?

The answer is in the messages parameter. Set the prompts you want with layers of nesting. If a field does not have a message message, the default prompt message is called.

            Messages: {                 UserName: {                     required: "Please enter user name!　　"//note, also required, but priority display in messages,                email:{                    Required:" Please enter your email address! " Does not uniformly output required fields Oh                }            }

In fact, the Jquery.validate default error prompt is to generate a class=error label, so if you want to set the style, the simplest way is to set it for this label, and of course the default label can be changed manually.

When Ajax asynchronous authentication is required, only the remote can be used, note that the JSON returned in the background can only be true or false.

Here is a comprehensive example of the foreground HTML code

Background controller code:
    public class Homecontroller:controller    {public        actionresult Index ()        {            return View ();        }        [HttpGet]        Public ActionResult Checkusername ()        {            string username = httpcontext.request.querystring["username"];            BOOL succeed = true;            if (username = = "Admin")            {                succeed = false;            }            Return Json (Succeed, jsonrequestbehavior.allowget);        }    }
The heaviest effect is as shown
　　
Attach source code: source Code