jQuery验证手机号、身份证、姓名

最新推荐文章于 2020-07-16 15:31:12 发布

原创最新推荐文章于 2020-07-16 15:31:12 发布 · 6.9k 阅读

2 ·

CC 4.0 BY-SA版权

个人总结专栏收录该内容

19 篇文章

订阅专栏

本文介绍了一个使用jQuery实现的简单网页表单验证功能，包括对中文姓名、18位身份证号码及中国大陆手机号码的有效性校验。通过正则表达式匹配检查用户输入的数据是否符合格式要求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery验证手机号、身份证、姓名</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
.qupiao {
    margin:100px auto;
}
</style>
</head>
<body>
<div class="qupiao">
    <h4>验证个人信息</h4>


    <!-- <span class="qupiao-news">取票人信息<!–（至少填写一位）–></span>-->
    <!--<span class="qupiao-add"><button id="add">+</button>添加其他出行人信息</span>-->
    <form class="qupiao-ipt auth-form" action="">
        <div class="form-group">
            <label class="qupiao-ipt-1">姓          名:</label>
            <input id="name" type="text">
            <span class="checkExistRong" id="checkExistname"></span>
        </div>
        <div class="form-group">
            <label class="qupiao-ipt-2">身份证号码:</label>
            <input id="identity" type="text" name="fname" maxlength="18">
            <span class="checkExistRong" id="checkExistID"></span>


        </div>
        <div class="form-group">
            <label class="qupiao-ipt-3">手机号号码:</label>
            <input id="telephone" type="tel" name="fname" min="11">
            <span class="checkExistRong" id="checkExistPhone"></span>
        </div>
    </form>
</div>


<script>
/*姓名身份证，手机号提交*/
function isChinaName(name) {
    var pattern = /^[\u4E00-\u9FA5]{1,6}$/;
    return pattern.test(name);
}




// 验证身份证
function isCardNo(card) {
    var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
    return pattern.test(card);
}


// 验证手机号
function isPhoneNo(phone) {
    var pattern = /^1[34578]\d{9}$/;
    return pattern.test(phone);
}


/*用户名判断*/
function userName(inputid, spanid) {
    $(inputid).blur(function() {
        if ($.trim($(inputid).val()).length == 0) {
            $(spanid).html("× 名称没有输入");
        } else {
            if (isChinaName($.trim($(inputid).val())) == false) {
                $(spanid).html("× 名称不合法");
            }
        }
    });
    $(inputid).focus(function() {
        $(spanid).html("");
    });


};
userName('#name', "#checkExistname");
/*身份证判断*/
function userID(inputid, spanid) {
    $(inputid).blur(function() {
        if ($.trim($(inputid).val()).length == 0) {
            $(spanid).html("× 身份证号码没有输入");
        } else {
            if (isCardNo($.trim($(inputid).val())) == false) {
                $(spanid).html("× 身份证号不正确");
            }
        }
    });
    $(inputid).focus(function() {
        $(spanid).html("");
    });
};
userID('#identity', "#checkExistID");


/*手机号判断*/
function userTel(inputid, spanid) {
    $(inputid).blur(function() {
        if ($.trim($(inputid).val()).length == 0) {
            $(spanid).html("× 手机号没有输入");
        } else {
            if (isPhoneNo($.trim($(inputid).val())) == false) {
                $(spanid).html("× 手机号码不正确");
            }
        }
        $(inputid).focus(function() {
            $(spanid).html("");
        });
    });
};
userTel('#telephone', "#checkExistPhone");
</script>


</body>
</html>