Jquery. validate. js plugin experience record

Recently, the jQuery. validate. js plug-in is required for the project, so you can record some of your work experience for future study.

[Example]

1. Foreground page

<Form id = "form1" method = "post"> UserName: <input type = "text" id = "UserName" name = "UserName"/> <! -- <Span id = "name_error"> </span> --> <br/> password: <input type = "password" id = "Password" name = "Password"/> <br/> <input type = "submit" id = "btnRegister" name = "btnRegister" value = "register"/> <input type = "button" id = "btnCancel" name = "btnCancel" value = "cancel"/> </form>

2. Javascript

<Script type = "text/javascript"> // Add custom validation jQuery. validator. addMethod ("checkPWD", function (value, element) {var flag = false; // flag = chkpwd ($ ("# pwd ")); // custom password verification logic return this. optional (element) | flag;}); $ (function () {$ ("# form1 "). validate ({rules: {UserName: {required: true, // emote: function () {// verify whether the user name exists in method 1 // $. ajax ({// type: 'post', // url: "Handler/Handler1.ashx", // data :{ Name: $ ("# UserName "). val ()}, // async: false, // success: function (data) {// $ ("# name_error" ).html (data ); ///} //}); //} remote: {// verify whether the user name exists. method 2 type: "POST", url: "Handler/Handler1.ashx ", // The background processing program dataType: "json", // receives the data format data :{// the parameter action to be passed: function () {return "CheckName"}, name: function () {return $ ("# UserName "). val () ;}, param1: function () {return "Custom parameter 1" ;}}}, Pas Sword: {required: true, checkPWD: true // custom verification. If you do not need custom verification, change true to false. }}, Messages: {"UserName": {required: "<span> the user name cannot be blank. </span>", remote: "<span> the member name already exists! </Span> "}," Password ": {required:" <span> the Password cannot be blank. </span> ", checkPWD:" <span> the password does not comply with the custom rules... </Span> "}}});}) </script>

3. background processing program

Public void ProcessRequest (HttpContext context) {context. response. contentType = "text/plain"; string action = context. request ["action"]; // obtain the username and custom parameter string name = context. request ["name"]; string param1 = context. request ["param1"]; if (! String. isNullOrEmpty (name) {// simulate database query. if the user inputs admin, the system prompts that the account already exists and returns false if (name. equals ("admin") {context. response. write ("false");} else {context. response. write ("true ");}}}

4. Running result

4.1 If the user does not enter data, an error is returned:

4.2 When an error message is entered, the following error occurs: