layui——表单_layui form 获取表单的action-优快云博客

本文链接：https://blog.youkuaiyun.com/yilia_jia/article/details/83308655

本文介绍了一个详细的用户信息表单设计，包括用户类型、用户名、昵称、邮箱、手机、密码等字段，并展示了如何使用layui框架进行前端验证，确保输入数据的正确性和一致性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
});