jQuery form validation extension (3)_jquery

Before reading this article, you can read the first two articles. Form validation input range validation is rewritten on the original basis.



(1). Problems with input range verification

The problems mentioned in the second article also exist in the original verification Same problem. Of course some of these issues have also been addressed in this rewrite. Validation of radio, checkbox, and select elements has also been added. Of course, the verification of time has not yet been resolved, and will be added in the follow-up process!



(2). Design of verification parameters

onEmptyText: Display text when the input content is empty

onEmptyClass : The style displayed when the input content is empty

onSuccessText: The text displayed when the verification is successful

onSuccessClass: The style displayed when the verification is successful

onErrorText: The text displayed when verification fails

onErrorClass: The style displayed when verification fails

onFocusText: The text displayed when focus is obtained

onFocusClass: When focus is obtained The style displayed when the focus is on

dataType: input data type

min: input minimum value

max: input maximum value

targetId: The element id that displays the prompt message



The rewritten part is to isolate the prompt text and style separately, so that the form verification can be operated more flexibly!

The rewritten article supports three data forms: text, number, and date, and the verification of radio, checkbox, and select has also been updated.

radio, checkbox, select verification only verifies whether it is selected, and the select here is not sensitive to the blur event, so it is better to use the change event here to verify.



(3). Verification range source code analysis

jQuery check input item’s range source code analysis
/**
* onEmptyText: Text displayed when the input content is empty
* onEmptyClass: Display style when the input content is empty
* onSuccessText: Text displayed when the verification is successful
* onSuccessClass: The style displayed when verification is successful
* onErrorText: The text displayed when verification fails
* onErrorClass: The style displayed when verification fails
* onFocusText: The text displayed when focus is obtained
* onFocusClass: The style displayed when focus is obtained
* dataType: Input data type
* min: Input minimum value
* max: Input maximum value
* targetId: Element id to display prompt message
* @param {Object} inputArg
* /
$.fn.extend({
checkRange:function(inputArg){
//Bind focus event
$(this).bind("focus",function(){
var flag=true;
if($(this).is("input") || $(this).is("textarea")){
if($(this).attr(" type")=="radio" || $(this).attr("type")=="checkbox"){
var name=$(this).attr("name");
var items=$('input[@name="" name ""][checked]');
if(items.length>0){
flag=false;
}
}else {
if($(this).val()!=undefined && $(this).val()!=""){
flag=false;
}
}
}else{ //select needs to be improved. Select has no focus event and should be changed to change event

}
if (flag) {
//Display the focused text
addText(inputArg.targetId , inputArg.onFocusText);
//Switch style
addClass(inputArg.targetId, inputArg.onFocusClass);
}
});

//Bind the lost focus event
$(this).bind("blur",function(){
var flag=false;
if($(this).is("input") || $(this).is ("textarea")){
if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox"){
var name=$(this).attr("name");
var items=$('input[@name="" name ""][checked]');
if(items!= undefined && items.length>=inputArg.min && items.lengthflag=true;
}
}else{
var value=$(this).val( );
if (value == undefined || value == "") {
//Display the focused text
addText(inputArg.targetId,inputArg.onEmptyText);
//Switch style
addClass(inputArg.targetId,inputArg.onEmptyClass);
}else {
switch (inputArg.dataType) {
case "text":
if(value.length < inputArg. min || value.length >= inputArg.max){
flag=false;
}else{
flag=true;
}
break;
case "number" :
if (isNaN(value)) {
flag = false;
}
else {
if (value < inputArg.min || value >= inputArg.max) {
flag = false;
}
else {
flag = true;
}
}
break;
case "date":
break;
}
}
}
}else{ //select

}
if(flag){
//Display the focused text
addText(inputArg .targetId, inputArg.onSuccessText);
//Switch style
addClass(inputArg.targetId, inputArg.onSuccessClass);
}else{
//Display the focused text
addText(inputArg .targetId, inputArg.onErrorText);
//Switch style
addClass(inputArg.targetId, inputArg.onErrorClass);
}
});

//select selection box Select event
if ($(this).is("select")) {
$(this).bind("change", function(){
var items=$(this).find ("option:selected");
if(items!=undefined && items.length>=inputArg.min && items.length//Display the focused text
addText( inputArg.targetId, inputArg.onSuccessText);
//Switch style
addClass(inputArg.targetId, inputArg.onSuccessClass);
}else{
//Display the focused text
addText( inputArg.targetId, inputArg.onErrorText);
//Switch style
addClass(inputArg.targetId, inputArg.onErrorClass);
}
});
}
}
});


What is more important here is the verification of the select element. Select can select multiple selected items. radio, checkbox, and select only verify the selection length, but not text and date. This is an important part of this article. The source code has also been refactored, and many common parts have been extracted, greatly reducing the amount of code. At the same time, some methods in the jQuery form validation extension (2) have also been used.



(4). Extracted common code analysis

Public methods in the second article
/**
* Determine based on the different types of input boxes
* @param {Object} flag
* @param {Object} inputArg
* /
function addMessage(flag,inputArg){
if(flag){
//Display the correct message text
addText(inputArg.targetId,inputArg.onSuccessText);
//Switch style
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//Display error message text
addText(inputArg.targetId,inputArg.onErrorText);
//Switch style
addClass(inputArg.targetId,inputArg.onErrorClass);
}
}
/**
* Add displayed text information to the target control
* @param {Object} targetId target control id
* @param {Object} text text information to be displayed
*/
function addText(targetId,text){
if(text ==undefined){
text="";
}
$("#" targetId).html(" " " text);
}
/**
* Switch style
* @param {Object} targetId target control id
* @param {Object} className Displayed style name
*/
function addClass(targetId,className){
if(className!=undefined && className!=""){
$("#" targetId).removeClass();
$("# " targetId).addClass(className);
}
}


This code is mainly used to add text prompts and style issues.

Verification code for select element
//select selection box selection event
if ($(this).is("select")) {
$(this).bind( "change", function(){
var items=$(this).find("option:selected");
if(items!=undefined && items.length>=inputArg.min && items.length< ;inputArg.max){
//Display the focused text
addText(inputArg.targetId, inputArg.onSuccessText);
//Switch style
addClass(inputArg.targetId, inputArg.onSuccessClass);
}else{
//Display the focused text
addText(inputArg.targetId, inputArg.onErrorText);
//Switch style
addClass(inputArg.targetId, inputArg.onErrorClass);
}
});
}


This code is used to verify the select box element and supports multiple selection verification.



(5). Verification usage example

Text box input verification

When the length of the input content does not match

Prompt that the entered string meets the current requirements

Validate when no text is entered

Verification of numbers

Get focus prompt question

The entered number does not meet the range

Verification successful

Verification for checkbox

One of the checkbox groups gets focus

Choose to satisfy the data

Select more than the quantity

For select multiple choice

Too many choices

Verification successful
(6). Verification test code

Copy code The code is as follows:

姓名:

年龄:

描述:

密码1:

密码2:

性别:

男    
女

爱好:

aa    
bb   
aa    
bb   

地区:


00000
11111
22222
33333
44444

以上是测试的部分代码 ，不过基本可以说明这个方法的的使用方式。
这里不多写了，后续不断更新......