需求：在提交表单的时候，验证手机号码和身份证号码，如果不填写手机号码和身份证号码，就无需验证，如果填写手机号码和身份证号码，必须要填写正确的格式，如果不正确，则没有办法通过验证，出现弹框提示。
<!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>
