semantic UI—表单验证

0.页面加入支持

由于项目中用到了thymeleaf模板引擎，所以下面代码需要在页码头文件中加入命名约束
加入semantic UI 的css和jQuery支持
- [CSS] https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css
- [jQuery] <script src="https://cdn.jsdelivr.net/npm/jquery@3.2.1/dist/jquery.min.js"></script>
- [semantic.js] <script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>

1.前端“admin_editUser.html”

<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>semantic UI表单验证</title>
</head>

页面body部分代码

<form class="ui large form" > 
    <div class="ui segment">
        <div class="field">
            <div class="ui left icon input">
                <i class="user icon"></i>
                <input type="hidden" th:value="${userOne.id}" name="id">
                <input type="text" name="userName" th:value="${userOne.userName}" placeholder="用户名">
            </div>
        </div>
        <div class="field">
            <div class="ui left icon input">
                <i class="lock icon"></i>
                <input type="password" name="passWord" placeholder="新密码">
            </div>
        </div>
        <div class="field">
            <div class="ui left icon input">
                <i class="lock icon"></i>
                <input type="password" name="repassWord" placeholder="再次输入">
            </div>
        </div>
        <div class="field">
            <div class="ui left icon input">
                <i class="envelope icon"></i>
                <input type="email" name="email" th:value="${userOne.email}" placeholder="邮箱">
            </div>
        </div>
        <div class="field">
            <div class="ui left icon input">
                <i class="images icon"></i>
                <input type="text" name="avatar" th:value="${userOne.avatar}" placeholder="头像URL">
            </div>
        </div>
        <button class="ui fluid large teal submit button" name="sub_btn" style="text-align: center">修&nbsp;改</button>
    </div>
    <!--前端：存放错误记录提示-->
    <div class="ui mini error message"></div>
</form>

View Code