jQuery form validation extension code (2)_jquery

1. Existing problems
As I mentioned in the previous article, the verification prompt intends to display the prompt message in two ways: text and style. Both of these prompts can only be used alone, so Some extensions have been made to the new and new content so that both can be used together. The verification of required fields written in the previous article only applies to the two form elements Text and TextArea. In the new extension, the two elements radio and checkbox are also supported.

2. Design of verification parameters
Based on the consideration of multiple selections, some necessary parameters have been expanded. The parameter list is as follows:
required: Whether it is required, true and false, true represents a required item (*)
onFocusText: text prompt to obtain focus
onFocusClass: style after obtaining focus
onErrorText: text prompt for verification error
onErrorClass: verification error Style prompt
onSuccessText: Verification success text prompt
onSuccessClass: Verification success style prompt
targetId: The ID number of the prompt information element

has been modified compared to the previous one. I have seen it As you will know from previous articles, I separated styles and text separately, before they were mixed together. This is also a step considered for expansion needs. Then changed the name of the error message prompt parameter.

3. Source code analysis
jQuery form validation extension’s verification whether it is a required item source code

Copy code The code is as follows:

$.fn.extend({
checkRequired:function(inputArg){
//Only required fields will be verified, non- Required items are meaningless
if(inputArg.required){
//Verify whether it is an input box form
if($(this).is("input") || $(this).is ("textarea")){
//Get the focus prompt
$(this).bind("focus",function(){
//If the text exists, do not replace the prompt style
if ($(this).val() != undefined && $(this).val() != "") {
//Display the correct information text
addText(inputArg.targetId,inputArg.onSuccessText);
//Switch style
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//Display the focus text
addText(inputArg.targetId,inputArg.onFocusText);
//Switch style
addClass(inputArg.targetId,inputArg.onFocusClass);
}
});
//Lost focus prompt
$(this).bind(" blur",function(){
if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox"){
var name=$(this).attr("name");
var items=$('input[@name="" name ""][checked]');
if(items.length> ;0){
addMessage(true,inputArg);
}else{
addMessage(false,inputArg);
}
}else{
if($(this). val()!=undefined && $(this).val()!=""){
addMessage(true,inputArg);
}else{
addMessage(false,inputArg);
}
}
});
}
}
}
});
/**
* Determine based on the different types of input boxes
* @param {Object} flag
* @param {Object} inputArg
*/
function addMessage(flag,inputArg) {
if(flag){
//Display the correct information 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);
}
}

Everyone who has used jQuery knows that jQuery is a very easy-to-extend framework, which provides functions for extending the core library. This form validation is extended based on this extension function.
Some code reusability issues are also considered here, and common code is separated, which greatly reduces the final code.
jQuery form validation extension required common method extraction

Copy code The code is as follows:

/**
* 根据输入框的不同类型来判断
* @param {Object} flag
* @param {Object} inputArg
*/
function addMessage(flag,inputArg){
if(flag){
//显示正确信息文本
addText(inputArg.targetId,inputArg.onSuccessText);
//切换样式
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//显示错误信息文本
addText(inputArg.targetId,inputArg.onErrorText);
//切换样式
addClass(inputArg.targetId,inputArg.onErrorClass);
}
}
/**
* 给目标控件添加显示的文本信息
* @param {Object} targetId 目标控件id
* @param {Object} text 需要显示的文本信息
*/
function addText(targetId,text){
if(text==undefined){
text="";
}
$("#"+targetId).html("        "+text);
}
/**
* 切换样式
* @param {Object} targetId 目标控件id
* @param {Object} className 显示的样式名称
*/
function addClass(targetId,className){
if(className!=undefined && className!=""){
$("#"+targetId).removeClass();
$("#"+targetId).addClass(className);
}
}
/code]
每次不同的验证都会涉及到 添加文本消息，表单元素的不同添加文本消息，和样式的替换，于是分离出来上面三个公用方法。
在源码中 if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox") 这句是比较重要的一句，因为它涉及到了验证元素的扩展。

四. 使用例子

文本框测试样图

 输入文本框获得焦点提示

 输入文本框失去焦点错误提示

 输入文本验证正确提示

 

radio 测试样图

  

checkbox 测试样图

  checkbox 验证失败提示

 체크박스 验证成功提示
测试代码
[코드]

이름:

성별:

男    
女

爱好:

aa    
bb   
aa    
bb   

这里不多说了,文章持续更新中!有问题进一步做修改中......