需求：在提交表单的时候，验证手机号码和身份证号码，如果不填写手机号码和身份证号码，就无需验证，如果填写手机号码和身份证号码，必须要填写正确的格式，如果不正确，则没有办法通过验证，出现弹框提示。
代码语言：javascript复制<!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后前端妹子，爱编程，爱运营，文艺与代码齐飞，魅力与智慧共存的程序媛一枚。
