提交表单的时候验证手机号码和身份证号码

需求:在提交表单的时候,验证手机号码和身份证号码,如果不填写手机号码和身份证号码,就无需验证,如果填写手机号码和身份证号码,必须要填写正确的格式,如果不正确,则没有办法通过验证,出现弹框提示。

<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
        <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    </head>
    <body>
        
            <form id="dialogForm" class="form-horizontal">
                <div class="form-body">
                    <div class="row">
                        <div class="col-md-12 col-sm-12  col-xs-12">
                            <div class="form-group">
                                <label class="col-md-2 col-sm-2  col-xs-2 control-label">证件号
                                        </label>
                                <div class="col-md-5 col-sm-5  col-xs-5">
                                    <input type="text" class="form-control " placeholder="" id="card" name="card">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-md-12 col-sm-12  col-xs-12">
                            <div class="form-group">
                                <label class="col-md-2 col-sm-2  col-xs-2 control-label">联系电话</label>
                                <div class="col-md-5 col-sm-5  col-xs-5">
                                    <input type="text" class="form-control " placeholder="" id="phone" name="">
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
            <div class="modal-footer">
                <button type="button" class="btn blue" id="addBtn">保存</button>
            </div>      
        <!-- 弹框 -->
        <script src="https://cdn.bootcss.com/layer/2.2/layer.js"></script>
        <script src="https://cdn.bootcss.com/layer/2.2/extend/layer.ext.js"></script>
        <script type="text/javascript">
            //添加后保存
            $("#addBtn").on("click", function() {
                //手机号码前端验证                      
                var $phone_num = $("#phone").val();
                var reg01 = /^1[3|4|5|7|8]\d{9}$/; //手机号            
                if(reg01.test($phone_num) || $("#phone").val() == "") {
                    debugger;
                    console.log("手机号正确");
                } else {
                    layer.msg('请填写正确手机号', {
                        icon: 5,
                        time: 1000
                    });
                    return;
                }
                //身份证号码前端验证     
                var $card_num = $("#card").val();
                var reg02 = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
                if(reg02.test($card_num) || $("#card").val() == "") {
                    console.log("身份证号码号正确");
                } else {
                    layer.msg('请填写正确的身份证号码', {
                        icon: 5,
                        time: 1000
                    });
                    return;
                }
            })
        </script>
    </body>
</html>

原文作者:祈澈姑娘 技术博客:https://www.jianshu.com/u/05f416aefbe1 90后前端妹子,爱编程,爱运营,文艺与代码齐飞,魅力与智慧共存的程序媛一枚。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券