jquery verification Plug-in validate use detailed _jquery

Introduction of Jquery.validate

The JQuery.validate.js plug-in is used to validate form input, and its use configuration is simple. Supports multiple event firings, with multiple validation rules, and custom validation rules.

1. Configuration method

First import the jquery library, then import the Validate plug-in, if you are prompted to import messages_zh.js.

Note that the validate import will be after 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>

You can then simply define the validation rules and specify the location of the error hint.

In $ (document). Ready () , add the validation rule and error hint location, 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 position
        /* Errorplacement:function (error,element) {
          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"/&G  T
<input id= "btnreset" type= "button" value= "Cancel" class= "btn"/>
</div>
</form>

This completes the very simple form verification feature, and validate the error message in the <input> brother <span> element when the form is not filled out correctly.

2, Name property

Description: The JQuery.validate.js Plug-in's association with <input> uses the form's Name property. Only <input> can verify that the Name property exists!

Two, custom error hint location

How do we set the display position when we want to set the error hint?

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

     /* ERROR Prompt position *
     /errorplacement:function (error,element) {//The first argument is the wrong prompt text, and the second argument is the current input box
        error.appendto (　　Element.siblings ("span")); With jquery, this is where the error hint text is displayed in the brother span of the current text box
     }

Three, custom error message

For example, when we have multiple require:true options, I want to set different prompts based on different options.

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

 Messages: { 
        UserName: { 
          required: "Please enter the username!"　　"//Note that the same must be filled out, but give priority to the prompt display in messages
        },
        email:{
          required:" Please enter the email address! " No uniform output required fields Oh
        }
      }

In fact, the jquery.validate default error tip is to generate a class=error label, so if you want to set the style, the easiest way to do this is to set the label on the OK, of course, the default label can be changed manually.

IV. Ajax Asynchronous validation
Only remote can be used, and 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 final effect is shown in the following illustration:

The above is the entire content of this article, I hope to help you learn.