<form class="layui-form" action="" id="login_form" lay-filter="login_form">
                    <div class="layui-form-item">
                        <label class="layui-form-label">手机号
                            <i class="layui-icon layui-icon-cellphone"></i>
                        </label>
                        <div class="layui-input-block">
                            <input type="text" lay-verify="required|phone|number" name="username" lay-verify="title"
                                autocomplete="off" placeholder="请输入手机号" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <label class="layui-form-label">密码
                            <i class="layui-icon layui-icon-password"></i>
                        </label>
                        <div class="layui-input-block">
                            <input type="password" name="password" placeholder="请输入密码" autocomplete="off"
                                class="layui-input">
                        </div>
                    </div>
                    <center>
                        <legend>请使用手机号登陆,首次登陆将自动注册,密码请牢记</legend>
                        <legend>忘记密码请联系管理员找回</legend><br>
                        <legend><button class="layui-btn layui-btn-normal" lay-filter="login_button" lay-submit="">登陆</button>
                        </legend>
                    </center>                
                </form>
  • button代码需要位于form表单内部
  • button 必须含有 lay-submit=""属性
<button class="layui-btn layui-btn-normal" lay-filter="login_button" lay-submit="">登陆</button>
    layui.use(['layer', 'jquery', 'element', 'form'], function (args) {
        var $ = layui.jquery, layer = layui.layer, element = layui.element, form = layui.form;
        form.on('submit(login_button)', function (data) {
            console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value}
            return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。
        });

    });
form.on('submit(login_button)', function (data) {
}
  • sumbit表示form的提交事件
  • 参数接受为button的lay-filter的属性
  • data.field 表单数据
  • return false; 阻止表单提交,否则将携带form的数据,get请求API
Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐