Springboot之表单验证

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yhflyl/article/details/84987204

实体类

@TableName("lh_admin")
public class Admin extends Model<Admin> {

    private static final long serialVersionUID = 1L;

    /**
     * 管理员ID
     */
	@TableId(value="admin_id", type= IdType.AUTO)
	private Integer adminId;
    /**
     * 用户名
     */
    @NotEmpty(message="用户姓名不能为空")
    @Size(min = 2, max = 4, message = "用户长度要大于2，小于4")
	@TableField("admin_user")
	private String adminUser;
    /**
     * 密码
     */
	@NotNull(message = "密码不能为空")
	@TableField("admin_password")
	private String adminPassword;
    /**
     * 创建时间
     */
	@TableField("admin_create_time")
	private Date adminCreateTime;
    /**
     * 是否被锁定 0 未锁定 1 锁定
     */
	@TableField("admin_locked")
	private String adminLocked;
    /**
     * 最新登录时间
     */
	@TableField("admin_update_time")
	private Date adminUpdateTime;
    /**
     * 创建者ID
     */
	@TableField("admin_create_user_id")
	private Integer adminCreateUserId;
    /**
     * 手机号
     */
	@Size(min = 11, max = 11, message = "手机号格式不对")
	@TableField("admin_phone")
	private String adminPhone;
    /**
     * 邮箱
     */
	@TableField("admin_email")
	private String adminEmail;
    /**
     * 加密盐值
     */
	@TableField("admin_salt")
	private String adminSalt;
    
    /* 省略get、set方法和构造函数(默认构造、所有属性的构造函数) */
}

Mapper层方法

@Mapper
public interface AdminMapper extends BaseMapper<Admin> {

}

Servcie层

public interface AdminService extends IService<Admin> {
	
}

Service实现类

@Service
public class AdminServiceImpl extends ServiceImpl<AdminMapper, Admin> implements AdminService {
    
}

控制器层

@Controller
@RequestMapping("/admin")
public class UserController {
    
    private final static Logger logger = LoggerFactory.getLogger(UserController.class);

    @Autowired
    private AdminService adminService;
    
    @PostMapping("/author/user/submit_add")
    @ResponseBody
    public JsonResult adminSubmit(@Valid Admin admin, BindingResult result, HttpSession session){
        // 这个要注意不能使用 result.hasErrors(),是无法回数据的，不走if判断。
        if (result.hasFieldErrors()) {
            // JsonResult 是一个接口数据的封装类
            return new JsonResult(ResultCode.FAIL, result.getFieldError().getDefaultMessage());
        }else{
            Admin session_admin = (Admin) session.getAttribute("admin");
            admin.setAdminCreateTime(new Date());
            admin.setAdminUpdateTime(new Date());
            admin.setAdminCreateUserId(session_admin.getAdminId());
            logger.info("增加的用户信息+"+admin);
            adminService.insert(admin);
            return new JsonResult();
        }
    }
}

前段HTML

<!-- layui的表单组件 -->
<div class="layui-container">
    <form class="layui-form" onsubmit="return false;">
        <div class="layui-form-item">
            <label class="layui-form-label">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="adminUser" autocomplete="off" placeholder="请输入用户名" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码</label>
            <div class="layui-input-block">
                <input type="password" name="adminPassword" autocomplete="off" placeholder="请输入密码" 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="adminPhone" lay-verify="phone|number" autocomplete="off" placeholder="请输入手机号" 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="adminEmail" 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-block">
                <input type="checkbox" name="adminLocked" lay-skin="switch" lay-filter="switchTest" lay-text="ON|OFF">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">盐值</label>
            <div class="layui-input-block">
                <input type="text" name="adminSalt" autocomplete="off" placeholder="请输入标题" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" id="data_sub">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
</body>
<script type="text/javascript" th:inline="javascript">
    // 获取项目名
    const context = [[${#httpServletRequest.getContextPath()}]];
	// 提示框的函数
    function error_tipe(error_hint) {
        layer.msg(error_hint, {
            icon: 5,
            time: 2000 //2秒关闭（如果不配置，默认是3秒）
        }, function(){
            return false;
        });
    }
	
    layui.use(['form'], function() {
        var form = layui.form
            ,layer = layui.layer;

        $("#data_sub").click(function() {
			
            let adminUser = $("input[name='adminUser']").val();
            let adminPassword = $("input[name='adminPassword']").val();
            let adminPhone = $("input[name='adminPhone']").val();
            let adminEmail = $("input[name='adminEmail']").val();
            let adminLocked = $("input[name='adminLocked']").val();
            let adminSalt = $("input[name='adminSalt']").val();

            if(adminUser.length < 2 || adminUser.length > 5) {
                error_tipe("用户名不能少于2个字符或者超过5个字符");
                return false;
            }
            if(adminPassword.length < 6 || adminPassword.length > 12) {
                error_tipe("密码长度不能少于6个字符或者超过12个字符");
                return false;
            }
            if(adminSalt.length < 2 || adminSalt.length > 4) {
                error_tipe("用户名不能少于2个字符或者超过5个字符");
                return false;
            }

            let data_sub = {
                "adminUser": adminUser,
                "adminPassword": adminPassword,
                "adminPhone": adminPhone,
                "adminEmail": adminEmail,
                "adminLocked": adminLocked == "on" ? '1' : '0',
                "adminSalt": adminSalt
            };

            console.log(data_sub);

            $.post(context+"/admin/author/user/submit_add", data_sub, function(res) {
                if(res.code == 205){
                    error_tipe(res.msg);
                }else if(res.code == 200){
                    layer.msg("添加成功！", {
                        icon: 1,
                        time: 2000 //2秒关闭（如果不配置，默认是3秒）
                    }, function(){
                        // 刷新父页面的
                        location.href = context+'/admin/author/user';
                        var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        parent.layer.close(index); //再执行关闭
                    });
                }
            })

        })
    })
</script>