寫了一個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>如：xxx@qq.com<br>xxx@163.com等格式' ], 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>