


jQuery form validation plug-in formValidator (improved version)_jquery
Usage of enumeration objects:
//Various verification methods Supported tag types
sustainType: function (elem, setting) {
var srcTag = elem.tagName;
var stype = elem.type;
switch (setting.validatetype) {
case _validTypeEnum.InitValidator:
return true;
case _validTypeEnum.InputValidator:
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA || srcTag == _validTagEnum.SELECT) {
return true;
} else {
return false;
}
case _validTypeEnum.CompareValidator:
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) {
if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) {
return false;
} else {
return true;
}
}
return false ;
case _validTypeEnum.AjaxValidator:
if (stype == _validTagTypeEnum.text || stype == _validTagTypeEnum.textarea || stype == _validTagTypeEnum.file || stype == _validTagTypeEnum.password || stype == _validTagTypeEnum .select_one) {
return true;
} else {
return false;
}
case _validTypeEnum.RegexValidator:
if (srcTag == _validTagEnum.INPUT || srcTag == _validTagEnum.TEXTAREA) {
if (stype == _validTagTypeEnum.checkbox || stype == _validTagTypeEnum.radio) {
return false;
} else {
return true;
}
}
return false;
case _validTypeEnum.FunctionValidator:
return true;
}
}
//Get the length of the specified string
getLength: function (jqObj) {
var elem = _GetDomObj( jqObj);
var sType = elem.type;
var len = 0;
switch (sType) {
case _validTagTypeEnum.text:
case _validTagTypeEnum.hidden:
case _validTagTypeEnum .password:
case _validTagTypeEnum.textarea:
case _validTagTypeEnum.file:
var val = jqObj.val();
var initConfig = $.formValidator.getInitConfig(elem.settings[0]. validatorgroup);
len = initConfig.wideword ? String.getCharLength(val) : val.length;
break;
case _validTagTypeEnum.checkbox:
case _validTagTypeEnum.radio:
len = $ ("input[type='" sType "'][name='" jqObj.attr("name") "']:checked").length;
break;
case _validTagTypeEnum.select_one:
case _validTagTypeEnum.select_multiple:
len = jqObj.children(":selected").length;
break;
}
return len;
}
2. In the original version, the ID of the verification label is passed between each method instead of the object of the verification label. This avoids the need to obtain the object of the verification label based on the ID in each method and improves the code execution speed and performance. .
3. In the original version, the prompt styles for verification success, errors, etc. have limited style names in the plug-in. For example, the error prompt style name is: onError. This will make the artist need to care about the plug-in when using this plug-in. The name of each prompt style in the prompt, and also to avoid duplication or conflict of styles, which is very unpleasant to use. A truly good plug-in should completely separate js and styles (which need to be set by the user) - this is similar to 'loose coupling' in programming, but only in this way can js and styles be dependent on each other and better adapt to the needs of users ! So, I allowed users to configure each prompt style in the plug-in (as an attribute of the parameter object of the method). The main code is as follows:
//Tip style enumeration
var _tipCssEnum =
{
//(ajax) loading processing
loadCss: "loadCss",
//When getting focus Style
focusCss: "focusCss",
//Prompt [for empty prompt] ---If this is not set, use errorCss
noticeCss: "noticeCss",
//Failed or error [for format error, regular expression verification]---must set
errorCss: "errorCss",
//Success---must set
successCss: "successCss",
//Default state---must be set
defaultCss: "defaultCss"
};
initConfig: function (controlOptions) {
var settings =
{
debug: false,/ /Whether it is debugging mode
validatorgroup: "1",//Validation group
alertmessage: false,//Whether the verification prompt pops up directly
validobjectids: "",//Validation object collection
focusvalid: false,
onsuccess: function () { return true; }, //Processing method after successful verification, return true|false (can add form verification or prevent form submission, etc.)
onerror: function () { } ,
filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str); }, //Method to filter input string [can be set]
isformpost: false, //Whether it is a form submission (default: false ——Non-form submission, usually ajax submission, true——form submission)
submitonce: false,//Whether the form is submitted immediately after verification is passed
submitbutton: null,//Submit button id or object
getformdata: null, //function (formdata) { } (after verification is passed) get the input form value - this method will only be called when isformpost=false
//Verification prompt display settings (default: default According to settings)
tipshow: "default",
formid: "", //Verify the id or object of the form
tidymode: false, //Lite mode
errorfocus: true,
wideword : true,
//Validation prompt style setting (global)
tipcss:
{
//(ajax) loading processing
loadCss: "",
//When getting focus Style
focusCss: "",
//Prompt
noticeCss: "",
//Success
successCss: "",
//Failure
errorCss: " ",
//Default state
defaultCss: ""
}
};
controlOptions = controlOptions || {};
controlOptions.tipcss = controlOptions.tipcss || {} ;
//Merge the entire configuration (deep copy)
$.extend(true, settings, controlOptions);
if (!settings.isformpost) {
if (!settings.submitbutton) {
alert("submitbutton cannot be empty! ");
return;
}
_GetJqObj(settings.submitbutton).click(function () {
var pageIsValid = $.formValidator.pageIsValid(settings.validatorgroup);
if ( pageIsValid && _IsFunction(settings.getformdata)) {
var formData = _GetFormData(settings.filterInputStrFun);
settings.getformdata(formData);
}
});
}
settings.tipshow = settings.tipshow || "default";
//If it is streamlined mode, when an error occurs, the first error control will not get focus
if (settings.tidymode) {
settings.errorfocus = false;
}
if (settings.formid) {
_GetNodeById(settings.formid).submit(function () {
//If it is not a form submission, block the form Submit
return settings.isformpost ? $.formValidator.pageIsValid(settings.validatorgroup) : false;
});
}
if (_jQuery_formValidator_initConfig_Array == null) {
_jQuery_formValidator_initConfig_Array = new Array ();
}
_jQuery_formValidator_initConfig_Array.push(settings);
}
//Set tip information
setTipState: function (elem, showCssEnum, showmsg) {
var setting0 = elem .settings[0];
var initConfig = $.formValidator.getInitConfig(setting0.validatorgroup);
if (initConfig.alertmessage && showmsg) {
alert(showmsg);
return
}
var jq_tipObj = setting0.tipJqObj;
var tip_IsNull = Object.isNull(jq_tipObj);
if (!tip_IsNull) {
showmsg = showmsg || "";
if (initConfig .tidymode) {
//Save prompt information
elem.Tooltip = showmsg;
if (showCssEnum != _tipCssEnum.errorCss && showCssEnum != _tipCssEnum.noticeCss)
jq_tipObj.hide();
}
jq_tipObj.removeClass();
//Set tip style
var showClass = setting0.tipcss[showCssEnum];
//If noticeCss is not set, use errorCss
if (String.isNullOrEmpty(showClass) && showCssEnum == _tipCssEnum.noticeCss) {
showCssEnum = _tipCssEnum.errorCss;
showClass = setting0.tipcss[showCssEnum];
}
if (!String.isNullOrEmpty (showClass)) {
//Save the style of the current tip label display (enumeration value)
elem.showcssenum = showCssEnum;
jq_tipObj.addClass(showClass);
}
jq_tipObj. html(showmsg);
}
}
4. Added some properties to the initConfig configuration object to meet more needs and enhance functionality and ease of use, such as:
filterInputStrFun: function (str) { return FilterInputOper.FilterInputStr(str); } , //Method for filtering the input string [can be set] - to meet the need for filtering the input string
Isformpost: false, //Whether it is a form submission (default: false - non-form submission, usually ajax Submit, true - form submission) - to meet the needs of ajax submission and form submission
Getformdata: null, //function (formdata) { } (after verification) get the input form value - only isformpost=false
Tipshow: "default", //Verification prompt display settings (default: default according to settings) - Set the verification prompt label object search method, based on Id or custom jQuery search (find) method.
The usage of the plug-in is as follows:


添加栋号 >> 第一步

id="btnCancel_Step1" type="button" class="jy_fcadminbottom02" value="取 消" />

The above is my introduction to the main improvements of this plug-in. The overall plug-in still maintains the structure and ideas of the original version. What it does is to make the plug-in more readable and usable. I share it today in the hope that there will be More friends can help test it and put forward some opinions or ideas to make this form validation plug-in formValidator more usable (continuous improvement can make it better, and improvement is inseparable from everyone's suggestions)!
Supplement: Need to solve the improved function - verification can support free combination, such as: phone and mobile phone only need to verify one of them to pass. I have tried to achieve this myself, but the effect is not ideal, and I did not think of a better one. Solution, I hope you can help consider it!
Plug-in and Demo download: FromVaild

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

PHP is a very popular programming language, and CodeIgniter4 is a commonly used PHP framework. When developing web applications, using frameworks is very helpful. It can speed up the development process, improve code quality, and reduce maintenance costs. This article will introduce how to use the CodeIgniter4 framework. Installing the CodeIgniter4 framework The CodeIgniter4 framework can be downloaded from the official website (https://codeigniter.com/). Down

Laravel is a popular PHP web development framework that provides many convenient features to speed up the work of developers. Among them, LaravelValidation is a very practical function that can help us easily validate form requests and user-entered data. This article will introduce how to use LaravelValidation to validate form requests. What is LaravelValidationLaravelValidation is La

How to use Flask-WTF to implement form validation Flask-WTF is a Flask extension for handling web form validation. It provides a concise and flexible way to validate user-submitted data. This article will show you how to use the Flask-WTF extension to implement form validation. Install Flask-WTF To use Flask-WTF, you first need to install it. You can use the pip command to install: pipinstallFlask-WTF import the required modules in F

Form validation is a very important link in web application development. It can check the validity of the data before submitting the form data to avoid security vulnerabilities and data errors in the application. Form validation for web applications can be easily implemented using Golang. This article will introduce how to use Golang to implement form validation for web applications. 1. Basic elements of form validation Before introducing how to implement form validation, we need to know what the basic elements of form validation are. Form elements: form elements are

How to use middleware to handle form validation in Laravel, specific code examples are required Introduction: Form validation is a very common task in Laravel. In order to ensure the validity and security of the data entered by users, we usually verify the data submitted in the form. Laravel provides a convenient form validation function and also supports the use of middleware to handle form validation. This article will introduce in detail how to use middleware to handle form validation in Laravel and provide specific code examples.

PHP form validation tips: How to use the filter_input function to verify user input Introduction: When developing web applications, forms are an important tool for interacting with users. Correctly validating user input is one of the key steps to ensure data integrity and security. PHP provides the filter_input function, which can easily verify and filter user input. This article will introduce how to use the filter_input function to verify user input and provide relevant code examples. one,

PHP is a scripting language widely used in web development, and its form validation and filtering are very important parts. When the user submits the form, the data entered by the user needs to be verified and filtered to ensure the security and validity of the data. This article will introduce methods and techniques on how to perform form validation and filtering in PHP. 1. Form validation Form validation refers to checking the data entered by the user to ensure that the data complies with specific rules and requirements. Common form verification includes verification of required fields, email format, and mobile phone number format.

How to use the Hyperf framework for form validation Introduction: With the development of web applications, form validation has become an important part of ensuring the accuracy and security of data. As a high-performance PHP development framework, the Hyperf framework provides powerful form validation functions. This article will introduce how to use the Hyperf framework for form validation and provide specific code examples. 1. Install the Hyperf framework: Use Composer to install: composercreate-proje
