Formvalidator Form Verification Plug-in in jquery learn notes

The JQuery formvalidator Form Verification plug-in is a client form validation plug-in. The first contact with jquery Formvalidator is the time to learn phpcms because it is powerful in form validation and easy to use, so I often use it when doing web development. In Wblog, it is always necessary to write the data without the jquery formvalidator validation. This article mainly introduces the method of using jquery formvalidator.

Let me use the Wblog installation package install.php example to illustrate the use of jquery formvalidator.
One, loading jquery formvalidator related files

code is as follows

copy code

<script Type= "Text/javascript" src= "/w3note/modules/admin/tpl/public/js/jquery-1.4.3.min.js" ></script>           2<script language= "javascript" type= "Text/javascript" Src= "/w3note/modules/admin/tpl/public/js/formvalidator.js" charset= "UTF-8" ></script>           <script language= "javascript" type= "Text/javascript" src= "/w3note/ Modules/admin/tpl/public/js/formvalidatorregex.js "charset=" UTF-8 ></script>

Put the above file loading code between

Second, JQuery Formvalidator code rules of Writing

code is as follows

copy code

<script type=" Text/javascript ">            $ (function () {              $.formvalidator.initconfig ({autotip:true,formid: "MyForm", Onerror:function (msg) {}});  &NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP;&NBSP $ ("#admin"). Formvalidator ({onshow: "Fill in the background administrator name", onfocus: "Fill in the background admin name"}. Inputvalidator ({min:3,max:20,onerror: "Fill in the backend administrator name"}). Regexvalidator ({regexp: "^\w+$", OnError: "Malformed"})            });            </script>

Validation form corresponding to the above code

The code is as follows	Copy Code
<form action= "check.php" method= "post" id= "MyForm" > <label for= "FirstName" > Username:</label> <input type= "text" name= "admin" id= "admin" style= "width:180px" value= "admin"/> </form>

The JS code above needs to be written in the following sections:

1, Formid: "MyForm"
MyForm is the ID of the form FORMR, required, otherwise the form is submitted with no validation effect.
2. $ ("#admin")
The ID of the input box admin is id= "admin"
3, Min:3,max:20
The control controls input box input the word number, here indicates the input word number range is 3-20
3, OnShow: "Fill in the background admin name"
Description of the input box hint
4, onfocus: "Fill in the background admin name"
Description of the prompt when the input box gets focus
5, OnError: "Fill in the background admin name"
Tips for entering a box when writing an error
6. Regexvalidator ({regexp: "^\w+$", OnError: "Malformed"})
A regular added for further validation, which means that the data in the input box can only be numbers, letters, or underscores, and more JS regular please view the Formvalidatorregex.js file. Use this step to load the Formvalidatorregex.js file.

The types of controls supported for each format are as follows: Input TextArea Select Check mode Text Radio CheckBox File Password TextArea Select-one Inputvalidator √ √ √ √ √ √ √ CompareValidator √ √ √ √ Ajaxvalidator √ √ √ √ √ Regexvalidator √ √ √ √ Functionvalidator √ √ √ √ √ √ √ If you use an unsupported checksum, the plugin will ignore this checksum function.
plugin currently prompts for errors, there are two modes: Showword and Showalert, that is, text hints and window hints , the following 4 major verification methods, for Showalert This way is not necessary, some configuration is not useful Listed below are the properties that are exposed by global initialization and 5 checksum methods, respectively.
Formvalidator:	The type used for initialization must be performed first. ("√" for Showalert available parameters)
Property Property name Default value Showalert Explain in detail Validatorgroup Validation group "1" √ The control of a page can be divided into groups, and a separate checksum Empty Can be an empty False √ Automodify Automatically fix errors when you enter errors to leave the focus True √ First give the prompt then, automatically fix, currently only supports text, file, textarea three kinds Onempty Tips for empty time "Blank Entry" can be null, the prompt for the empty time. is not displayed for the empty person OnShow Tips for displaying time "Please enter the content" is not displayed for the empty person onfocus Tips for getting focus "Please enter the content" is not displayed for the empty person Oncorrect Enter the prompt after the correct "Input correct" When you focus away from the control, the prompt will appear if the input is correct. is not displayed for the empty person Tipid Display the container ID for the error Form id+ "Tip" If the hint layer is not built automatically, indicate the ID number that is prompted If the hint layer is automatically built, it represents the target control relative to the hint layer Tipcss Styles for automatically constructed hint layers "Left": "10px", "Top": "1px", "Height": "20px", "width": "250px" A hint layer used primarily for locating automatic builds Forcevalid Force entered value must be valid True √ Whether to treat a full-width character as a parameter of 2 lengths Ajax Submit Server True √ Ajaxvalidator whether to submit the form to the server DefaultValue Default value Null √ All input and select forms. If you do not set it, keep the original value, once the setting is set to the default value. Triggerevent Default value Blur √ Currently supports 2 property values: Blur: Trigger when losing focus Change: Triggers when the value in the input box changes
Inputvalidator:
Property Property name Default value Explain in detail Type Comparison type "Size" (Invalid for Select) ' Size ': Indicates comparison length, default value "Number": Comparison of numeric values ' String ': Character comparison ' Date ': Short Date type "datetime": Long Date type Min Minimum Length/value 0 The default numeric type. If you are comparing characters, please pay the character type For Select-one, the parameters in Inputvalidator min and Max indicate the range of index numbers selected For Select-multiple, the parameters in Inputvalidator min and Max indicate the number of selections Max Maximum length/value 99999999999 Ditto OnError Tips for errors "Input Error" is not displayed for the empty person. Onerrormin Smaller than the MIN attribute hint Null Error prompts when the user enters a value that is smaller than the min attribute Onerrormax Hints larger than the Max attribute Null Error prompts when the user enters a value that is larger than the Max attribute Empty Whether control text values allow both sides to be empty Null is allowed on both sides Default value {Leftempty:true,rightempty:true,emptyerror:null} Leftempty: Indicates whether NULL is allowed on the left Rightempty: Indicates whether the right side is allowed to be empty Emptyerror: The prompt at which the error occurs, and if NULL, the OnError property is used to prompt for an error.
CompareValidator:
Property Property name Default value Explain in detail Desid To compare the ID of a control "" Target ID to compare to the source target Operateor Comparison symbol "=" There are several types: =,!=, >, >=, <, <= DataType Data type "String" Only 2 types are currently supported: "string", "Number", "datetime", "date" OnError Tips for errors "Input Error" is not displayed for the empty person.
Regexvalidator:
Property Property name Default value Explain in detail Regexp Regular expression or an array of expressions "" Using the explicit constructor new RegExp ("pattern" [, "flags"]); Since JavaScript is used as an escape character, it is necessary to use ' \ ' instead ' when using a display constructor to construct an instance object. Param Additional parameters I G: Delegates can make global matches. I: represents case-insensitive matching. M: Represents a multiple-row match. Can be any combination, of course, can not add parameters Comparetype Comparison type "||" "||" Or the relationship "&&" tied DataType Data type "String" ' String ': An expression of its own, ' enum ': an enumeration name. Please see demo3.htm for details. You can modify and add your own enumeration project names and expressions in the formvalidatorregex.js. OnError Tips for errors "Input Error" is not displayed for the empty person.
Ajaxvalidator:	Almost all properties are the same as $.ajax (), please refer to the help of the $.ajax () function
Property Property name Default value Explain in detail Type Type of request "Get" "POST" or "get" Url Address of the URL sent to "" On the server side, you can get the name of the control ID that triggers the validation by name for ClientID DataType The data type returned "HTML" XML, HTML, script, JSON, text Timeout Timeout setting 999 Data Data "" Async Whether to send in an asynchronous manner True Success The function that is called when the request succeeds Null ProcessData Automatically processes the returned data as a string True By default, if the data option is passed into an object instead of a string, it will automatically be processed and converted into a query string Complete The function that is called when the request completes Null Beforesend Functions called before the request Null There is one parameter, the same as the Beforesend parameter in the root $.ajax. Buttons You dot submit the button (group) jquery Object Null When you trigger the AJAX checksum, the corresponding button (group) in the buttons is grayed out until the server returns the data. Error The function that is called when the request fails "Request Failed" You can define the error yourself and automatically play it in the error. is not displayed for the empty person.
Functionvalidator
onerror /tr> properties property name default explanation of return value fun external function name () Parameter 1: value of element, Parameter 2: Element object default as Process Verify success/failure string checksum failed with return value as custom error No processing procedure prompt for error "Enter error" function return False
Common functions:	The main is to set global parameters and determine whether through the checksum
The name of the function Function description $.formvalidator.initconfig Parameters: Configuration Type Property Default value Description Validatorgroup "1" Which group do you want to configure for Formid "" The form ID number to register the Pageisvalid function automatically Alertmessage False Whether to pop up a window Autotip False Whether to automatically build a hint layer Errorfocus True Whether the first error control receives the focus when an error occurs Forcevalid True Do you want to leave the focus until you have entered correctly? Wideword True Do you want to treat a full-width character as 2 lengths Onsuccess Null This group validates the callback function after passing, returns false, prevents the form from submitting Submitonce False Do you want to erase all the submit buttons after passing the check? OnError Null The callback function after the failed checksum for this group has two parameters Parameter 1 An error message that the checksum does not pass Parameter 2 An element object that does not pass validation Parameter 3 Array of all error messages, you can iterate through the $.map Debug False is in debug mode. True: Do not submit the form $.formvalidator.pageisvalid One parameter: not a configuration type Validatorgroup "1" Which group do you want to validate against? $.formvalidator.isonevalid One parameter: The table cell element ID that was set to validate. Returns the information that verifies the success. $.formvalidator.setfailstate function ("Tipid", "displayed information") In Showword mode, if your extra checksum does not pass, you can set it to fail information and status $.formvalidator.getlength function ("table cell element ID") The number of selections that a CheckBox or RadioButton represents (the same group). For Select-one, select the value of the index The number of selections in the Parameters min and Max in Select-multiple,inputvalidator Other input represents the length of the character. $.formvalidator.retsettipstate function (validation group number) to restore the contents of the group's prompts to the OnShow state $.formvalidator.reloadautotip Reposition an automatically built hint layer