Validate jquery Registration Page Use example detailed

Official Use document: http://jqueryvalidation.org/documentation/

Reference: http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

Import JS files remember to use compressed. Min JS relies on jquery version in 1.11.1 No problem other versions are not tested

  <script type= "Text/javascript" src= "/js/jquery-1.11.1.js" ></script>  <script type= "text/ JavaScript "src="/js/jquery.validate.js "></script>

　

The HTML structure is made using the thinkphp framework.

  <div class= "w100 register-bg" > <div class= "w1200 Center Register-block" > <div C lass= "Register-div" > <form action= "{: U (' Service/reg/index ')}" method= "Post" class= "Reg-form" id = "Register" > <fieldset style= "border:0px;" > <legend class= "UI Header" > User registration <a href= "{: U (' Login  /index ')} "target=" _self "> Existing account login </a> </legend> <p  class= "field" > <label> user name:</label> <input Id= "name" name= "name" type= "text" placeholder= "User name" class= "User-name" > <span><                                /SPAN> </p> <p class= "field" > <label> Password:</label> &ltInput id= "PW" name= "PW" type= "password" placeholder= "password" class= "USER-PW" > </p>                                <p class= "field" > <label> repeat Password:</label>                            <input id= "AGAINPW" name= "AGAINPW" type= "password" placeholder= "Repeat password" class= "USER-RE-PW" > </p> <p class= "field" > <label& gt; Email:</label> <input id= "Emali" name= "email" type= "text" placeholder= "Mailbox" class= "                                User-email "> </p> <p class=" checkbox "> <input type= "checkbox" Name= "read" value= "1" class= "User-read" > <                                    Label for= "read" placeholder= "User Agreement Selection" > I have read agree to star Yao Gakuen <a href= "" target= "_blank "> User Agreement" </a> </label> </p> <p class= "field" > <button type= "Submit" class= "Register-button" & gt; Register </button> </p> </fieldset> &lt ;/form> </div> </div> </div>

How to use:

The most basic is the form ID to perform validate function validation

<script type= "Text/javascript" >                $ (document). Ready (function () {                    $ ("#register"). Validate ({                                        });                })            </script>

Remote Use instances

Official Introduction http://jqueryvalidation.org/remote-method/

Note that the remote write in the validation field inside the rules field such as name under the Name field in the HTML property ID and the Name property value is this

Messages field name add remote behind direct prompt text

Back end is the string true or fales see JS source looks like the comparison is true

  $ (document). Ready (function () {$ ("#register"). Validate ({/* debug:true,*/                        Errorclass: ' X-error ', errorelement: ' div ',/* error message display location */ Errorplacement:function (error,element) {error.appendto (Element.parent (). Find                        (' label '))                                }, rules:{name:{required:true, Minlength:4, rangelength:[4,10], REM                                    ote:{URL: ' {: U ("Service/validata/checkusername")} ',                                            Type: ' Post ', data:{name:function () {                                        return $ (' #name '). Val ();               }                     }}}, pw:{ Required:true, Minlength:8, Rangeleng                                 TH:[8,16]}, againpw:{required:true,                                Minlength:8, rangelength:[8,16], Equalto: "#againpw"}, email:{re                                    Quired:true, Email:true, remote:{                                    URL: ' {: U ("Service/validata/checkemail")} ', type: ' Post ', data:{email:function () {RE Turn $ (' #email '). Val ();                                       }                                    }                                }                            }, agreement:{Required:true                                }}, messages:{name:{ Required: "Please enter user name", minlength: "User name is at least 4 characters", rang                            Elength: "User name is 4-10 characters", Remote: "User name has been registered"},                                pw:{Required: "Please enter password", minlength: "Minimum password 8",                                Rangelength: "Please enter 8-bit to 16-bit password"}, againpw:{                                Required: "Please enter the confirmation password", minlength: "Confirm password minimum 8-bit", Rangelength: "Please enter 8 bits to16-digit password ", Equalto:" Two times input password inconsistent "}, email:                                {Required: "Please enter email", Email: "Please enter a valid email address", Remote: "The mailbox has been registered!" "}, agreement:{required:" Does not agree that the star Yao Gakuen Agreement does not Can register!                "                            }                        }                    }); })

Validation rules

rules:{                            name:{                                required:true,                                minlength:4,                                rangelength:[4,10],                                remote:{                                    url: ' {: U (" Service/validata/checkusername ")} ',                                    type: ' Post ',                                    data:{                                        name:function () {                                            return $ (' #name '). Val ( );                                        }                                    }                            }                            }}

Hint text

messages:{                            name:{                                Required: "Please enter user name",                                minlength: "User name is at least 4 characters",                                rangelength: "User name is 4-10 characters",                                Remote: "User name has been registered"                            }}

Background PHP thinkphp Framework The parameters that are accepted here are the parameters in the front-end remote data

Public Function Checkusername () {

    $name = I (' name ', 0);//Here name is the data parameter sent by JS remote
   if ($name = = "0") {

       echo "false";

   }else{

       $Member = M (' Admin_member ');
       $s = $Member->where (Array (admin_name=> $name))->select ();


       echo $s = = null? " True ":" false ";
   }

}

Public Function Checkemail () {

    $email = I (' email ', 0);
    if ($email = = "0") {

        echo "false";

    }else{

        $Member = M (' Admin_member ');
        $s = $Member->where (Array (email=> $email))->select ();

        echo $s = = null? " True ":" false ";
    }

}

Want to see the front desk return what can be found in the source Jquery.validate.js remote in the $.ajax success return parameters response output This value can be seen in the browser

　

Error message Settings

Errorclass prompt for incorrect class name errorelement the element that prompts for the error message is automatically added back errorplacement is where to put the error message

                        Errorclass: ' X-error ',                        errorelement: ' div ',                        /* error message Display location *                        /errorplacement:function (error,element) {                            error.appendto (Element.parent (). Find (' label ')                        },

Here are the field validation rules

such as the Name field

It is commonly used that you must fill in at least 4 bits (for example) to enter 4-10 strings (for example)

Required:true must be filled minlength:4 minimum input 4 characters rangelength:[4,10] Enter 4-10 ranges of characters these are written in the rules.

name:{                                required:true,                                minlength:4,                                rangelength:[4,10],                                remote:{                                    url: ' {: U ("Service/validata /checkusername ")} ',                                    type: ' Post ',                                    data:{                                        name:function () {                                            return $ (' #name '). Val ();                            }}                            },

Hint text written in messages corresponding validation properties required minlength Rangelength remote fill in the corresponding information can be

                         name:{                                Required: "Please enter user name",                                minlength: "User name is at least 4 characters",                                Rangelength: "username is 4-10 characters",                                Remote: "User name has been registered"                            },

View verification method go directly to the source search methods

　

Verify that the checkbox must be selected

Html

                         <p class= "checkbox" >                                <input type= "checkbox" name= "agreement" value= "1" class= "User-read" id= "agreement" >                                <label  for= "agreement" placeholder= "User Agreement Selection" >                                      I have read consent to star Yao Gakuen                                      <a href= "target=" _blank > User Agreement </a>                                </label>                            </p>

Validation rules

  agreement:{                                required:true                            }

　　

　　

　

Other reference URLs

Http://www.w3cschool.cc/jquery/jquery-plugin-validate.html

　　

　

　　

　　

　

Validate jquery Registration Page Use example detailed