代码拉取完成，页面将自动刷新
<!DOCTYPE html >
<html lang="en" class="bg-white">
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>layui扩展模块-bootstrapForm</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
</head>
<body class="bg-white">
<div class="container" style="margin-top: 30px;">
<div class="row">
<div class="col-md-8 order-md-1">
<h4 class="mb-3">表单标题</h4>
<hr class="mb-4">
<form class="needs-validation" id="meetingForm" novalidate="" method="post" action="javascript:;">
<div class="mb-3">
<label for="phone">手机号码<span class="text-muted">(必填项)</span></label>
<input type="text" required class="form-control" id="phone" name="phone" placeholder="phone" b-filter="phone"
b-validation="phone">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="esType">性别<span class="text-muted">(必填项)</span></label>
<div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="man" name="sex" class="custom-control-input" checked value="男" b-filter="sex">
<label class="custom-control-label" for="man">男</label>
</div>
<div class="custom-control custom-radio custom-control-inline">
<input type="radio" id="woman" name="sex" class="custom-control-input" value="女" >
<label class="custom-control-label" for="woman">女</label>
</div>
</div>
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="esType">类型<span class="text-muted">(必填项)</span></label>
<select class="custom-select form-control" required id="esType" name="esType" b-filter="esType">
<option value="">选择类型</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<div class="invalid-feedback">
邮寄类型不能为空
</div>
</div>
<div class="mb-3">
<label for="explain">备注<span class="text-muted"></span></label>
<textarea name="explain" id="explain" class="form-control" b-filter="explain"></textarea>
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="email">邮箱账号<span class="text-muted">(必填项)</span></label>
<input type="email" required class="form-control" id="email" name="email" placeholder="email" b-filter="email"
b-validation="email">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="identity">身份证号码<span class="text-muted">(必填项)</span></label>
<input type="text" required class="form-control" id="identity" name="identity" placeholder="identity" b-filter="identity"
b-validation="identity">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="url">url<span class="text-muted">(必填项)</span></label>
<input type="text" required class="form-control" id="url" name="url" placeholder="url" b-filter="url"
b-validation="url">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="num">数字<span class="text-muted">(必填项)0-9任意长度的数字</span></label>
<input type="text" required class="form-control" id="num" name="num" placeholder="num" b-filter="num"
b-validation="num">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="upStr">大写字符串<span class="text-muted">(必填项)A-Z任意长度的大写字母</span></label>
<input type="text" required class="form-control" id="upStr" name="upStr" placeholder="upStr" b-filter="upStr"
b-validation="upStr">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="date">小写字符串<span class="text-muted">(必填项)a-z任意长度的小写字母</span></label>
<input type="text" required class="form-control" id="lgStr" name="lgStr" placeholder="lgStr" b-filter="lgStr"
b-validation="lgStr">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="date">日期<span class="text-muted">(必填项)</span></label>
<input type="date" required class="form-control" id="date" name="date" placeholder="date" b-filter="date"
b-validation="date">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="account">用户名<span class="text-muted">(必填项)字母开头，长度在6~16之间，允许字母数字下划线</span></label>
<input type="text" required class="form-control" id="account" name="account" placeholder="account" b-filter="account"
b-validation="account">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="esNo">邮政编码<span class="text-muted">(必填项)</span></label>
<input type="text" required class="form-control" id="esNo" name="esNo" placeholder="esNo" b-filter="esNo"
b-validation="esNo">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="ip">ip<span class="text-muted">(必填项)</span></label>
<input type="text" required class="form-control" id="ip" name="ip" placeholder="ip" b-filter="ip" b-validation="ip">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="passwordZ">弱密码<span class="text-muted">(必填项)以字母开头，长度在6~16之间，只能包含字母、数字和下划线</span></label>
<input type="password" required class="form-control" id="passwordZ" name="passwordZ" placeholder="passwordZ" b-filter="passwordZ" b-validation="passwordZ">
<div class="invalid-feedback">
</div>
</div>
<div class="mb-3">
<label for="passwordA">强密码<span class="text-muted">(必填项)必须包含大小写字母和数字的组合，不能使用特殊字符，长度在6-16之间</span></label>
<input type="password" required class="form-control" id="passwordA" name="passwordA" placeholder="passwordA" b-filter="passwordA" b-validation="passwordA">
<div class="invalid-feedback">
</div>
</div>
<hr class="mb-4">
<button style="margin-bottom: 50px;" class="btn btn-primary btn-lg btn-block" type="submit" id="submitMeeting">提交</button>
</form>
</div>
</div>
</div>
<script src="js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/layui/layui.js" type="text/javascript" charset="utf-8"></script>
<script src="js/bootstrapFormValidity/bform.js" type="text/javascript" charset="utf-8"></script>
<script>
layui.use(['layer', 'bform'], function() {
var bform = layui.bform,
layer = layui.layer;
var form = bform({
elem: '#meetingForm',
elemSubmit: '#submitMeeting',
/* 表单初始值 */
data: {
phone: '15675682721',
identity: '430481200005128123',
url: 'http://www.baidu.com',
num: '123456',
upStr: 'QQQQQQ',
lgStr: 'qqqqqq',
date: '2020-02-02',
account: 'admina',
esNo: '423001',
ip: '127.0.0.1',
passwordZ: 'abcdef',
passwordA: 'abcdE1'
},
success: function(e) {
console.log(e.getValues());
}
})
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手