Form Validation Component ValidForm

Last Update:2015-01-07 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

10.1 Get started 1, introduce CSS Please check the download file Style.css, the inside ValidForm must be copied into your CSS (the note in the document "/*========== the following section is ValidForm must ===========*/ "The next part is necessary." (previously found that some netizens put the whole style.css in the page, and then found that the style conflict) 2, the introduction of JS (jquery 1.4.2 or more versions are available)

3. Binding attached properties to form elements that need to be validated

4, initialization, it's so simple

Note:

1, ValidForm has non-compression, compression and NCR three versions to provide download, NCR is a universal version, when you page due to coding problems, the hint text garbled when you can use this version;

2, ValidForm does not qualify must use the table structure, it can apply to any structure, needs to define the good position relations in the TipType.

10.2 Binding Attached Properties

All elements that want to validate the format need to be bound to the DataType property, and the datatype optional value is built with 10 classes to specify different validation formats.

If your verification needs are not yet available, you can pass in custom datatype, and custom datatype is a very powerful feature that can meet any of your needs.

Additional properties that can be bound are: datatype, nullmsg, sucmsg, errormsg, ignore, recheck, Tip, Altercss, Ajaxurl, and plugin.

The binding method is as follows:

Description

The built-in basic datatype types are: * | *6-16 | n | n6-16 | s | s6-18 | P | m | e | Url

*: Detect whether there is input, you can enter any character, do not leave blank to pass verification;

* 6-16: Detects whether it is 6 to 16 bits of any character;

N: Number type;

N6-16:6 to 16 digits;

S: String type;

S6-18:6 to 18-bit string;

P: Verify whether it is a postal code;

M: mobile phone number format;

E:email format;

URL: Verifies whether the string is a URL.

The name of the custom datatype, which can consist of letters, numbers, underscores, dashes, and * numbers.

Datatype,validform, such as "*6-16", can be automatically extended to specify any range of values. If the built-in basic type has "*6-16", then you bind datatype= "*4-12" to represent 4 to 12 characters of any character. If you customize a datatype= "Zh2-4" that represents 2 to 4-bit Chinese characters, then datatype= "Zh2-6" represents 2 to 6-bit Chinese characters.

After version 5.2, datatype supports rule accumulation or single selection. Use "," to separate the rule accumulation; A delimited representation rule is multiple, that is, as long as one of the rules can be verified, the binding rules will be validated in turn, as long as the validation passes, the subsequent rules will ignore no longer compared. such as binding datatype= "m|e", means that both can fill in the mobile phone number, can also fill in the email address, if you know the number is filled in the mobile phone, then will not be detected that he is not an e-mail address; datatype= "Zh,s2-4", to conform to the custom type "zh", but also to conform to the rules " S2-4 ".

Note:

After the 5.2.1 version, datatype supports:

Direct binding Regular: if it is possible to write datatype= "/\w{3,6}/i", the requirement is 3 to 6 letters, not case-sensitive;

Supports simple logic operations such as datatype= "M | E, *4-18 | /\w{3,6}/i | /^validform\.rjboy\.cn$/",

This expression means: can be a mobile phone number, or an email address, but the character length must be 4 to 18 bits, or 3 to 6 letters, not case-sensitive, or input validform.rjboy.cn, case-sensitive. Here "," separates the equivalent of "&&" in the logical operation; Separating "| |" In the same logical operation ; bracket arithmetic is not supported.

Nullmsg

When the form element value is empty, the prompt message is not bound, the default prompt "Please fill in the information!" "。

such as: nullmsg= "Please fill in the User name!" "

Beginning with version 5.3, for objects without binding nullmsg, the text under Class Validform_label is automatically found as the hint text:

Such an HTML structure:

<span class= "Validform_label" >* User name: </span><inputtype= "text" val= "" datatype= "s"/>

When the text box does not enter the error message will be: "Please enter the user name!" "

The positional relationship between Validform_label and input here is not necessarily a sibling relationship, but it is also found in the child of the sibling, the sibling of the parent, and the child of the sibling of the parent at the same level.

Sucmsg 5.3+

When the form element passes validation when the message is not bound, the default prompt is "authenticated by information!" "。

such as: sucmsg= "user name has not been used, you can register! "

Starting with version 5.3, you can also return the successful prompt text in the JSON data returned in real-time validation, and see the introduction to the attached properties Ajaxurl.

ErrorMsg

The input cannot be verified by the prompt message, the default prompt "Please enter the correct information!" "。

such as: errormsg= "username must be 2 to 4 characters Chinese character! "

Beginning with version 5.3, ValidForm can output corresponding error message according to the datatype intelligence that you bind, see tipmsg

Ignore

A form element that is bound to ignore= "ignore" that, when entered, verifies that the data being filled conforms to the data type specified by datatype.

Validation is ignored when the content is not filled in;

Recheck

The form often needs to check two times the password input is consistent, recheck is used to specify the need to compare another form element.
such as: recheck= "Password1", then it will take the value of the current element with the form, name "Password1" of the element comparison.

Tip

Often some text boxes in the form need to display a gray hint text by default, the prompt text disappears when the focus is obtained, and the prompt text is displayed when the focus is lost. The tip attribute is used to achieve this effect. It is usually used in conjunction with the ALTERCSS.

such as <input type= "text" value= "Default prompt text" class= "Gray intxt" tip= "Default prompt text" altercss= "Gray"/>

Altercss

It needs to be used in conjunction with the Tip property, altercss the specified style name, which is deleted when the text box has the focus, and is added when there is no input and loses focus.

Ajaxurl

Specifies the address of the background file for Ajax real-time authentication.

Background pages such as the valid.php file can be used $_post["param"] to receive values, Ajax will POST over the variable param and name. Param is the value of the text box, and name is the Name property of the text box.

Starting with version 5.2, you can bind parameters after ajaxurl the specified URL, such as:

Ajaxurl= "Valid.php?myparam1=value1&myparam2=value2";

In versions prior to 5.3, the file output characters are displayed as error messages on the page if validation is done by requiring the output lowercase letter "Y".

In version 5.3, the return data for real-time verification has been adjusted to be JSON data with status values! Consistent with the AJAX return data format in callback, it is recommended that you no longer return the string "Y" or "n". Data in both formats is now compatible.

Note:

If the Ajax check passes, the Validform_valid value of true is bound to the element. You can set this value to control the validation can pass, such as verification code verification, after the first pass, accidentally right click on the next Captcha image, the verification code changed, but still indicate that the object has passed the validation, you can manually adjust the value: $ ("#name") [0].validform_ Valid= "false".

How to set the parameters of Ajax, you can see the ValidForm object's Config method.

Plugin

Specifies the plug-in you want to use.

Beginning with version 5.3, for the date, swfupload and password strength detection of the three plug-ins, binding the Plugin property can initialize the corresponding plug-in, you can not pass the ValidForm initialization of the empty useplugin.

For example, if you want to use the date plug-in, the prior version 5.3 requires this initialization:

$ (". Demoform"). ValidForm ({

useplugin:{

datepicker:{}

}

});

Starting with version 5.3, you do not need to pass in these empty objects, just bind the plugin= "DatePicker" on the form element and initialize it directly:

$ (". Demoform"). ValidForm ();

10.3 Initialization parameter Description all the available parameters are as follows:

$ (". Demoform"). ValidForm ({
Btnsubmit: "#btn_sub",
Btnreset: ". Btn_reset",
Tiptype:1,
Ignorehidden:false,
Dragonfly:false,
Tipsweep:true,
Showallerror:false,
Postonce:true,
Ajaxpost:true,
datatype:{
"*6-20":/^[^\s]{6,20}$/,
"Z2-4":/^[\u4e00-\u9fa5\uf900-\ufa2d]{2,4}$/,
"Username":function(GETS,OBJ,CURFORM,REGXP) {
//Parameter gets is the form element value obtained, obj is the current form element, Curform is the currently validated form, and REGXP is a reference to some of the built-in regular expressions;
varreg1=/^[\w\.] {4,16}$/,
Reg2=/^[\u4e00-\u9fa5\uf900-\ufa2d]{2,8}$/;

if(Reg1.test (gets)) {returntrue;}
if(Reg2.test (gets)) {returntrue;}
Returnfalse;

//Note return can return TRUE or False or string literal, true means validation passed, return string indicates validation failed, string is displayed as Error prompt, return false is ErrMsg or default error prompt;
},
"Phone":function(){
///5.0 version, to achieve two of the verification effect, datatype name does not need to start with "Option_";
}
},
useplugin:{
swfupload:{},
datepicker:{},
passwordstrength:{},
jqtransform:{
Selector: "Select,input"
}
},
Beforecheck:function(Curform) {
The curform parameter is the current form object that executes before the form is committed to perform validation.
This will not proceed with the validation operation if the return is explicitly false.
},
Beforesubmit:function(Curform) {
//after validation succeeds, the function that is executed before the form commits, the Curform parameter is the current form object.
The form will not be submitted if it is explicitly return false;
},
Callbackfunction(data) {
The data returned is in JSON format {"Info": "Demo info", "status": "Y"}
Info: output prompt information;
Status: Returns the state of the submission data and whether the submission was successful. If you can use "Y" to indicate the success of the submission, "n" means that the commit failed, in the ajax_post.php file return data in the custom character, mainly used in the callback function according to this value to perform the corresponding callback operation;
You can also return more information in the ajax_post.php file here to get the appropriate action;
When Ajax encounters a service-side error, it also executes a callback, when the data is {status:**, statustext:**, readystate:**, responsetext:**};

The callback operation is performed here;
Note: If the form is not submitted by Ajax, the data parameter is the current form object, the callback function executes after the form is validated, and then determines whether to submit the form, and if the callback explicitly return false, the form will not be submitted. If return is true or no return is present, the form is submitted.
}
});

Parameter description: "All parameters are optional"

Must be a form object to execute the ValidForm method, in the example ". Demoform" is the class name that is bound to the form element;

Btnsubmit

Specifies which button under the current form touches the post submission event, which can be omitted if there is a Submit button under the form. In the example, ". Btn_sub" is the button under the form to bind a point-to-submit form event;

Btnreset

". Btn_reset" is the button under the form to bind a fixed point to reset the form event;

TipType

The available values are: 1, 2, 3, 4, and function functions, with the default TipType of 1. (3, 4 is 5.2.1 version added)

1=> a custom popup prompt;

2=> side hint (the object that displays the cue information will be found at the child of the next object in the parent of the current element, and the form will bounce out of the definition prompt when Ajax is submitted to show the form submission status);

3=> side hints (the object in the current element's siblings object that displays the cue information, the form will bounce out of the definition prompt when Ajax is submitted to show the status of form submission);

4=> side hints (the object that displays the cue information is found under the next object in the parent of the current element, and the form does not show the submission status of the form when it is submitted as Ajax);

If the 4 tips above are not what you need, you can pass in a custom function to TipType. With custom functions, you can achieve any hint you want:

Tiptype:function (MSG,O,CSSCTL) {

msg: prompt information;

o:{obj:*,type:*,curform:*},

Obj points to the currently validated form element (or Form object, verifies that all validation passes, o.obj the form object when the form is submitted),

The type indicates the state of the hint, with a value of 1, 2, 3, 4, 1: detecting/Submitting data, 2: Validating, 3: Validation failed, 4: Prompt ignore status,

Curform is the current form object;

Cssctl: The built-in hint information style control function, which needs to pass in two parameters: the object that displays the cue information and the state of the current prompt (the type in the parameter O);

}

See the Demo page for details.

TipType is not 1 o'clock, ValidForm will look for a label with the class "Validform_checktip" to display the prompt information. When Tiptype=1, a popup is automatically created to display the prompt message.

The position relationship between the validform_checktip and the form element will have a corresponding structure according to the TipType value, which is explained above.

Starting with version 5.3, if the page does not have a label showing the error message, the Validform_checktip object is automatically created based on the TipType value.

Ignorehidden