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">修 改</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>
