jQuery攻略之表单验证

 

（每一段jQuery对应一段html代码，以标记为准则,css为共用代码，每段代码需独立运行。html和css代码在文章尾部，如下例）

 

                                               

 

 

确认必须字段不能为空（d1）val()取得选择器的值(以字符串的形式) 元素属性length event.preventDefault()防止提交表单到服务器

$(document).ready(function () {
    $('.lable').text("用户名 *");
    $('.error').hide();
    $('.submit-d1').click(function (event) {
        var data = $('.infobox').val();
        var len = data.length;
        if (len < 1) {
            $('.error').text("用户名不能为空").show();
            event.preventDefault();
        }
        else {
            $('.error').hide();
        }
    });
});

 

验证数字字段（d1） data.charAt(i).charCodeAt(0)
例子1：只允许输入数字，但不能输入负数

$(document).ready(function () {
    $('.lable').text("输入数字 *");
    $('.error').hide();
    $('.submit-d1').click(function (event) {
        var data = $('.infobox').val();
        var len = data.length;
        var c;
        for (var i=0; i < len; i++) {
            c = data.charAt(i).charCodeAt(0);
            if (c < 48 || c > 57) {
                $('.error').text("只能输入数字").show();
                event.preventDefault();
                break;
            }
            else {
                $('.error').hide();
            }
        }
    });
});

例子2：只允许输入数字的同时亦可输入负数,小数

$(document).ready(function () {
    $('.lable').text("输入数字 *");
    $('.error').hide();
    $('.submit-d1').click(function (event) {
        var data = $('.infobox').val();
        var len = data.length;
        var c;
        for (var i = 0; i < len; i++) {
            c = data.charAt(i).charCodeAt(0);
            if (c == 45 && i == 0) {
                continue;
            } //判断负数
            if (c == 46) {
                if (i != 0 && i != len - 1) {
                    continue;
                }
                else {
                    $('.error').text("输入小数错误").show();
                    event.preventDefault();
                    break;
                }
            }//判断小数
            if (c < 48 || c > 57) {
                $('.error').text("只能输入数字").show();
                event.preventDefault();
                break;
            }
            else {
                $('.error').hide();
            }//判断数字
        }
    });
});

例子3：限定值的范围

$(document).ready(function () {
    $('.lable').text("年龄 *");
    $('.error').hide();
    $('.submit-d1').click(function (event) {
        var data = $('.infobox').val();
        var len = data.length;
        var c;
        var age;
        var flag = 0;
        for (var i = 0; i < len; i++) {
            c = data.charAt(i).charCodeAt(0);
            if (c < 48 || c > 57) {
                $('.error').text("只能输入数字").show();
                flag = 1;
                event.preventDefault();
                break;
            }
            else {
                $('.error').hide();
            }
        }

        if (flag == 0) {
            age = parseInt(data);
            if (age < 5 || age > 99) {
                $('.error').text("请输入年龄范围在5~99岁").show();
                event.preventDefault();
            }
        }

    });
});

 

验证电话号码（d1）RegExp()可输入正则表达式或字符串 pattern.test()进行匹配，返回值为true或false

$(document).ready(function () {
    $('.lable').text("电话号码");
    $('.ready').hide();
    $('.submit-d1').click(function (event) {
        var data = $('.infobox').val();
        if (validate_phoneno(data)) {
            $('.error').hide();
        }
        else {
            $('.error').text("输入号码不符合格式").show();
            event.preventDefault();
        }
    });
});
function validate_phoneno(ph) {
var pattern=new RegExp(/^[0-9-+]+$/);
return pattern.test(ph);
}

 

验证用户ID（d1）

$(document).ready(function () {
    $('.lable').text("用户ID");
    $('.ready').hide();
    $('.submit-d1').click(function (event) {
        var data = $('.infobox').val();
        if (validate_userid(data)) {
            $('.error').hide();
        }
        else {
            $('.error').text("输入用户ID格式错误（只能包含字母,数字和下划线）").show();
            event.preventDefault();
        }
    });
});
function validate_userid(userid) {
    var pattern = new RegExp(/^[a-zA-Z0-9_]/);
    return pattern.test(userid);
}

 

验证日期格式（d1）“/\d{4}[\/-]\b\d{1,2}[\/-]\d{1,2}\b/”

$(document).ready(function () {
    $('.lable').text("日期");
    $('.ready').hide();
    $('.submit-d1').click(function (event) {
        var data = $('.infobox').val();
        if (validate_date(data)) {
            $('.error').hide();
        }
        else {
            $('.error').text("输入时间格式错误").show();
            event.preventDefault();
        }
    });
});
function validate_date(date) {
    var pattern = new RegExp(/\d{4}[\/-]\b\d{1,2}[\/-]\d{1,2}\b/);
    return pattern.test(date);
}

 

验证邮箱格式（d1）“/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/”

$(document).ready(function () {
    $('.lable').text("邮箱地址");
    $('.ready').hide();
    $('.submit-d1').click(function (event) {
        var data = $('.infobox').val();
        if (validate_email(data)) {
            $('.error').hide();
        }
        else {
            $('.error').text("输入邮箱格式错误").show();
            event.preventDefault();
        }
    });
});
function validate_email(email) {
    var pattern = new RegExp(/^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]+$/);
    return pattern.test(email);
}

 

检测复选框是否被选中（d2）find()
例子1

$(document).ready(function () {
    $('.error').hide();
    $('p.result').hide();
    $('.submit-d2').click(function (event) {
        var count = 0;
        var amt = 0;
        $('form').find(':checkbox').each(function () {
            if ($(this).is(':checked')) {
                count++;
                amt = amt + parseInt($(this).val());
            }
        });
        if (count == 0) {
            $('.error').text("复选框不能为0").show();
            $('p.result').hide();
        }
        else {
            $('.error').hide();
            $('p.result').text("总金额为" + amt).show();
        }
        event.preventDefault();
    });
});

例子2：利用length检测 $('input:checked').length

$(document).ready(function () {
    $('.error').hide();
    $('p.result').hide();
    $('.submit-d2').click(function (event) {
        var count = $('input:checked').length;
        var amt = 0;
        if (count == 0) {
            $('.error').text("复选框不能为0").show();
            $('p.result').hide();
        }
        else {
            $('form').find(':checkbox').each(function () {
                if ($(this).is(':checked')) {
                    count++;
                    amt = amt + parseInt($(this).val());
                }
            });
            $('.error').hide();
            $('p.result').text("总金额为" + amt).show();
        }
        event.preventDefault();
    });
});

 

检测单选框是否选中（d3）

$(document).ready(function () {
    $('.error').hide();
    $('p.result').hide();
    $('.submit-d3').click(function (event) {
        var count = 0;
        var amt = 0;
        $('form').find(':radio').each(function () {
            if ($(this).is(':checked')) {
                count++;
                amt = amt + parseInt($(this).val());
            }
        });
        if (count == 0) {
            $('.error').text("选项不能为0").show();
            $('p.result').hide();
        }
        else {
            $('.error').hide();
            $('p.result').text("总金额为" + amt).show();
        }
        event.preventDefault();
    });
});

 

下拉框选项（单选）（d4） select option:selected

$(document).ready(function () {
    $('.error').hide();
    $('p.result').hide();
    $('.submit-d4').click(function (event) {
        var count = $('select option:selected').val();
        if (count == 0) {
            $('p.result').hide();
            $('.error').text("选项不能为空").show();
        }
        else {
            $('.error').hide();
            $('p.result').text('你选中了' + $('select option:selected').text()).show();
        }
        event.preventDefault();
    });
});

 

下拉框选项（多选）（d5）multiple

$(document).ready(function () {
    $('.error').hide();
    $('p.result').hide();
    $('.submit-d5').click(function (event) {
        var count = $('select option:selected').val();
        if (count == 0) {
            $('p.result').hide();
            $('.error').text("选项不能为空").show();
        }
        else {
            $('.error').hide();
            $('p.result').html('你选中了<lable style="color:red;">' + $('select option:selected').text()+'</lable>').show();
        }
        event.preventDefault();
    });
});

 

样式添加到下拉框选项（d6）$('option:odd').addClass('meal-d6')

$(document).ready(function () {
    $('.error').hide();
    $('option:odd').addClass('meal-d6');
    $('p.result').hide();
    $('.submit-d6').click(function (event) {
        var count = $('select option:selected').val();
        if (count == 0) {
            $('p.result').hide();
            $('.error').text("选项不能为空").show();
        }
        else {
            $('.error').hide();
            $('p.result').html('你选中了<lable style="color:red;">' + $('select option:selected').text() + '</lable>').show();
        }
        event.preventDefault();
    });
});

 

表格图像按钮（d7）<input type="image"></input>

$(document).ready(function () {
    $('.error').hide();
    $('option:odd').addClass('meal-d6');
    $('p.result').hide();
    $('.submit-d7').click(function (event) {
        var count = $('select option:selected').val();
        if (count == 0) {
            $('p.result').hide();
            $('.error').text("选项不能为空").show();
        }
        else {
            $('.error').hide();
            $('p.result').html('你选中了<lable style="color:red;">' + $('select option:selected').text() + '</lable>').show();
        }
        event.preventDefault();
    });
});

 

选择或取消全部复选框（d8）filter(':gt(0)')创建索引

$(document).ready(function () {
    $('#checkall').click(function () {
        $('input[type="checkbox"]').attr('checked', $('#checkall').is(':checked'));
    });
    $('form').find(':checkbox').click(function () {
        var amt = 0;
        $('div').filter(':gt(0)').find(':checkbox').each(function () {
            if ($('div:gt(0)')) {
                if ($(this).is(':checked')) {
                    amt = amt + parseInt($(this).val());
                }
            }
        });
        $('p').remove();
        $('<p>').insertAfter('div:eq(3)');
        $('p').text('总金额是' + amt);
    });
});

 

通过blur()失焦验证两个文本框不能为空（d9） parent()返回亲元素

$(document).ready(function () {
    $('.error').hide();
    $('.infobox-d9').each(function () {
        $(this).blur(function () {
            var data = $(this).val();
            var len = data.length;
            if (len < 1) {
                $(this).parent().find('.error').show();
            }
            else {
                $(this).parent().find('.error').hide();
            }
        });
    });
});

 

通过按钮验证两个文本框不能为空（d9）

$(document).ready(function () {
    $('.error').hide();
    $("<input type='button' value='确定'>").insertAfter('form');
    $('input:button').click(function () {
        $('.infobox-d9').each(function () {
            var data = $(this).val();
            var len = data.length;
            if (len < 1) {
                $(this).parent().find('.error').show();
            }
            else {
                $(this).parent().find('.error').hide();
            }
        });
    });
});

 

验证密码和确认密码字段是否匹配（d10）next(selector) nextAll(selectot) selector用于匹配指定的元素

$(document).ready(function () {
    $('.error').hide();
    $('.submit-d10').click(function (event) {
        var data = $('.password').val();
        var len = data.length;
        if (len < 1) {
            $('.password').next().show();
        }
        else {
            $('.password').next().hide();
        }
        if ($('.password').val() != $('.confpass').val()) {
            $('.confpass').next().show();
        }
        else {
            $('.confpass').next().hide();
        }
        event.preventDefault();
    });
});

 

完善注册信息（d10）attr('disabled', true)字段禁用 removeAttr('disabled')字段解禁

$(document).ready(function () {
    $('.password').attr('disabled', true);
    $('.confpass').attr('disabled', true);
    $('.error').hide();
    $('.userID').blur(function () {
        userIDisNull();
    });
    $('.submit-d10').click(function (event) {
        var data = $('.password').val();
        var len = data.length;
        userIDisNull();
        if (len < 1) {
            $('.password').next().show();
        }
        else {
            $('.password').next().hide();
            if ($('.password').val() != $('.confpass').val()) {
                $('.confpass').next().show();
            }
            else {
                $('.confpass').next().hide();
                $('<p>').insertAfter('.submit-d10').text('成功');
            }
        }
        event.preventDefault();
    });
});

function userIDisNull() {
    var userID = $('.userID').val();
    var len = userID.length;
    if (len < 1) {
        $('.userID').next().show();
        $('.password').attr('disabled', true);
        $('.confpass').attr('disabled', true);
    }
    else {
        $('.userID').next().hide();
        $('.password').removeAttr('disabled');
        $('.confpass').removeAttr('disabled');
    }
}

 

完整版（d11）

$(document).ready(function () {
    $('.password').attr('disabled', true);
    $('.confpass').attr('disabled', true);
    $('.error').hide();
    $('.userID').blur(function () {
        userIDisNull();
    });
    $('.submit-d11').click(function (event) {
        var data = $('.password').val();
        var len = data.length;
        userIDisNull();
        if (len < 1) {
            $('.password').next().show();
        }
        else {
            $('.password').next().hide();
            if ($('.password').val() != $('.confpass').val()) {
                $('.confpass').next().show();
            }
            else {
                $('.confpass').next().hide();
                $('<p>').insertAfter('.submit-d11').text('成功');
            }
        }
        event.preventDefault();
    });
});

function userIDisNull() {
    var userID = $('.userID').val();
    var len = userID.length;
    if (len < 1) {
        $('.userID').next().show();
        $('.password').attr('disabled', true);
        $('.confpass').attr('disabled', true);
    }
    else {
        $('.userID').next().hide();
        $('.password').removeAttr('disabled');
        $('.confpass').removeAttr('disabled');
    }
}

 

理解表单编码（d12）$('form').serialize()查询字符串形式对所有表单元素进行编码

$(document).ready(function () {
    $('.error').hide();
    $('.submit-d12').click(function (event) {
        var info = $('form').serialize();
        $('.message').text('编码如下：' + info);
        event.preventDefault();
    });
});

 

运用数组显示编码方式（d13）$('form').serializeArray()建立数组 d.value取数组的值d.name取数组的值

$(document).ready(function () {
    $('.error').hide();
    $('.submit-d13').click(function (event) {
        var select = "";
        var info = $('form').serializeArray();

        $.each(info, function (i, d) {
            select = select + d.value + "";
        });

        $('.message').text('编码如下：' + select);
        return false;
    });
});

 

html代码

    <%--d1--%>
    <form id="form1" method="post" action="" runat="server">
    <div>
    <span class="lable">
    </span>
    <input type="text" class="infobox" name="userID" />
    <span class="error"></span>
    </div>
    <input class="submit-d1" type="submit" value="submit" />
    </form>

    <%--d2--%>
    <form action="">
    <input type="checkbox" id="iphone" name="iphone" value=4000 class="infobox-d2"/>iphone<br />
    <input type="checkbox" id="Lumia800" name="Lumia800" value=3500 class="infobox-d2"/>Lumia800<br />
    <input type="checkbox" id="htc" name="htc" value=3500 class="infobox-d2"/>htc<br />
    <p class="error"></p>
    <p class="result"></p>
    <input class="submit-d2" type="submit" value="Submit" />
    </form>

    <%--d3--%>
    <form action="">
    <input type="radio" id="iphone" name="iphone" value=4000 class="infobox-d3"/>iphone<br />
    <input type="radio" id="Lumia800" name="Lumia800" value=3500 class="infobox-d3"/>Lumia800<br />
    <input type="radio" id="htc" name="htc" value=3500 class="infobox-d3"/>htc<br />
    <p class="error"></p>
    <p class="result"></p>
    <input class="submit-d3" type="submit" value="Submit" />
    </form>

    <%--d4--%>
    <form action="">
    <select id="commodity" class="infobox">
    <option value="0">选择</option>
    <option value="iphone">iphone</option>
    <option value="Lumia800">Lumia800</option>
    <option value="htc">htc</option>
    </select>
    <p class="error"></p>
    <p class="result"></p>
    <input class="submit-d4" type="submit" value="Submit" />
    </form>

    <%--d5--%>
    <form action="">
    <select id="Select1" class="infobox" multiple>
    <option value="0">选择</option>
    <option value="iphone">iphone</option>
    <option value="Lumia800">Lumia800</option>
    <option value="htc">htc</option>
    </select>
    <p class="error"></p>
    <p class="result"></p>
    <input class="submit-d5" type="submit" value="Submit" />
    </form>

    <%--d6--%>
    <form action="">
    <select id="Select1" class="infobox">
    <option value="0">选择</option>
    <option value="iphone">iphone</option>
    <option value="Lumia800">Lumia800</option>
    <option value="htc">htc</option>
    </select>
    <p class="error"></p>
    <p class="result"></p>
    <input class="submit-d6" type="submit" value="Submit" />
    </form>

    <%--d7--%>
    <form action="">
    <select id="Select2" class="infobox">
    <option value="0">选择</option>
    <option value="iphone">iphone</option>
    <option value="Lumia800">Lumia800</option>
    <option value="htc">htc</option>
    </select><br />
    <p class="error"></p>
    <p class="result"></p>
    <input class="submit-d7" type="image" src="Img/Submit-d7.png" value="Submit" />
    </form>

    <%--d8--%>
    <form action="">
    <div class="infobox"><input type="checkbox" id="checkall" />选择/取消全部</div>
    <div class="infobox"><input type="checkbox" id="iphone" name="iphone" value=4000/>iphone</div>
    <div class="infobox"><input type="checkbox" id="Lumia800" name="Lumia800" value=3500/>Lumia800</div>
    <div class="infobox"><input type="checkbox" id="htc" name="htc" value=3000/>htc</div>
    </form>

    <%--d9--%>
    <form>
    <div><span class="labal-d9">用户ID*</span><input type="text" class="infobox-d9" name="userID"/><span class="error">用户ID不能为空</span></div>
    <div><span class="labal-d9">密码</span><input type="text" class="infobox-d9" name="password" /><span class="error">密码不能为空</span></div>
    </form>

    <%--d10--%>
    <form action="">
    <div><span class="labal-d10">用户ID*</span><input type="text" class="userID" name="userID"/><span class="error">用户ID不能为空</span></div>
    <div><span class="labal-d10">密码</span><input type="password" class="password" name="password" /><span class="error">密码不能为空</span></div>
    <div><span class="labal-d10">密码</span><input type="password" class="confpass" name="confpass" /><span class="error">确认密码于密码不匹配</span></div>
    <input type="submit" class="submit-d10" value="Submit" />
    </form>

    <%--d11--%>
    <form action="">
    <fieldset>
    <legend>请输入个人信息</legend>
    <div><span class="labal-d11">用户ID*</span><input type="text" class="userID" name="userID"/><span class="error">用户ID不能为空</span></div>
    <div><span class="labal-d11">密码</span><input type="password" class="password" name="password" /><span class="error">密码不能为空</span></div>
    <div><span class="labal-d11">密码</span><input type="password" class="confpass" name="confpass" /><span class="error">确认密码于密码不匹配</span></div>
    </fieldset>
    <input type="submit" class="submit-d11" value="Submit" />
    </form>

    <%--d12--%>
    <form action="">
    <fieldset>
    <legend>请输入个人信息</legend>
    <div><span class="labal-d12">用户ID*</span><input type="text" class="userID" name="userID"/><span class="error">用户ID不能为空</span></div>
    <div><span class="labal-d12">密码</span><input type="password" class="password" name="password" /><span class="error">密码不能为空</span></div>
    <div><span class="labal-d12">密码</span><input type="password" class="confpass" name="confpass" /><span class="error">确认密码于密码不匹配</span></div>
    <input type="checkbox" id="iphone" name="iphone" value=4000 class="infobox-d2"/>iphone<br />
    <input type="checkbox" id="Lumia800" name="Lumia800" value=3500 class="infobox-d2"/>Lumia800<br />
    <input type="checkbox" id="htc" name="htc" value=3500 class="infobox-d2"/>htc<br />
    <select id="Select2" class="infobox" name="selectbox">
    <option value="0">选择</option>
    <option value="iphone">iphone</option>
    <option value="Lumia800">Lumia800</option>
    <option value="htc">htc</option>
    </select><br />
    </fieldset>
    <input type="submit" class="submit-d12" value="Submit" />
    <div class="message"></div>
    </form>

    <%--d13--%>
    <form action="">
    <fieldset>
    <legend>请输入个人信息</legend>
    <input type="checkbox" id="iphone" name="iphone" value=4000 class="infobox-d2"/>iphone<br />
    <input type="checkbox" id="Lumia800" name="Lumia800" value=3500 class="infobox-d2"/>Lumia800<br />
    <input type="checkbox" id="htc" name="htc" value=3500 class="infobox-d2"/>htc<br />
    <select id="Select2" class="infobox" name="selectbox">
    <option value="0">选择</option>
    <option value="iphone">iphone</option>
    <option value="Lumia800">Lumia800</option>
    <option value="htc">htc</option>
    </select><br />
    </fieldset>
    <input type="submit" class="submit-d13" value="Submit" />
    <div class="message"></div>
    </form>

 

css代码

/*d1*/
.labal{ float:left; width:120px;}
.infobox{ width:150px;}
.error{ color:Red; padding-left:10px; }
.submit-d1{ margin-left:50px; margin-top:10px;}

/*d6*/
.meal-d6{ background:Blue; color:red;}

/*d7*/
.submit-d7{ margin:10px; width:50px; height:40px; }

/*d11*/
fieldset{ border:1px solid #888; width:400px;}
legend{ color:Blue; font-weight:bold;}
.labal-d11{ width:70px; float:left;}