Javascript 如何解析thymeleaf中的正则表达式？

我使用的是spring boot+thymeleaf。当我收到有效的电子邮件时，就会遇到问题。 这是我的代码：

<script th:inline="javascript">
    $("#button-edit-user").click(function() {           
        var errorValidMail = [[#{page.create.user.message.email}]];
        var userId = [[${user.userId}]];
        if (email == "") {
            $('#error-email').text([[#{page.create.user.message.field}]]);
        } else {
            var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
            if (!re.test(String(email).toLowerCase())) {
                $('#error-email').text(errorValidMail);
            } else {
                checkEmail = true;
                $('#error-email').empty();
            }
        }

        if (checkEmail && checkUsername && checkFullname) {
            $.post("/check/edit", {username: username, email: email})
                .done(function (data) {
                    if (data.length == 2) {
                        $('#error-username').text("既にこのユーザー名が存在しています。");
                        $('#error-email').text("既にこのメールアドレスが存在しています。");
                    } else if (data.length == 1) {
                        if (data[0] == 1) {
                            $('#error-username').text("既にこのユーザー名が存在しています。");
                        } else {
                            $('#error-email').text("既にこのメールアドレスが存在しています。");
                        }
                    } else {
                        $('#button-create-user').attr("disabled", true);
                        $('#alert-edit-user-success').append('<div class="alert alert-success" role="alert">' + [[#{page.profile.user.message.update.success}]] + '</div>');
                        $('#alert-edit-user-success').show().fadeOut(4000);
                        // $("#form-create-user").submit();
                    }
                });
        }
    });
</script>

---

这个错误经常发生在我的项目中，或者给我一个解决方案。

以这种方式简单地使用模式

 <div class="md-form">
        <i class="fa fa-lock prefix"></i>
        <input class="form-control validate" id="passwordField" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
               th:required="required"
               title="Must contain at least one number, one uppercase and lowercase letter, at least 8 or more characters and not Not Recently Used"
               type="password">
        <label>Password</label>
    </div>

密码

对不起，我想通过JS验证。

 <div class="md-form">
        <i class="fa fa-lock prefix"></i>
        <input class="form-control validate" id="passwordField" pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}"
               th:required="required"
               title="Must contain at least one number, one uppercase and lowercase letter, at least 8 or more characters and not Not Recently Used"
               type="password">
        <label>Password</label>
    </div>