1.页面引入layui.js和layui.css
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>手机银行权限配置</title> <link type="text/css" href="https://www.jb51.net/common/layui/css/layui.css" /> <link type="text/css" href="https://www.jb51.net/css/index.css" /> <link href="https://www.jb51.net/images/favicon.ico" /> </head> <body> <br> <h1>新版手机银行权限动态配置</h1> <br> <div> <div> <label>交易类型</label> <div> <select lay-searchlay-filter="type"> <option value="InlineTransfer">行内转账交易</option> <option value="InlineBookTransfer">行内预约转账</option> <option value="SavToSavAuthPwd">行内同名转账</option> <option value="IntercityTransfer">跨行转账交易</option> <option value="IntercityBookTransfer">跨行预约转账</option> <option value="WeiXinTransfer">微信转账交易</option> </select> </div> </div> <div> <label>要配置的注册类型</label> <div> <select lay-search lay-filter="type"> <option value="T">T</option> <option value="S">S</option> <option value="R">R</option> </select> </div> </div> <button>开始配置</button> </div> <div> <form action="update" method="post"> <input type="hidden"/> <input type="hidden"/> <br> <h2>默认规则</h2> <hr> <div> <label>支持的账户注册类型</label> <div> <input type="checkbox" title="T类" value="T" > <input type="checkbox" title="S类" value="S" > <input type="checkbox" title="R类" value="R" > </div> </div> <div> <label>支持的最小版本号</label> <div> <input type="text" required lay-verify="required" placeholder="请输入支持的最小版本号" autocomplete="off"> </div> </div> <br> <h2>静态规则</h2> <hr> <div> <label>人脸识别</label> <div> <select lay-search> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <div> <label>短信验证码</label> <div> <select lay-search> <option value="0">不需要</option> <option value="1">需要</option> <option value="2">免短信</option> </select> </div> </div> <div> <label>交易密码</label> <div> <selectlay-search> <option value="0">不需要</option> <option value="1">需要</option> <option value="2">免密</option> </select> </div> </div> <div> <label>支持的账户种类</label> <div> <input type="checkbox" title="I类户" value="01"> <input type="checkbox" title="II类户" value="02"> <input type="checkbox" title="III类户" value="03"> </div> </div> <div> <label>II类户配卡情况</label> <div> <select lay-search> <option value="0">必须不配卡</option> <option value="1">必须配卡</option> <option value="2">配卡与否都允许</option> </select> </div> </div> <div> <label>人脸识别相似度</label> <div> <input type="number" required lay-verify="required" placeholder="请输入人脸识别相似度" autocomplete="off"> </div> </div> <div> <label>指纹识别</label> <div> <select lay-search> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <br> <br> <h2>动态规则</h2> <hr> <div> <label>超出日限额人脸识别</label> <div> <select lay-search> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <div> <label>超出日限额指纹识别</label> <div> <select lay-search> <option value="0">不需要</option> <option value="1">需要</option> </select> </div> </div> <div> <label>启用图形验证码次数</label> <div> <input type="number" required lay-verify="required" placeholder="请输入启用图形验证码的次数" autocomplete="off"> </div> </div> <div> <label>可替换方式</label> <div> <select lay-search lay-filter="sit"> <option value="">请选择替换方式</option> <option value="AB">人脸识别和短信验证码可替换</option> <option value="AC">人脸识别和交易密码可替换</option> <option value="AD">人脸识别和指纹识别可替换</option> <option value="BC">短信验证码和交易密码可替换</option> <option value="BD">短信验证码和指纹识别可替换</option> <option value="CD">交易密码和指纹识别可替换</option> </select> </div> </div> <br> <hr> <br> </form> <div> <div> <div> <button>立即提交</button> </div> </div> </div> <br><br> </div> <br> <br> <br> <br> <br> <script type="text/javascript" src="https://www.jb51.net/common/jquery/jquery.js"></script> <script type="text/javascript" src="https://www.jb51.net/common/layui/layui.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/index.js"></script> </body> </html>
2.页面js中要进行layui模块的初始化