<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <title></title> <script src= "Jquery-1.5.js" type= "text/Web Effects" ></script> <script src= "Jquery.validate.min.js" type= "Text/javascript" ></script> <script type= "Text/javascript" JQuery.validator.addMethod ("regex", //addmethod 1th parameter: Method name function (value, element, params) { //addmethod 2nd Parameter: Authentication method, //Validation method parameters (values of validated elements, validated elements, parameters) var exp = new RegExp (params); //instantiation of regular objects, parameters for user-passed regular expressions return Exp.test (value); //Test Match }, format error); $ (function () { $ ("#signupForm"). Validate ( The new section in the previous example { Rules: { TxtPassword1: "Required",//password 1 required TxtPassword2: { //Password 2 describes more than 1 items using the object type required:true, //required, this can be an anonymous method Equalto: "# TxtPassword1 ", //must be equal to password 1 rangelength: [5, 10], //length 5-10 between Regex: "^ w+$ //Use custom validation rules }, txtemail: "Email", //e-mail must be legal Sex: "Required" }, messages: { //corresponds to the error message above txtPassword1: "You must fill in", TxtPassword2: { Required: "You must fill in", Equalto: "Password Inconsistent", Rangelength: "String length must be between {0} and {1}", Regex: "Password can only be numbers, letters and underscores" } }, Errorplacement:function (Error, Element) {//Specify error message Location if (Element.is (': Radio ') | | | element.is (': CheckBox ')) {//If radio or checkbox var Eid = element.attr (' name '); Get the element's Name property Error.appendto (Element.parent ()); To add an error message after the parent node of the current element } else { Error.insertafter (Element); } }, Debug:false,//if modified to true, the form will not be submitted Submithandler:function () { Alert ("Beginning of submission"); } }); }); </script> <style type= "Text/css Tutorial" > * { font-size:14px; } #signupForm Label.error { color:red; font-size:13px; margin-left:5px; padding-left:16px; Background:url ("Error.png") left no-repeat; } </style> <body> <form id= "Signupform" method= "Get" action= "" > <fieldset> <legend> User Registration </legend> <p> <label for= "TxtPassword1" > Password 1</label> <input id= "TxtPassword1" name= "TxtPassword1" type= "text"/> </p> <p> <label for= "TxtPassword2" > Password 2</label> <input id= "TxtPassword2" name= "TxtPassword2" type= "text"/> </p> <p> <label for= "Txtemail" > Email </label> <input id= "Txtemail" name= "Txtemail"/> </p> <p> <label for= "Sex" > Sex </label> <input type= "Radio" id= "Rdofemale" name= "sex"/> Male <input type= "Radio" id= "Rdomale" name= "Sex"/> Female </p> <p> <label for= "Txtage" > Age </label> <input id= "Txtage" name= "Txtage" min= "a" max= ""/> <!--age is only between 18-45--> </p> <p> <input type= "Submit" value= "submitted"/> </p> </fieldset> </form> </body> |