登录验证 · 前端技术总结

官方：http://www.layui.com/demo/form.html 版本：2.3.0 ![](https://box.kancloud.cn/300be53f908a86ee327693edf42aa9b8_651x208.jpg) > name必须（返回字段使用） > layer-filter="login" 和 lay-submit 及 form.on('submit(login)', fn) 关联使用 ~~~ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>登录</title> <link rel="stylesheet" href="/static/layui-v2.3.0/css/layui.css"> </head> <body> <div class="layui-row"> <div class="layui-col-lg4"> </div> <div class="layui-col-lg4"> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"> <legend>登录</legend> </fieldset> <div class="layui-form"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" lay-verify="username" 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="text" name="password" lay-verify="password" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label"></label> <button class="layui-btn layui-btn-normal" lay-submit lay-filter="login" type="button">登录</button> </div> </div> </div> </div> <script src="/static/layui-v2.3.0/layui.js"></script> <script> layui.use(['form'], function(form){ // 验证 form.verify({ username: function(value){ if(!value.trim()){ return '用户名没有填写~'; } }, password: [/(.+){6,12}$/, '密码必须6到12位~'] }); // 登录 form.on('submit(login)', function(res) { console.log(res); }); }); </script> </body> </html> ~~~