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

2.表单验证

<script>
    /*表单验证*/
$(document)
    .ready(function() {
        $('.ui.form')
            .form({
                fields: {
                    userName: {  //userName是表单name属性值
                        identifier  : 'userName',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '用户名不能为空'
                            }
                        ]
                    },
                    passWord: {
                        identifier  : 'passWord', //表单中的name属性值
                        rules: [
                            {
                                type   : 'length[6]',
                                prompt : '密码必须至少6个字符'
                            }
                        ]
                    },
                    repassWord:{
                        identifier  : 'repassWord',
                        rules: [
                            {
                                type   : 'match[passWord]', //match[name属性值]
                                prompt : '两次的密码必须一致'
                            }
                        ]
                    },
                    email:{
                        identifier:'email',
                        rules:[
                            {
                                type   : 'email',
                                prompt : '请输入合法邮箱'
                            }
                        ]
                    },
                    avatar:{
                        identifier:'avatar',
                        rules:[
                            {
                                type:'url',
                                prompt:'URL地址错误'
                            }
                        ]
                    }
                }
            });
    });
</script>

View Code

官网连接：https://semantic-ui.com/behaviors/form.html