JQuery Formvalidator Handbook

Source: Internet
Author: User

What is jquery formvalidator?

JQuery formvalidator Form Validation plug-in is a client form validation plug-in. When doing B/s development, we often involve a lot of forms verification, such as new user registration, fill in personal information, input some regular data and so on. Before that, page developers (JavaScript developers) had to write a lot of JavaScript to check the form elements, which were repeatedly written in the development. Common checks such as cannot be empty, must meet the length requirements, must be a number, must be email and so on. Generally to judge the form elements more, the development process is dull-repeated code is repeated, and may also be compatible with a variety of browsers, more considerations make people headache. Because each page to be verified is basically the same logic, but in most cases, for a variety of reasons, developers would rather write a set of JS files, for ease of management. The JQuery formvalidator form plugin is dedicated to improving the process. You only care about the business logic, without the need for a relational implementation process, with simple configuration, without writing code to implement the validation of the form. It includes the general inspection function and the extensible checksum function. For each form element you only need to write a single line of configuration information to complete the validation. These configuration information does not need to write to the form elements, the implementation of the JS code and HTML code separation. The benefits of doing so, the B/s development process, the Division of labor more clearly, the page design just care about his page (when the design does not have to worry about the script broken), JavaScript developers only need to care about the development of scripts. The plug-in itself contains an infinite number of checks, as long as you extend regular expressions and functions. This plug-in to the same check plug-in the biggest difference: The calibration function can be extended, the verification code is implemented to complete the HTML code separation; You can complete all the checks for a form element by writing a single line of configuration information. The plug-in itself provides a number of callback functions that enable callers to maximize their imagination to fulfill their business needs. You can have many check groups on the same page, you just need to call return JQuery.formValidator.pageIsValid (' Check group number ') at the submitted button to complete the verification of multiple groups, not interfering with each other. Plugins have the ability to cross-browser. Currently in IE and FF two browser debugging through, you no longer consider how to be compatible in multi-browser, jQuery formvalidator help you do this.

Where is the jQuery formvalidator file placed in the Phpcms V9?

Web Directory \statics\js\formvalidator.js

Web Directory \statics\js\formvalidatorregex.js

How do I load a jquery formvalidator in V9?
12 <script language= "javascript" src= "<?php echo js_path?>formvalidator.js" type= "Text/javascript" charset= " UTF-8 " ></SCRIPT> <script language= "javascript" src= "<?php echo Js_path?>formvalidatorregex.js" type= "Text/javascript" charset= "UTF-8" ></SCRIPT>

JQuery Formvalidator Plugin's API Help

Currently supports 5 kinds of large calibration methods, namely: Inputvalidator (for input, textarea, select control character length, value range, selection control), CompareValidator (2 objects to provide a comparison, Currently can compare strings and numeric types), Ajaxvalidator (by Ajax to the server to do data validation), Regexvalidator (provide extensible regular Expression library), functionvalidator (provide extensible function library to do checksum)
The types of controls supported in 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 plug-in will ignore the check function.

Plug-in now prompt error, there are two modes: Showword and Showalert, that is, text hints and window tips , the following 4 large authentication methods, for Showalert This way is not necessary, some configuration is not useful The following lists the properties that are exposed by global initialization and 5 kinds of check methods, respectively

Formvalidator: The type used for initialization must be executed first. ("√" for Showalert available parameters

Property Property name Default value Showalert Explain in detail
Validatorgroup Validation group "1" A control of a page can be divided into groups, separately verifying
Empty Whether it is possible to empty False
Automodify Automatically fix errors when input errors leave the focus False First give the prompt and then, automatic repair, currently only support text, file, textarea three types
Onempty Tips for an empty time "Input is empty" Can be empty, the hint is empty. Empty is not displayed
OnShow Tips for displaying time "Please enter content" Empty is not displayed
onfocus Tips for getting the focus "Please enter content" Empty is not displayed
Oncorrect Enter the correct prompt "Input correct" This prompt will appear if you enter it correctly when you leave the focus away from the control. Empty is not displayed
Tipid Display the wrong container ID Form id+ "Tip" If the cue layer is not built automatically, indicates the ID number to be prompted if the prompt layer is automatically constructed, indicating that the target control is relative to the cue layer
Tipcss Style of the auto-built cue layer "Left": "10px", "Top": "1px", "height": "20px", "width": "250px" Primarily used to locate the cue layer for automated builds
Forcevalid The force entered value must be valid True Whether to treat a full-width character as a 2-length parameter
DefaultValue Default value Null All input and select forms. If you do not set it, keep the original value, once set to the default value.

Inputvalidator:

Property Property name Default value Detailed explanation
Type Comparison type "Size" (not valid for select) "Size": Indicates the comparison length, default value "number": Numeric Comparison "string": Character comparison "date": Short Date Type "datetime": Long Date type
Min Min. length/value 0 The default numeric type. If a character comparison is made, the income character type for Select-one, the parameter min and Max in Inputvalidator indicates the range of index numbers selected For select-multiple, the parameters min and Max in inputvalidator indicate the number of choices
Max Maximum length/value 99999999999 Ditto
OnError Hint of error occurred "Input Error" is not displayed for empty people.
Onerrormin Tips that are smaller than min properties Null Error when the user enters a value that is smaller than the min attribute
Onerrormax A hint larger than the Max property Null Error when the user enters a value that is larger than the Max property
Empty Whether the control text value allows both sides to be empty Both sides allow empty 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 when this error occurs, and if NULL, the OnError property is used to prompt for an error.

CompareValidator:

Property Property name Default value Detailed explanation
Desid To compare the control's ID "" Target ID to compare to the source target
Operateor Compare symbols "=" There are several types: =,! =, >, >=, <, <=
DataType Data type "String" Currently only 2 types are supported: "string", "Number", "datetime", "date"
OnError Hint of error occurred "Input Error" is not displayed for empty people.

Regexvalidator:

Property Property name Default value Detailed explanation
Regexp Regular expressions "" The use of the explicit constructor new RegExp ("pattern" [, "flags"]); Because JavaScript ' \ ' is used as an escape character, it is necessary to use ' \ \ ' instead of ' \ ' when constructing an instance object using the display constructor
Param Additional parameters I G: The delegate can make a global match. I: Represents a case-insensitive match. M: Indicates that multiple lines can be matched. Can be any combination, of course, can not add parameters
DataType Data type "String" "string": An expression written by itself, "enum": the enumeration name. For details, see demo3.htm You can modify and add the enumeration project name and expression in Formvalidatorregex.js.
OnError Hint of error occurred "Input Error" is not displayed for empty people.

Ajaxvalidator: Almost all properties are the same as those for $.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 The URL address to send to ""
DataType The data type returned "HTML" XML, HTML, script, JSON
Data Data ""
Async Whether to send in an asynchronous manner True
Success function that is called when the request succeeds Null
ProcessData Automatically processes the returned data as a string True By default, data is processed and converted to a single query string if it is an object instead of a string.
Complete function that is called when the request completes Null
Beforesend function to be called before request Null There is one parameter, the same as the Beforesend parameter in the root $.ajax.
Buttons You click the Submit button (group) jquery Object Null When you trigger an AJAX check, the corresponding button (group) in the buttons is grayed out and waits until the server returns data
Error function that is called when a request fails "Request Failed" You can define this error yourself and automatically play it out in error. is not displayed for empty people.

Functionvalidator

Property Property name Default value Explanation of the return value
Fun External function name () Parameter 1: value of element, parameter 2: Element object Default as a processing procedure
True/false Verify Success/Failure
String Validation failed with return value as custom error
No Processing process
OnError Hint of error occurred "Input Error" When the function return false, the error message is displayed

Public functions: The main is to set the global parameters and determine whether to pass the checksum

Name of function Function description
$.formvalidator.initconfig Parameters: Configuration Type
Property Default value Description
Validatorgroup "1" Which group do you want to configure
Formid "" The form ID number to autoenroll for the Pageisvalid function
Alertmessage False Whether to pop-up windows
Autotip False Whether to build the cue layer automatically
Errorfocus True When an error occurs, the first error control gets the focus
Forcevalid True Whether to leave the focus until you have entered it correctly
Wideword True Whether to treat a full-width character as 2 lengths
Onsuccess Null The group verifies the passed callback function, returns FALSE, and blocks the submission of the form
Submitonce False After the check passes, whether to gray out all the Submit button
OnError Null This group checks for a failed callback function with two parameters
Parameter 1 A checksum error message that is not passed
Parameter 2 A checksum does not pass through the element object
Debug False is in debug mode. True: Do not submit form
$.formvalidator.pageisvalid One parameter: not a configuration type
Validatorgroup "1" Which group do you want to validate against
$.formvalidator.isonevalid One parameter: The ID of the table cell that was set for validation at that time. Returns whether the validation of successful information.
$.formvalidator.setfailstate function ("Tipid", "displayed information") in Showword mode, if your additional check does not pass, you can set it to failure information and status
$.formvalidator.getlength The function ("table cell id") checkbox or RadioButton indicates the number of selections (in the same group). For Select-one, select the value of the index to the parameter min in Select-multiple,inputvalidator and Max to indicate the number of selections other input represents the length of the character.
$.formvalidator.retsettipstate function (check group number) to restore the group's prompt content to the OnShow state

JQuery Formvalidator Handbook

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.