写了一个layui的注册页面；常用的几种input框都写进去了，额。我设置的基本上都是必填，大家能用到，直接拿去用就好了
先给个图：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<script type="text/javascript" src="layer/layer.js"></script>
<script type="text/javascript" src="layui/layui.all.js"></script>
<link rel="stylesheet" href="layui/css/layui.css" />
</head>
<body>
<div>
<input id="butt" type="button" value="你点一下试试？(后果自负)" /><br><br><br>
</div>
<div style="display: none;" id="gb">
<form class="layui-form" action="">
<div class="layui-form-item">
<label class="layui-form-label">用户账号</label>
<div class="layui-input-inline">
<input type="text" name="username" required lay-verify="required" placeholder="请输入账号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户密码</label>
<div class="layui-input-inline">
<input type="password" name="password" required lay-verify="pwd" placeholder="请输入密码" autocomplete="off" class="layui-input" id="pass1">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">确认密码</label>
<div class="layui-input-inline">
<input type="password" name="passwords" required lay-verify="pwd" placeholder="请再次输入密码" autocomplete="off" class="layui-input" id="pass2">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">邮箱</label>
<div class="layui-input-inline">
<input type="email" name="email" required lay-verify="emails" placeholder="请输入邮箱" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">联系方式</label>
<div class="layui-input-inline">
<input type="text" name="phone" required lay-verify="phones" placeholder="请输入手机号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">单选框</label>
<div class="layui-input-block">
<input type="radio" name="sex" value="男" title="男" checked>
<input type="radio" name="sex" value="女" title="女">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">复选框</label>
<div class="layui-input-block">
<input type="checkbox" name="like[write]" title="发呆">
<input type="checkbox" name="like[read]" title="发呆" checked>
<input type="checkbox" name="like[dai]" title="发呆">
</div>
</div>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">所在地</label>
<div class="layui-input-inline">
<select name="type" lay-verify="required" lay-filter="type">
<option value=""></option>
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">广州</option>
</select>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">真实姓名</label>
<div class="layui-input-inline">
<input type="text" name="truename" required lay-verify="truename" placeholder="请输入您的姓名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">身份证</label>
<div class="layui-input-inline">
<input type="text" name="cardId" required lay-verify="cardId" placeholder="请输入身份证号" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
</form>
</div>
</body>
<script>
layui.use(['layer', 'element', 'form', 'layedit'], function() {
var layer = layui.layer;
var form = layui.form;
var element = layui.element;
var layedit = layui.layedit;
$(function() {
$("#butt").click(function() {
layer.open({
type: 1,
title: "注册页面",
area: ['600px', '700px'],
offset: '20px',
content: $("#gb"),
cancel: function() {
// 你点击右上角 X 取消后要做什么
setTimeout('window.location.reload()', 1);
},
success: function() {
form.on('submit(formDemo)', function(data) {
});
}
})
form.render();
})
//验证输入的密码是否相同；
$("#pass2").blur(function() {
var pass1 = $("#pass1").val();
var pass2 = $("#pass2").val();
if(pass1 != pass2) {
layer.msg("两次输入的密码不一致", {
"icon": 2,
"time": 2000
});
$("#pass2").val("");
return false;
}
return true;
});
});
//创建一个编辑器
var editIndex = layedit.build('LAY_demo_editor');
//自定义验证规则
form.verify({
title: function(value) {
if(value.length < 5) {
return '标题至少得5个字符啊';
}
},
pwd: [
/^(\w){6,20}$/, '只能输入6-20个字母、数字、下划线'
],
emails: [
/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/, '请输入正确的邮箱格式：<br>如：该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。<br>该邮件地址已受到反垃圾邮件插件保护。要显示它需要在浏览器中启用 JavaScript。等格式'
],
phones: [
/^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])\d{8}$/, '您的输入有误，请重新输入(中国11位手机号)'
],
truename: [
/^[\u4e00-\u9fa5]{2,4}$/, '您的输入有误，请输入2-4位中文'
],
cardId: [
/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, '请输入正确的身份证号'
],
content: function(value) {
layedit.sync(editIndex);
}
});
});
</script>
</html>