使用layui+thymeleaf前端表单验证

废话不多，直接上代码

html页面代码：

<div class="register-container">
        <div class="register-banner">
            <img src="/img/logo.png"/>
        </div>
        <label class="error error-label">[[${lmr?.msg}]]</label>
        <form action="/manage/submitRegister" method="post" class="register-form" id="register-form">
            <li>
                <input type="text" name="account" id="account" th:value="${account}" placeholder="请输入账号" required="true" autocomplete="off" />
                <span id="accountTS"></span>
            </li>
            <li>
                <input type="text" name="name" id="name" th:value="${name}" placeholder="请输入姓名" required="true" autocomplete="off" />
                <span id="nameTS"></span>
            </li>
            <li>
                <input type="text" name="email" id="email" th:value="${email}" placeholder="请输入邮箱" required="true" autocomplete="off" />
                <span id="emailTS"></span>
            </li>
            <li>
                <input type="password" name="pwd" th:value="${pwd}" id="pwd1" placeholder="请输入密码" required="true" autocomplete="off"/>
            </li>
            <li>
                <input type="password" name="pwdtwo" th:value="${pwdtwo}" id="pwd2" placeholder="请输入重复密码" required="true" autocomplete="off"/>
                <span id="pwd2TS"></span>
            </li>
            <li>
                <div class="div-select">
                    <select name="departmentId" autocomplete="off" >
                        <option  class="option-color" th:value="-1" >---请选择部门---</option>
                        <option  class="option-color" th:each="dep:${tDepartmentList}" th:value="${dep.id}" th:text="${dep.name}"></option>
                    </select>
                    <span id="departmentTS"></span>
                </div>
            </li>
            <li>
                <button type="submit " id="submit">注册账号</button>
                <button type="button" onclick="history.go(-1);">取消</button>
            </li>
        </form>
    </div>

    <script type="text/javascript" src="js/common/jquery-3.4.1.min.js"></script>
    <script type="text/javascript" src="js/register.js"></script>

js文件代码：

// 定义开关变量
var flagAccount = false;
var flagPwd = false;
var flagEmail = false;
var flagDepartment = false;
$(function () {
    //获取标签元素
    let $account = $('#account');
    let $email   = $('#email');
    let $pwd     = $('#pwd1');
    let $pwd2    = $('#pwd2');
    let $registerForm  = $('#register-form');

    // 校验用户账号，用户姓名系统允许重名，但是账号不允许重复
    $account.focus(function () {
        $('#accountTS').html('');
    })
    $account.blur(function () {
        let accountVal = $account.val();
        $.ajax({
            url:'/validate/register/validateAccount',
            type:'GET',
            async:true,
            data: {
                account:accountVal
            },
            success:function(result) {
                if (result.code != 200) {
                    $('#accountTS').html(result.msg);
                    flagAccount = false;
                } else {
                    flagAccount = true;
                }
            },
            error:function(result) {
                $('#accountTS').html(result.msg);
            }
        });
    });

    //校验两次输入的密码是否一致
    $pwd2.focus(function () {
        $('#pwd2TS').html('');
    });
    $pwd2.blur(function() {
        let pwdVal = $pwd.val();
        let pwd2Val = $pwd2.val();
        if (pwdVal != pwd2Val){
            $('#pwd2TS').html('密码不一致');
            flagPwd = false;
        } else {
            flagPwd = true;
        }
    });

    //邮箱校验
    $email.focus(function () {
        $('#emailTS').html('');
    })
    $email.blur(function(){
        //校验邮箱格式是否正确
        let regExp = /^[a-z0-9][\w\.\-]*@[a-z0-9\-]+(\.[a-z]{2,5}){1,2}$/i;
        let emailVal = $email.val();
        if(!regExp.test(emailVal)) {
            $('#emailTS').html('邮箱格式错误');
            flagEmail = false;
        } else {
            flagEmail = true;
            //校验邮箱是否已注册
            $.ajax({
                url:'/validate/register/validateEmail',
                type:'GET',
                data: {
                    email:emailVal
                },
                success:function(result){
                    if (result.code != 200) {
                        $('#emailTS').html(result.msg);
                        flagEmail = false;
                    } else {
                        flagEmail = true;
                    }
                },
                error:function(result){
                    $('#emailTS').html(result.msg);
                }
            })
        }
    })

    //校验部门
    $('select').change(function () {
        $('#departmentTS').html('');
    });

    $registerForm.submit(function() {
        if(flagAccount && flagPwd && flagEmail && $('select').val() != '-1') {
            return true;
        }
        else {
            if (!flagAccount) {
                $('#accountTS').html('账号校验失败');
            }
            if (!flagPwd) {
                $('#pwd2TS').html('密码校验失败');
            }
            if (!flagEmail) {
                $('#emailTS').html('邮箱校验失败');
            }
            if ($('select').val() == '-1') {
                $('#departmentTS').html('尚未选择部门');
            }
            return false;
            let email=$email.val()
            let name = $name.val()
            $.ajax({
                url:'/manage/registered/detectrepeat/sendemail',
                type:'GET',
                async:true,
                timeout:5000,
                data: {
                    email:email,
                    name: name
                },
                success:function(data){//请求成功之后的返回结果
                },
                error:function(xhr,textStatus){//请求失败之后的返回错误信息
                    console.log('错误',xhr.responseText);
                    console.log(xhr);
                    console.log(textStatus);
                }
            })
        }
    })
})