Home > Article > Web Front-end > 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.length
}
}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
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
男
女
aa
bb
aa
bb