jQuery form validation extension code (1)_jquery

Let me reiterate, there are many plug-in problems, and we will solve them one by one later. Please don't make bad remarks. I hope you can give me lots of good suggestions and words.
1. Analyze the basic situation of form verification
In the process of web development, we will encounter various verifications. To sum up, it can be basically divided into the following categories:
(1). Whether the item is required [this is very basic]
(2). Range verification in the input parameters
(3). Input Comparison of the parameter and the value of another control
(4). Regular expression verification of the input parameter
2. Verification of required fields
There are the following situations:
(1) The input box gets the focus prompt
(2) The input box loses focus and the verification error prompts
(3) The input box loses the focus and the verification prompts correctly
First, determine whether the input box is required, and then the prompt The actual location of the message.
Determine the following parameters based on the above situations:
required: whether it is a required item, true and false, true means it is a required item (*)
onFocus: text prompt to get focus (if If you specify a style, add @ before the style name, so the first letter of the text prompt cannot contain @)
onBlur: Text prompt that loses focus (if you specify a style, add @ before the style name, so the first letter of the text prompt cannot contain @) (Verification Failure prompt)
onSucces: Text prompt for successful verification (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @)
tipId: Control id used to display prompt information (*)
Combination example: {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId:"tipid"}
Note: Some of the rules defined above may not be implemented , gradually improved in the later process.

Copy code The code is as follows:

/**
* Check whether the input box is required
* Input parameters:
* required: Whether it is required, true and false, true means required (*)
* onFocus: Text prompts that gain focus (if a style is specified, @ is added before the style name, so the first letter of the text prompt cannot contain @)
* onBlur: text prompts that lose focus (if a style is specified, @ is added before the style name, so the text prompts The first letter cannot have @) (verification failure prompt)
* onSucces: text prompt for successful verification (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @)
* tipId: used Control id (*) for displaying prompt information (*)
* Combination example: {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId:"tipid"}
*/
$ .fn.extend({
checkRequired:function(inputArg){
if(inputArg.required){
if($(this).is("input") || $(this).is ("textarea")){
//Bind the focus event
$(this).bind("focus",function(){
if(inputArg.onFocus!=undefined){
$("#" inputArg.tipId).html(inputArg.onFocus);
}
});
//Bind the lost focus event
$(this).bind("blur ",function(){
if($(this).val()!=undefined && $(this).val()!=""){
$("#" inputArg.tipId). html(inputArg.onSucces);
}else{
$("#" inputArg.tipId).html(inputArg.onBlur);
}
});
}
}
}
});

Usage effect and test code:

When the focus is obtained, the following prompt effect

There is no input prompt effect when losing focus

When the text message is entered, the success effect will be prompted

The test code is as follows:

Copy code The code is as follows:

3. Range verification in input parameters

Compared with the above verification, this is a little more complicated because there is a range of input values. The verification makes the following distinctions: the input data type is string, number, time

If it is a string, compare the length of the string, and compare the number and time. (The time is not perfect yet)

Because of the comparison range, an interval range is defined, so two more attributes are added here, the lower limit value and the upper limit value.

Input parameter list:

onFocus: Text prompt to obtain focus (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @)

onEmpty : The input item is an empty text prompt (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @)

onSucces: Text prompt for successful verification (if a style is specified, add @ before the style name, Therefore, the first letter of the text prompt cannot have @)

onBlur: Text prompt that has lost focus (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @) (validation failure prompt)

dataType: data type parameters (text, number, date)

min: the minimum value entered

max: the maximum value entered

tipId: used for display Control id of prompt information (*)

Copy code The code is as follows:

/**
* Check the scope of the input item
* Input parameters:
* onFocus: text prompt to obtain focus (if a style is specified, add @ in front of the style name, so the first letter of the text prompt cannot have @)
* onEmpty: text prompt when the input item is empty (if a style is specified, @ is added before the style name, so the first letter of the text prompt cannot have @)
* onSucces: text prompt when verification is successful (if a style is specified, @ is added before the style name, Therefore, the first letter of the text prompt cannot have @)
* onBlur: Text prompt that has lost focus (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @) (validation failure prompt)
* dataType : Data type parameters (text, number, date)
* min : The minimum value entered
* max : The maximum value entered
* tipId : Control id used to display prompt information (*)
*
*/
$.fn.extend({
checkRange:function(inputArg){
if ($(this).is("input") || $(this).is(" textarea")) {
//Get focus binding
$(this).bind("focus",function(){
if(inputArg.onFocus!=undefined){
$( "#" inputArg.tipId).html(inputArg.onFocus);
}
});
//Lost focus binding
$(this).bind("blur",function( ){
if($(this).val()==undefined || $(this).val()==""){
$("#" inputArg.tipId).html(inputArg .onEmpty);
}else{
switch(inputArg.dataType){
case "text":
if($(this).val().length>= parseInt(inputArg.min ) && $(this).val().length< parseInt(inputArg.max)){
$("#" inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
case "number":
if(!isNaN($(this).val() )){
if(parseInt($(this).val())>parseInt(inputArg.min) && parseInt($(this).val())$("#" inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" inputArg.tipId).html(inputArg.onBlur);
}
}
break;
case "date":
break;
}
}
});
}
}
});

Input range effect and test code

If age is agreed to be a number

The input is not within the agreed range

Verification successful

Copy code The code is as follows:

$("#txtAge").checkRange({
onFocus: "Age is a number",
onEmpty: "Cannot be empty",
onSucces: "Verification successful",
onBlur :"Verification failed, please enter carefully",
dataType: "number",
min: "10",
max: "100",
tipId: "txtAgeTip"
}) ;

Age:

4. Comparison of the input parameter and the value of another control

The difference from the above verification comparison is that you need to specify the id of the comparison control

The following is Input parameters:

onFocus: Text prompt to obtain focus (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @)

onEmpty: Text prompt for an empty input item ( If a style is specified, @ is added before the style name, so the first letter of the text prompt cannot contain @)

onSucces: Text prompt for successful verification (if a style is specified, @ is added before the style name, so the first letter of the text prompt cannot be @)

onBlur: text prompt that loses focus (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @) (validation failure prompt)

dataType: data type Parameters (text, number, date)

comType: comparison type (=,>,>=,<,<=,!=)

tipId: used for display Prompt information control id (*)

targetId: comparison target control Id

Copy code The code is as follows:

/**
* Comparison between control values
* Input parameters:
* onFocus: text prompt to obtain focus (if a style is specified, add @ in front of the style name, so the first letter of the text prompt cannot have @)
* onEmpty: text prompt when the input item is empty (if a style is specified, @ is added before the style name, so the first letter of the text prompt cannot have @)
* onSucces: text prompt when verification is successful (if a style is specified, @ is added before the style name) , so the first letter of the text prompt cannot have @)
* onBlur: text prompt that has lost focus (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @) (validation failure prompt)
* dataType: data type parameters (text, number, date)
* comType: comparison type (=,>,>=,<,<=,!=)
* tipId: used for display Control id of prompt information (*)
* targetId: Comparison target control Id
*/
$.fn.extend({
checkCompare:function(inputArg){
if($(this). is("input") || $(this).is("textarea")){
//Get focus binding
$(this).bind("focus",function(){
if(inputArg.onFocus!=undefined){
$("#" inputArg.tipId).html(inputArg.onFocus);
}
});
//Lost focus binding
$(this).bind("blur",function(){
var targetValue=$("#" inputArg.targetId).val();
if(targetValue!=undefined && targetValue! =null){
if($(this).val()!=undefined && $(this).val()!=""){
if(inputArg.dataType=="text"){
switch(inputArg.comType){
case "=":
if(targetValue==$(this).val()){
$("#" inputArg.tipId).html (inputArg.onSucces);
}else{
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
case "!=":
if(targetValue!=$(this).val()){
$("#" inputArg.tipId).html(inputArg.onSucces);
}else{
$(" #" inputArg.tipId).html(inputArg.onBlur);
}
break;
}
}else if(inputArg.dataType=="number"){
if (isNaN (targetValue) == false && isNaN($(this).val()) == false) {
switch (inputArg.comType) {
case "=":
if (targetValue == $ (this).val()) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId) .html(inputArg.onBlur);
}
break;
case "!=":
if (targetValue != $(this).val()) {
$(" #" inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
case ">":
if ($(this).val() > targetValue) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
case ">=":
if ($(this).val() >= targetValue) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$( "#" inputArg.tipId).html(inputArg.onBlur);
}
break;
case "<":
if ($(this).val() < targetValue) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
case "<=":
if ($(this).val() <= targetValue) {
$("#" inputArg.tipId) .html(inputArg.onSucces);
}
else {
$("#" inputArg.tipId).html(inputArg.onBlur);
}
break;
}
}else{
$("#" inputArg.tipId).html(inputArg.onBlur);
}
}else if(inputArg.dataType=="date"){
}
}else{
$("#" inputArg.tipId).html(inputArg.onEmpty);
}
}
});
}
}
});

Comparison effect and test code between control values

Rendering 1

Rendering 2

 
Rendering 3

Copy code The code is as follows:

$("#txtPass2").checkCompare({
onFocus: "Compare with the previous one",
onEmpty: "The input cannot be empty",
onSucces: "Verification successful ",
onBlur:"Verification failed",
dataType:"number",
comType:">=",
tipId:"txtPass2Tip",
targetId:"txtPass1"
});

Password 1:

Password 2:

5. Input Parameter regular expression verification

This verification is relatively simple, because using regular expressions, you don’t need to think about the input situation yourself. You only need to introduce a regular expression

The following are the input parameters:

onFocus: text prompt to obtain focus (if you specify a style, add @ before the style name, so the first letter of the text prompt There cannot be @)

onEmpty: The input item is an empty text prompt (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @)

onSucces: Text prompt for successful verification (If you specify a style, add @ before the style name, so the first letter of the text prompt cannot be @)

onBlur: Text prompt that loses focus (If you specify a style, add @ before the style name, so the first letter of the text prompt cannot be There is @) (validation failure prompt)

regExp: regular expression

tipId: control id used to display prompt information (*)

jQuery regular expression verification

Copy code The code is as follows:

/**
* Validation of regular expressions
* Input parameters:
* onFocus: text prompt to obtain focus (if a style is specified, add @ in front of the style name, so the first letter of the text prompt cannot have @)
* onEmpty: text prompt when the input item is empty (if a style is specified, @ is added before the style name, so the first letter of the text prompt cannot have @)
* onSucces: text prompt when verification is successful (if a style is specified, @ is added before the style name, Therefore, the first letter of the text prompt cannot have @)
* onBlur: Text prompt that has lost focus (if a style is specified, add @ before the style name, so the first letter of the text prompt cannot have @) (validation failure prompt)
* regExp : Regular expression
* tipId : Control id used to display tip information (*)
*/

$.fn.extend({
checkRegExp:function(inputArg){
if ($(this).is("input") || $(this).is("textarea")) {
//Get focus binding
$(this).bind("focus", function(){
if (inputArg.onFocus != undefined) {
$("#" inputArg. tipId).html(inputArg.onFocus);
}
});

//Get the lost focus event
$(this).bind("blur",function(){
if($(this).val()!=undefined && $(this).val()!=""){
if ($(this).val().match(inputArg.regExp ) == null) {
$("#" inputArg.tipId).html(inputArg.onSucces);
}else{
$("#" inputArg.tipId).html(inputArg.onBlur );
}
}else{
$("#" inputArg.tipId).html(inputArg.onEmpty);
}
});
}
}
});

Regular expression effects and test code

Enter non-digits

Enter the number

Copy the code The code is as follows:

$("#txtAge").checkRegExp({
onFocus: "Age must be a number",
onEmpty: "The input cannot be empty",
onSucces: "Verification successful ",
onBlur:"Verification failed",
regExp:/D/,
tipId:"txtAgeTip"
});
Age:< ;input type="text" id="txtAge" value=""/>

This is a basic verification plug-in The prototype, we will continue to update in the later stage...

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn