Php文档 Php问答行业资讯 Php论坛 Php手册 Php博客

游戏榜单

软件榜单

关闭导航

热搜榜

热门下载

热门标签

关闭搜索

php爱好者> php文档>jQuery 表单验证扩展(三)

jQuery 表单验证扩展(三)

时间：2010-10-17 来源：贺臣

文章回顾:

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事件来验证比较好。

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

jQuery检查输入项的范围源码解析 /**
* 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元素的验证代码 //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 多项选择

选择数量过多

验证成功

(六). 验证测试代码

jQuery检查输入框是否为必填项测试代码 <!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="男" />男    
                <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>
        <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>

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

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