jQuery 表单验证扩展(三)

前些天写了两篇关于jQuery表单验证的文章，jQuery的插件还存在诸多问题，但是本人还在不断努力更新中。本篇文章主要介绍jQuery表单验证中输入文本内容的范围验证。

文章回顾:

 jQuery 表单验证扩展(一)   点击查看

 jQuery 表单验证扩展(二)   点击查看

在看这篇文章之前， 可以看看前两篇文章，表单验证输入范围验证是在原有的基础上改写的。

 

(一). 输入范围验证存在问题

在第二篇上提到的问题，在原有的验证中也存在相同的问题。当然在这次改写中也解决了一些这些问题。同时也添加了对radio，checkbox，select 元素的验证。当然对于时间的验证仍没有解决，后续过程中会继续补充！

 

(二). 验证参数的设计

onEmptyText: 当输入内容为空的时候显示文本

onEmptyClass: 当输入内容为空的时候显示样式

onSuccessText: 当验证成功的时候显示的文本

onSuccessClass: 当验证成功的时候显示的样式

onErrorText:当验证失败的时候显示的文本

onErrorClass:当验证失败的时候显示的样式

onFocusText: 当获得焦点的时候显示的文本

onFocusClass:当获得焦点的时候显示的样式

dataType:输入的数据类型

min:输入的最小值

max:输入的最大值

targetId:显示提示消息的元素id

 

改写的部分就是将提示性文字和样式都单独隔离出来，可以更好灵活的操作表单验证！

改写的文章支持text,number,date 三种 数据形式，而且在radio，checkbox，select的验证也有更新。

radio，checkbox ，select 验证只是验证是否选中，而且这里的select 对于blur 事件并不敏感，所以这里采用的change事件来验证比较好。 

 

(三). 验证范围源码解析

/**

 * onEmptyText: 当输入内容为空的时候显示文本

 * onEmptyClass: 当输入内容为空的时候显示样式

 * onSuccessText: 当验证成功的时候显示的文本

 * onSuccessClass: 当验证成功的时候显示的样式

 * onErrorText:当验证失败的时候显示的文本

 * onErrorClass:当验证失败的时候显示的样式

 * onFocusText: 当获得焦点的时候显示的文本

 * onFocusClass:当获得焦点的时候显示的样式

 * dataType:输入的数据类型

 * min:输入的最小值

 * max:输入的最大值

 * targetId:显示提示消息的元素id

 * @param {Object} inputArg

 */

$.fn.extend({

    checkRange:function(inputArg){

        //绑定焦点事件

        $(this).bind("focus",function(){

            var flag=true;

            if($(this).is("input") || $(this).is("textarea")){

                if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox"){

                    var name=$(this).attr("name");

                    var items=$('input[@name=""+name+""][checked]');

                    if(items.length>0){

                        flag=false;

                    }

                }else{

                    if($(this).val()!=undefined && $(this).val()!=""){

                        flag=false;

                    }

                }

            }else{ //select  需要改进 select没有focus事件,应该改为change事件

                

            }

            if (flag) {

                //显示获得焦点文本

                addText(inputArg.targetId, inputArg.onFocusText);

                //切换样式

                addClass(inputArg.targetId, inputArg.onFocusClass);

            }

        });

        

        //绑定失去焦点事件

        $(this).bind("blur",function(){

             var flag=false;

             if($(this).is("input") || $(this).is("textarea")){

                 if($(this).attr("type")=="radio" || $(this).attr("type")=="checkbox"){

                    var name=$(this).attr("name");

                    var items=$('input[@name=""+name+""][checked]');

                    if(items!=undefined && items.length>=inputArg.min && items.length<inputArg.max){

                        flag=true;

                    }

                }else{

                    var value=$(this).val();

                    if (value == undefined || value == "") {

                        //显示获得焦点文本

                        addText(inputArg.targetId,inputArg.onEmptyText);

                        //切换样式

                        addClass(inputArg.targetId,inputArg.onEmptyClass);

                    }else {

                        switch (inputArg.dataType) {

                            case "text":

                                if(value.length < inputArg.min || value.length >= inputArg.max){

                                    flag=false;

                                }else{

                                    flag=true;

                                }

                                break;

                            case "number":

                                if (isNaN(value)) {

                                    flag = false;

                                }

                                else {

                                    if (value < inputArg.min || value >= inputArg.max) {

                                        flag = false;

                                    }

                                    else {

                                        flag = true;

                                    }

                                }

                                break;

                            case "date":

                                break;

                        }

                    }

                }

             }else{  //select 

                 

             }

             if(flag){

                //显示获得焦点文本

                addText(inputArg.targetId, inputArg.onSuccessText);

                //切换样式

                addClass(inputArg.targetId, inputArg.onSuccessClass);

             }else{

                //显示获得焦点文本

                addText(inputArg.targetId, inputArg.onErrorText);

                //切换样式

                addClass(inputArg.targetId, inputArg.onErrorClass);

             }

        });

        

        //select 选择框选择事件

        if ($(this).is("select")) {

            $(this).bind("change", function(){

                var items=$(this).find("option:selected");

                if(items!=undefined && items.length>=inputArg.min && items.length<inputArg.max){

                    //显示获得焦点文本

                    addText(inputArg.targetId, inputArg.onSuccessText);

                    //切换样式

                    addClass(inputArg.targetId, inputArg.onSuccessClass);

                }else{

                    //显示获得焦点文本

                    addText(inputArg.targetId, inputArg.onErrorText);

                    //切换样式

                    addClass(inputArg.targetId, inputArg.onErrorClass);

                }

            });

        }

    }

});

 

这里比较重要的是对于select元素的验证，select可以选择多个选中项。radio，checkbox，select 只是验证选择长度，而不会验证text,date 。这是本文很重要的一部分。源码中也做了代码重构，有很多共同部分都提取出来，大大减少了代码量，同时也利用了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);

    }

}

 

  这段代码主要主要用于添加文本提示和样式问题。

//select 选择框选择事件

        if ($(this).is("select")) {

            $(this).bind("change", function(){

                var items=$(this).find("option:selected");

                if(items!=undefined && items.length>=inputArg.min && items.length<inputArg.max){

                    //显示获得焦点文本

                    addText(inputArg.targetId, inputArg.onSuccessText);

                    //切换样式

                    addClass(inputArg.targetId, inputArg.onSuccessClass);

                }else{

                    //显示获得焦点文本

                    addText(inputArg.targetId, inputArg.onErrorText);

                    //切换样式

                    addClass(inputArg.targetId, inputArg.onErrorClass);

                }

            });

        }

 

这段代码用于验证select选择框元素，支持多项选择验证。

 

(五). 验证使用例子

文本框输入验证

  当输入的内容长度不符

 输入的字符串满足当前要求提示

 当不输入文本的时候验证

对于数字的验证

  获得焦点提示问题

 输入的数字不满足范围

 验证成功

对于checkbox的验证

 checkbox组其中之一获得焦点

 选择满足数据

 选择超过数量

对于select 多项选择

 选择数量过多

 验证成功

 

(六). 验证测试代码

<!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-1.0.0.js" type="text/javascript"></script>

        <script language="JavaScript" type="text/javascript">

            $(document).ready(function(){

                $("#txtName").checkRange({

                    onFocusText:"必填项",

                    onFocusClass:"notice",

                    targetId:"txtNameTip",

                    onSuccessText:"验证成功",

                    onSuccessClass:"correct",

                    onErrorText:"你真不听话，请认真填写",

                    onErrorClass:"error",

                    min:6,

                    max:12,

                    dataType:"text"

                });

                

                $("#rdbMan,#rdbWoman").checkRange({

                    onFocusText:"必填项",

                    onFocusClass:"notice",

                    targetId:"txtSexTip"

                });

                

                $("#txtPass2").checkRange({

                    onFocusText:"必填项",

                    onFocusClass:"notice",

                    targetId:"txtPass2Tip",

                    onSuccessText:"验证成功",

                    onSuccessClass:"correct",

                    onErrorText:"你真不听话，请认真填写",

                    onErrorClass:"error",

                    min:10,

                    max:60,

                    dataType:"text"

                });

                

                $("#rdbMan1,#rdbWoman2,,#rdbMan3,,#rdbWoman4").checkRange({

                    onFocusText:"必填项",

                    onFocusClass:"notice",

                    targetId:"txthobbyTip",

                    onSuccessText:"验证成功",

                    onSuccessClass:"correct",

                    onErrorText:"你真不听话，请认真填写",

                    onErrorClass:"error",

                    min:1,

                    max:3,

                    dataType:"text"

                });

                

                

                $("#txtAge").checkRange({

                    onFocusText:"必填项",

                    onFocusClass:"notice",

                    targetId:"txtAgeTip",

                    onSuccessText:"验证成功",

                    onSuccessClass:"correct",

                    onErrorText:"输入的范围为10-60",

                    onErrorClass:"error",

                    min:10,

                    max:60,

                    dataType:"number"

                });

                

                $("#ddlOption").checkRange({

                    onFocusText:"必填项",

                    onFocusClass:"notice",

                    targetId:"ddlOptionTip",

                    onSuccessText:"验证成功",

                    onSuccessClass:"correct",

                    onErrorText:"你真不听话，请认真填写",

                    onErrorClass:"error",

                    min:1,

                    max:2,

                    dataType:"number"

                });

                

                

                $("#rdbMan,#rdbWoman").checkRange({

                    onFocusText:"必填项",

                    onFocusClass:"notice",

                    targetId:"txtSexTip",

                    onSuccessText:"验证成功",

                    onSuccessClass:"correct",

                    onErrorText:"你真不听话，请认真填写",

                    onErrorClass:"error",

                    min:1,

                    max:2,

                    dataType:"number"

                });

            });

        </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="男" />男 &nbsp;&nbsp;&nbsp;

                <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 &nbsp;&nbsp;&nbsp;

                <input id="rdbWoman2" type="checkbox" name="hobby" value="hobby2" />bb&nbsp;&nbsp;&nbsp;

                <input id="rdbMan3" type="checkbox" name="hobby" value="hobby3" />aa &nbsp;&nbsp;&nbsp;

                <input id="rdbWoman4" type="checkbox" name="hobby" value="hobby4" />bb&nbsp;&nbsp;&nbsp;

            </span>

            <span id="txthobbyTip"></span>

        </p>

        <p>

            <label>地区:</label>

            <span>

                <select id="ddlOption" name="area" multiple="multiple">

                    <option value="0">00000</option>

                    <option value="1">11111</option>

                    <option value="2">22222</option>

                    <option value="3">33333</option>

                    <option value="4">44444</option>

                </select>

            </span>

            <span id="ddlOptionTip"></span>

        </p>

    </body>

</html>

 

以上是测试的部分代码 ，不过基本可以说明这个方法的的使用方式。

这里不多写了，后续不断更新......