jQuery form validation plug-in formValidator (improved version)_jquery

Usage of enumeration objects:

Copy code The code is as follows:

//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;
}
}

Copy code The code is as follows:

//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:

Copy code The 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:

Copy the code The code is as follows:

您好，欢迎来到山水檀溪！
退出

进入楼盘首页

• 
  
  楼盘管理
  


• 
  
  购房意向
  


• 
  
  用户建议
  


• 
  
  修改密码
  


• 
  
  域名设置
  


• 
  
  在线问答
  

• 
  楼盘信息
  


• 
  栋号信息
  


• 
  户型信息
  


• 
  套房信息
  


• 
  客服管理
  


• 
  楼盘动态
  


• 
  楼盘进度
  


• 
  预售许可证
  


• 
  楼盘图库
  

添加栋号 >> 第一步

楼盘名称：


山水檀溪

* 栋号：

* 状态：

待售

期房

现房

尾房

售完

* 用途：

• 
  普通住宅


• 
  单身公寓


• 
  复式


• 
  别墅


• 
  厂房


• 
  写字楼


• 
  商铺


• 
  经济适用房

预售许可证：

[查看内容]

无

title="如不存在此建筑物的预售许可证，可点击添加！">添加

地理位置：

地图标注

* 层数：

楼层说明：

公摊比率：

位置说明：

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

添加栋号 >> 第二步

占地面积：

(单位:平方米)

建筑面积：

(单位:平方米)

电梯型号：



例：东芝

外墙装修：



例：高级面砖和涂料结合

内墙装修：



例：125/250厚加气混凝土砌块

基础：



例：管桩基础

主体结构：



例：框架剪力墙结构

  

添加栋号 >> 第三步

栋号图片：

(最多1张)

  

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