表单验证扩展代码

一. 存在的问题 在上篇中我已经提到过,验证提示打算用文本和样式两种方式来显示提示消息,这两种提示都只能单独使用,于是新的跟新内容做了一些扩展,使得两者可以共用。前一篇写的是否必填项这个验证只是正对 Text, TextArea 这两个表单元素,在新的扩展中同时也支持了radio,checkbox 两个元素。

二. 验证参数的设计 基于多重选择的考虑,扩展了一些有必要的参数,参数列表如下:
required: 是否为必填项,true 和 false ,true 表示为必填项 (*)
onFocusText: 获得焦点的文字提示
onFocusClass: 获得焦点之后的样式
onErrorText: 验证错误的文本提示
onErrorClass: 验证错误的样式提示
onSuccessText: 验证成功文本提示
onSuccessClass: 验证成功的样式提示
targetId: 提示信息元素的id号

相比之前的做了一些修改,看过之前的文章会知道,我将样式和文本单独分离了,之前是混合在一起的。这也是作为扩展需要的一步考虑。然后变更了错误消息提示参数的名称。

三. 源码解析 jQuery 表单验证扩展之验证是否为必填项源码

复制代码 代码如下:

$.fn.extend({
checkRequired:function(inputArg){
//只有必填项才去验证,非必填项无意义
if(inputArg.required){
//验证是否是输入框表单
if($(this).is("input") || $(this).is("textarea")){
//获得焦点提示
$(this).bind("focus",function(){
//如果文本存在则不替换提示样式
if ($(this).val() != undefined && $(this).val() != "") {
//显示正确信息文本
addText(inputArg.targetId,inputArg.onSuccessText);
//切换样式
addClass(inputArg.targetId,inputArg.onSuccessClass);
}else{
//显示获得焦点文本
addText(inputArg.targetId,inputArg.onFocusText);
//切换样式
addClass(inputArg.targetId,inputArg.onFocusClass);
}
});
//失去焦点提示
$(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);
}
}
});
}
}
}
});
/**
* 根据输入框的不同类型来判断
* @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);
}
}

用过jQuery 的都知道,jQuery是一个非常易于扩展的框架,它里面提供了扩展核心库的函数。本表单验证都是基于这个扩展函数来延伸的。
这里还考虑到了一些代码复用性的问题,将共同代码分离,这使得最终的代码大大减少了。
jQuery 表单验证扩展 必填项共同方法提取

复制代码 代码如下:

/**
* 根据输入框的不同类型来判断
* @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") 这句是比较重要的一句,因为它涉及到了验证元素的扩展。

四. 使用例子

文本框测试样图

图片 1 输入文本框获得焦点提示

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

图片 3 输入文本验证正确提示

 

radio 测试样图

 图片 4 

checkbox 测试样图

 图片 5 checkbox 验证失败提示

图片 6 checkbox 验证成功提示
测试代码
[code]
<script language="JavaScript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="JavaScript" src="jquery-extend-1.0.0.js" type="text/javascript"></script>
<script language="JavaScript" type="text/javascript">
$(document).ready(function(){
$("#txtName").checkRequired({
required:true,
onFocusText:"必填项",
onFocusClass:"notice",
onErrorText:"错误提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtNameTip"
});

$("#rdbMan").checkRequired({
required:true,
onFocusText:"必填项",
onFocusClass:"notice",
onErrorText:"错误提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtSexTip"
});
$("#rdbWoman").checkRequired({
required:true,
onFocusText:"必填项",
onFocusClass:"notice",
onErrorText:"错误提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txtSexTip"
});

$("#rdbMan1,#rdbWoman2,#rdbMan3,#rdbWoman4").checkRequired({
required:true,
onFocusText:"必填项",
onFocusClass:"notice",
onErrorText:"错误提示",
onErrorClass:"error",
onSuccessClass:"correct",
targetId:"txthobbyTip"
});
});
</script>

<p>
<label>姓名:</label><input type="text" id="txtName" value=""/><span id="txtNameTip"></span>
</p>

<p>
<label>性别:</label>
<span>
<input id="rdbMan" type="radio" name="sex" value="男" />男    
<input id="rdbWoman" type="radio" name="sex" value="女" />女
</span>
<span id="txtSexTip"></span>
</p>
<p>
<label>爱好:</label>
<span>
<input id="rdbMan1" type="checkbox" name="hobby" value="hobby1" />aa    
<input id="rdbWoman2" type="checkbox" name="hobby" value="hobby2" />bb   
<input id="rdbMan3" type="checkbox" name="hobby" value="hobby3" />aa    
<input id="rdbWoman4" type="checkbox" name="hobby" value="hobby4" />bb   
</span>
<span id="txthobbyTip"></span>
</p>

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

您可能感兴趣的文章:

  • jQuery 表单验证扩展(四)
  • jQuery 表单验证扩展(三)
  • jQuery 表单验证扩展代码(一)
  • jquery validate.js表单验证的基本用法入门
  • jquery表单验证使用插件formValidator
  • 基于Bootstrap+jQuery.validate实现Form表单验证
  • jQuery 表单验证插件formValidation实现个性化错误提示
  • jquery表单验证插件(jquery.validate.js)的3种使用方式
  • jQuery基于xml格式数据实现模糊查询及分页功能的方法
  • jQuery解析XML 详解及方法总结
  • jQuery+ajax读取并解析XML文件的方法
  • jQuery扩展+xml实现表单验证功能的方法

本文由华夏彩票发布于计算机网络,转载请注明出处:表单验证扩展代码

您可能还会对下面的文章感兴趣: