1. 程式人生 > >js驗證表單輸入框

js驗證表單輸入框

標籤:

<div class="mask_box">
    <div class="mask_top_01">
        <div class="title">填寫資訊,客服將與您聯絡</div>
        <a href="javascript:void(0);" class="close"></a>
    </div>
    <div class="mask_con" >
        <div class="mask_info">
            <p class="info"
> <span class="typename">姓名:</span> <input type="text" class="in_text username"> </p> <p class="error"></p> <p class="info"><span class="typename">手機:</span> <input
type="text" class="in_text mobile"></p> <p class="error"></p> <p class="info ht"><span class="typename">酒店:</span> <input type="text" class="in_text hotel"></p> <p class="error ht"></p> <p
class="btn"><input type="button" class="input_btn" value="提交"></p> </div> </div> <input type="hidden" id="hid_type" value="0"> </div>
JS:
/*彈出框驗證*/
$(".mask_box :input").focus(function(){
    $(this).addClass("active");
    ch()
});
$(".mask_box .username").blur(function(){
    ch()
});
$(".mask_box .mobile").blur(function(){
    ch()
});
$(".mask_box .hotel").blur(function(){
    ch()
});

$(".mask_box :input").keyup(function(){
    ch();
});

function ch() {
    var a = check_tanchu($(".mask_box .username"));
    var b =check_tanchu($(".mask_box .mobile"));
    var c = 0;
    var type_id=$("#hid_type").val();
    if(type_id!="2")
    {
        c = check_tanchu($(".mask_box .hotel"));
    }
    if (a == 0 && b == 0 && c == 0) {
        $(".mask_box .mask_con .input_btn").removeAttr("disabled");
    }
    else {
        $(".mask_box .mask_con .input_btn").attr("disabled", true);
    }
}
function check_tanchu(obj) {
    var con_tent = "";
    var ip_index = 0;
    var type_id = $("#hid_type").val();
    var is_u=0;
    var is_m = 0;
    if (obj.hasClass("username")) {
        var len = obj.val().length;
        if (parseInt(len) <= 0) {
            con_tent = "姓名不能為空";
            $(this).attr("value", "");
            is_u = 1;
        }
        else if (parseInt(len) > 16) {
            con_tent = "請輸入正確姓名";
            is_u = 1;
        }
        ip_index = 0;
        $(".mask_box .mask_con p.error").eq(ip_index).html(con_tent);
        return is_u;
    }
    if (obj.hasClass("mobile")) {
        var yes = true;
        var len = obj.val().length;
        if (len <= 0) {
            con_tent = "手機號碼不能為空";
            is_m = 1;
        }
        else {
            var myreg = /^(((13[0-9]{1})|(14[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
            if (!myreg.test(obj.val())) {
                con_tent = "請輸入正確的號碼";
                is_m = 1;
            }
        }
        ip_index = 1;
        $(".mask_box .mask_con p.error").eq(ip_index).html(con_tent);
        return is_m;
    }
    var is_h = 0;
    if (obj.hasClass("hotel")) {
        var yes = true;
        var len = obj.val().length;
        if (parseInt(len) <= 0) {
            con_tent = "酒店名字不能為空";
            $(this).attr("value", "");
            is_h = 1;
        }
        else if (parseInt(len) > 30) {
            con_tent = "請輸入正確酒店名稱";
            is_h = 1;
        }
        ip_index = 2;
        $(".mask_box .mask_con p.error").eq(ip_index).html(con_tent);
        return is_h;
    }
}
/*彈出框驗證*/