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">修 改</button> </div> <!--前端：存放錯誤記錄提示--> <div class="ui mini error message"></div> </form>
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>