Summary of Validform form validation

In recent projects, form validation was used and Validform_v5.3.2.

Let's first understand some basic parameters:

General form validation method:

Demo:

$(".demoform").Validform({//$(".demoform") specifies which form needs to be verified, the name needs to be added to the form form;
btnSubmit: "#btn_sub", //#btn_sub is the button that binds the click event to submit the form under this form; if the form contains a submit button, this parameter can be omitted;
btnReset: ".btn_reset",//Optional .btn_reset is the button that binds the click event to reset the form under this form;
tiptype:1, //Optional 1=> pop box,2=> side tip (parent.next.find; with default pop),3=> side tip (siblings; with default pop),4=> side tip (siblings; none pop), default is1You can also pass a function to customize the display method of the prompt information (you can achieve any effect you want, please refer to the demo page for details);
ignoreHidden: false,//Optional true | false, default is false, when true, will not perform verification on form elements with :hidden attribute;
dragonfly: false,//Optional true | false, default is false, when true, no verification is performed if the value is empty;
tipSweep: true,//Optional true | false, default is false, only triggers detection when the form is submitted, blur event will not trigger detection (real-time verification will be performed in the background and no detection results will be displayed);
label: ".label",//Optional option selector, when no nullmsg is bound, it searches for the prompt text to be displayed, defaulting to searching for text under ".Validform_label";
showAllError: false,//Optional: true | false, true: all error prompt information will be displayed when the form is submitted, false: stop checking the next element as soon as a validation fails, only display the error information of the current element;
postonce: true, //Optional: whether the form can only be submitted once, true to enable, not filled in by default to close;
ajaxPost: true, //Submit form data using AJAX, default false, the submission address is the address specified by action;
datatype: {//Pass in a custom datatype type, which can be a regular expression or a function (a parameter will be passed in the function);
"*6-20": /^[^\s]{6,20}$/,
"z2-4" : /^[\u4E00-\u9FA5\uf900-\ufa2d]{2,4}$/,
"username": function(gets, obj, curform, regxp) {
//The parameter gets is the value of the form element obtained, obj is the current form element, curform is the current form being validated, and regxp is a reference to some built-in regular expressions;
var reg1=/^[\w\.]{4,16}$/,
reg2=/^[\u4E00-\u9FA5\uf900-\ufa2d]{2,8}$/;
if(reg1.test(gets)){return true;}
if(reg2.test(gets)){return true;}
return false;
//Note that return can return true or false or a string, true means validation passed, return a string means validation failed, the string is displayed as an error message, and return false uses errmsg or the default error message;
}
"phone": function() {
// 5From version 0.0, to implement a two-choice validation effect, the name of the datatype does not need to start with "option_"; 
}
}
usePlugin: {
swfupload: {},
datepicker: {},
passwordstrength: {},
jqtransform: {
selector: "select,input"
}
}
beforeCheck: function(curform){
//Function executed before form submission validation, where curform is the current form object.
//If it is explicitly returned false here, the validation operation will not continue; 
}
beforeSubmit: function(curform){
//Function executed before form submission after validation, where curform is the current form object.
//If it is explicitly returned false, the form will not be submitted; 
}
callback:function(data){
//The returned data data is in json format, {"info":"demo info","status":"y"}
//info: Output prompt information;
//status: Return the status of the submitted data, whether the submission is successful. You can use "y" to indicate successful submission, "n" to indicate submission failure, the custom character returned in the data of the ajax_post.php file is mainly used in the callback function to execute corresponding callback operations;
//You can also return more information in the ajax_post.php file here to perform corresponding operations;
//Ajax encounters server errors and will also execute the callback, at this time, the data is { status:**, statusText:**, readyState:**, responseText:** };
//Here to execute callback operation;
//Note: If the form is not submitted in ajax mode, pass in callback, at this time, the data parameter is the current form object, the callback function will be executed after all form validations pass, then judge whether to submit the form, if return false is explicitly returned in callback, the form will not be submitted, if return true or no return, the form will be submitted.
}
});
Methods and properties of the Validform object:
tipmsg: Custom prompt information, modify the value of this attribute of the Validform object to make different forms on the same page use different prompt text;
dataType: Get some built-in regular expressions;
eq(n): Get the nth element of the Validform object;
ajaxPost(flag,sync,url): Submit the form in ajax mode. If flag is true, skip verification and submit directly, if sync is true, the ajax submission will be synchronous, and if url address is passed, the form will be submitted to this address;
abort(): Terminate the ajax submission;
submitForm(flag,url): Submit the form in the way set by the parameters, if flag is true, skip verification and submit directly, if url address is passed, the form will be submitted to this address;
resetForm(): Reset the form;
resetStatus(): Reset the form submission status. If the postonce parameter is passed, the form status will be set to "posted" after successful submission, and resetting the submission status allows the form to be submitted again;
getStatus(): Get the form submission status, normal: not submitted, posting: submitting, posted: successfully submitted before;
setStatus(status): Sets the form submission status, which can be set to normal, posting, posted three states. If no parameters are passed, the status is set to posting, which allows form validation but cannot be submitted;
ignore(selector): Ignores the validation of the selected objects;
unignore(selector): Re-gets the validation effect for the objects ignored by the ignore method;
addRule(rule): This method of the Validform object can be used to bind validation rules to form elements;
check(bool,selector): Validates the specified object (default validates the entire form). Returns true if it passes, otherwise returns false (for objects bound with real-time validation, returns true when the format is in compliance, without waiting for the ajax return result). If bool is true, only validation is performed without displaying prompt information;
config(setup): This method can be used to modify initialization parameters, specify the form submission address, and set parameters for form ajax and real-time validation ajax;

Below is the link to the demo download address. Those who need it can download it.

Demo Download Address

The above is the summary of Validform form validation introduced by the editor for everyone, hoping it will be helpful to everyone. If you have any questions, please leave a message, and the editor will reply to everyone in time. Here, I also want to express my heartfelt thanks to everyone for their support of the Yanaohao tutorial website!

Declaration: The content of this article is from the Internet, and the copyright belongs to the original author. The content is contributed and uploaded by Internet users spontaneously. This website does not own the copyright, has not been manually edited, and does not assume relevant legal liability. If you find any content suspected of copyright infringement, please send an email to: notice#w3Please report via email to codebox.com (replace # with @ when sending email) and provide relevant evidence. Once verified, this site will immediately delete the content suspected of infringement.