layui——表单

你的名字 2022-05-12 14:04 200阅读 0赞

<form class="layui-form" action="">
        <div class="layui-form-item">
            <label class="layui-form-label">用户类型</label>
            <div class="layui-input-block">
                <input type="radio" name="type" id="guest" value="0" title="注册用户" checked="">
                <input type="radio" name="type" id="vip" value="1" title="vip用户">
                <input type="radio" name="type" id="admin" value="2" title="管理员用户">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-inline">
                <input type="text" name="userName" id="userName" lay-verify="title" autocomplete="off" placeholder="请输入用户名" 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="nickname" id="nickname" lay-verify="title" autocomplete="off" placeholder="请输入昵称" 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="email" id="email" lay-verify="email" autocomplete="off" placeholder="请输入邮箱" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">手机</label>
            <div class="layui-input-inline">
                <input type="tel" name="cellphone" id="cellphone" lay-verify="phone" autocomplete="off" placeholder="请输入手机" 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" id="password" lay-verify="newPwd" placeholder="请输入密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">请填写6到12位密码</div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">确认密码</label>
            <div class="layui-input-inline">
                <input type="password" name="rePassword" id="rePassword" lay-verify="confirmPwd" placeholder="请确认密码" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">请填写密码一致</div>
        </div>
    
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="userSubmit">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
            </div>
        </div>
    </form>

//添加验证规则
    form.verify({
        newPwd : function(value, item){
            if(value.length < 6){
                return "密码长度不能小于6位";
            }
        },
        confirmPwd : function(value, item){
            if(!new RegExp($("#password").val()).test(value)){
                return "两次输入密码不一致，请重新输入！";
            }
        }
    });

form.on('submit(userSubmit)', function(data){
        $.ajax({
            type: "post",
            url: ipAddress + "admin/user/create",
            dateType: "text",
            data: data.field,
            success: function (data) {
                if (data.status == "1") {
                    layer.open({
                        title: ''
                        ,content: '保存成功！'
                        ,yes: function(index, layero){
                            var index = parent.layer.getFrameIndex(window.name);
                            parent.layer.close(index);
                            window.parent.location.reload();
                        }
                    });
    
                } else {
                    layer.open({
                        title: ''
                        ,content: '保存失败！'
                    });
                }
            },
            error: function () {
                return;
            },
            async: true
        });
        return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
    });