jQuery 表单验证扩展(一)

myfortune0937 2014-04-19

展开全文

好长一段时间没有写js代码了，也好长时间没有写文章了。今天刚申请一个2M 的电信宽带，下午闲来无事写了一个基于jQuery的表单验证插件。首先申明这个插件问题比较多，不过觉得这个东西很有必要。后期持续跟新中，先把自己写的插件原型拿出来晒晒！

再次申明，插件问题比较多，后期一个个来解决，请不要恶言相向。希望各位多多提好的建议善言。

一. 分析表单验证的基本情况

在我们做web开发的过程中，会遇到各种各样的验证。归纳一下基本可以分为一下几类:

(1). 是否必填项 [这个是非常基本的]

(2). 输入参数中的范围校验

(3). 输入参数与另外一个控件值的比较

(4). 输入的参数正则表达式验证

二. 是否必填项验证

有如下几种情况: （1）输入框获得焦点提示（2）输入框失去焦点验证错误提示（3）输入框失去焦点验证正确提示

首先确定输入框是否是必填项，然后就是提示消息的现实位置。

根据以上几种情况确定如下几个参数：

required : 是否为必填项，true 和 false ，true 表示为必填项 (*)

onFocus : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

onBlur : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示)

onSucces : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)

tipId : 用于显示提示信息的控件id (*)

组合例子 : {required:true,onFocus:"Required",onBlur:"@error",onSucces:"Success",tipId:"tipid"}

注意: 上面定义的一些规则，有些可能没有实现，在后期过程中逐渐完善。

/**
* 检查输入框是否为必填项
* 输入参数：
* required    : 是否为必填项，true 和 false ，true 表示为必填项 (*)
* onFocus    : 获得焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)
* onBlur    : 失去焦点的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)(验证失败提示)
* onSucces    : 验证成功的文字提示(如果指定样式则在样式名前加 @ ,因此文字提示首字母不能有@)
* tipId    : 用于显示提示信息的控件id (*)
* 组合例子    : {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")){
                //绑定获得焦点事件
                $(this).bind("focus",function(){
                    if(inputArg.onFocus!=undefined){
                        $("#" + inputArg.tipId).html(inputArg.onFocus);
                    }
                });

                //绑定失去焦点事件
                $(this).bind("blur",function(){
                    if($(this).val()!=undefined && $(this).val()!=""){
                        $("#" + inputArg.tipId).html(inputArg.onSucces);
                    }else{
                        $("#" + inputArg.tipId).html(inputArg.onBlur);
                    }
                });
            }
        }
    }
});

使用效果和测试代码：

当获得焦点时候后面提示效果