jQuery 表单验证扩展(五)

2022-08-04 20:19:57

大概在一个月之前，自己尝试着写一个jQuery的表单验证插件，当初的目的并不是为了让这个插件流行起来，只是为了自己学习的需要。由于工作的问题，这个问题一直处于停留的状态。前些天报名参加了那个什么博客大赛，最近未写一篇博客，当然本文也不是了参加什么博客大赛而写，只是作为自己学习的积累。今天抽空重新整理了一下插件中的正则表达式的验证，在此分享一下。希望大家多多指教

文章回顾:

(一) . 存在问题分析

在第一篇文章中粗略的写到了表单验证中的正则表达式验证，这篇文章只是对那个部分的加强。本文添加了样式提示和文本提示共存，和前面三篇的功能点基本相同，同时此文章中也添加了自定义正则表达式和内置正则表达式共存的问题。

(二). 参数介绍

onFocusText:获得焦点提示文字

onFocusClass:获得焦点样式

onEmptyText:当输入项为空显示文字

onEmptyClass:当输入项为空显示样式

onErrorText:验证错误显示文字

onErrorClass:输入验证错误显示样式

onSuccessText:输入成功显示文本

onSuccessClass:输入成功显示样式

regularText: 匹配的正则表达式

regularTarget:比较的目标正则表达(常用正则表达式)

targetId:用于显示提示信息的控件id

这里注意两个参数， regularText 这个用于自定义正则表达式，regularTarget 这个则用于使用内置的正则表达式，其余参数在前几篇文章中都有提到，这里不做过的的讲解。如果有不了解的可以参考前面几篇文章。

(三). 正则表达式验证源码解析

jQuery正则表达式验证源码解析

/**
* onFocusText:获得焦点提示文字
* onFocusClass:获得焦点样式
* onEmptyText:当输入项为空显示文字
* onEmptyClass:当输入项为空显示样式
* onErrorText:验证错误显示文字
* onErrorClass:输入验证错误显示样式
* onSuccessText:输入成功显示文本
* onSuccessClass:输入成功显示样式
* regularText: 匹配的正则表达式
* regularTarget:比较的目标正则表达(常用正则表达式)
* targetId:用于显示提示信息的控件id
* @param {Object} inputArg
*/
var regulars={
    checkNum:/\D/,
    checkDecimal:/^-?\d+(\.\d+)?$/g,
    checkInteger:/^[-+]?\d*$/,
    checkEmail:/[A-Za-z0-9_-]+[@](\S*)(net|com|cn|org|cc|tv|[0-9]{1,3})(\S*)/g,
    checkTelephone:/^(([0\+]\d{2,3}-)?(0\d{2,3})-)(\d{7,8})(-(\d{3,}))?$/
};
$.fn.extend({
    checkRegExp:function(inputArg){
        if($(this).is("input") || $(this).is("textarea")){
            if ($(this).attr("type") != "radio" && $(this).attr("type") != "checkbox") {

                //绑定获得焦点
                $(this).bind("focus",function(){
                    var flag=false;
                    if($(this).val()==undefined || $(this).val()==""){
                        flag=true;
                    }
                    if (flag) {
                        //显示获得焦点文本
                        addText(inputArg.targetId, inputArg.onFocusText);
                        //切换样式
                        addClass(inputArg.targetId, inputArg.onFocusClass);
                    }
                });

                //失去焦点
                $(this).bind("blur",function(){
                    var flag=false;
                    if($(this).val()==undefined || $(this).val()==""){
                        flag=true;
                    }
                    if (flag) {
                        //显示获得焦点文本
                        addText(inputArg.targetId, inputArg.onEmptyText);
                        //切换样式
                        addClass(inputArg.targetId, inputArg.onEmptyClass);
                    }else{
                        var targetValue=false;
                        if(inputArg.regularTarget!=undefined && inputArg.regularTarget!=""){
                            targetValue= regulars[inputArg.regularTarget].test($(this).val());
                        }else{
                            targetValue= inputArg.regularText.test($(this).val());
                        }
                        if(targetValue){
                            //显示获得焦点文本
                            addText(inputArg.targetId, inputArg.onSuccessText);
                            //切换样式
                            addClass(inputArg.targetId, inputArg.onSuccessClass);
                        }else{
                            //显示获得焦点文本
                            addText(inputArg.targetId, inputArg.onErrorText);
                            //切换样式
                            addClass(inputArg.targetId, inputArg.onErrorClass);
                        }
                    }
                });
            }
        }


    }
});

这段代码逻辑其实也不是很复杂，只是在做了一个正则表达式的验证问题。但是这里定义了一个regulars对象，里面封装了一些内置的正则表达式。当然这里只是一部分，我们可以添加若干个以及或者通用的正则表达式。

添加文本和样式信息功用代码解析

/**
* 根据输入框的不同类型来判断
* @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);
    }
}

上面这段代码，已经贴出来过很多次，这是这个插件中总体控制样式和文字显示的。为了显示代码的完整性，这里再次贴出来一次。

(四). 使用例子

表单正则表达式验证测试例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Untitled Document</title>
        <link type="text/css" rel="stylesheet" href="new_file.css"/>
        <script language="JavaScript" src="jquery-1.3.2.min.js" type="text/javascript"></script>
        <script language="JavaScript" src="jquery-extend-2.0.0.js" type="text/javascript"></script>
        <script language="JavaScript" type="text/javascript">
            $(document).ready(function(){
                $("#txtName").checkRegExp({
                    onFocusText:"获得焦点，输入信息",
                    onFocusClass:"notice",
                    onEmptyText:"文本为空提示",
                    onEmptyClass:"notice",
                    onErrorText:"验证错误",
                    onErrorClass:"error",
                    onSuccessText:"验证正确",
                    onSuccessClass:"correct",
                    regularText:"",
                    regularTarget:"checkEmail",
                    targetId:"txtNameTip"
                });
            });
        </script>
    </head>
    <body>
        <p>
            <label>姓名:</label><input type="text" id="txtName" value=""/><span id="txtNameTip"></span>
        </p>
        <p>
            <label>年龄:</label><input type="text" id="txtAge" value=""/><span id="txtAgeTip"></span>
        </p>
        <p>
            <label>描述:</label><textarea id="txtArea"></textarea><span id="txtAreaTip"></span>
        </p>
        <p>
            <label>密码1:</label><textarea id="txtPass1"></textarea><span id="txtPass1Tip"></span>
        </p>
        <p>
            <label>密码2:</label><textarea id="txtPass2"></textarea><span id="txtPass2Tip"></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>
    </body>
</html>

regularText:"",

regularTarget:"checkEmail", 上面只需要注意以上两个参数，这是控制使用内置正则表达式验证还是自定义的正则表达式验证。其余的验证都是参数和前面的验证都是一样的。这里不做过多的讲解。如果两者同时存在，默认使用内置的正则表达式验证。

文章写到这里，突然发现上传不了图片，演示效果图就看不了了。

插件仍然存在诸多问题，很多细节方面的问题都没有考虑到，插件持续更新中，文章也持续更新中，后续期待....

码农公寓

相关文章