Semantic-UI进行前端的表单的验证功能

Posted 2021-07-03 SmallCuteMonkey

1. 必须引入Semantic-ui.css和.js
2. 必须引入Jquery.min.js

相关的步骤：
3.

script>
    $('.ui.form').form({
        fields:{
            /*对里面的title的输入进行相关的验证，
            * type: 验证是否为空*/
            username:{
                identifier:'username',
                rules:[{

                    type:'empty',
                    //这个提示需要加入 .ui.erro.message 放在一个容器中进行显示
                    prompt:'请输入用户名'
                }]

            },
            password:{
                identifier:'password',
                rules:[{

                    type:'empty',
                    //这个提示需要加入 .ui.erro.message 放在一个容器中进行显示
                    prompt:'请输入用户密码'
                }]

            },

        }

    });

</script>

也就是取到class属性 ui 和form

4. form 表单

	<form action="#" method="post" th:object="${type}" class="ui form"  th:action="@{/admin/types}">



			<!--				required 要求进行相关的输入-->
<!--			.required.field>.ui.left.labeled.input>.ui.compact.teal.basic.label+input-->
			<div class=" required field">
				<input type="hidden" name="id" th:value="*{id}">

				<div class="ui left labeled input">
					<label class="ui compact teal basic label"  > 名称</label>
<!--					th:value="*{name}"-->
<!--					th:value="${editType.get().getName()}"-->
					<input type="text" name="name"   placeholder="分类名称" th:value="*{name}" >
				</div>
			</div>







			<div class="ui error message"></div>


<!--后端的校验进行消息的显示，thymleaf中的模板可以进行识别，但是html是不起作用的-->

<!--			-->
<!--/*/

<div class="ui negative message" th:if="${#fields.hasErrors('name')}">
				<i class="close icon"></i>
				<div class="header">验证失败</div>
				<p th:errors="*{name}">提交的信息不符合规则</p>
			</div>
 /*/-->






			<!--			三个按钮-->
			<!--			容器可以向右对齐-->
			<div class="ui right aligned container">
				<!--				οnclick="window.history.go(-1)"点出返回上一个页面-->
				<!--				类型声明一下，type默认是submit-->
				<button type="button" class="ui button" onclick="window.history.go(-1)">返回</button>

				<button class="ui teal submit button">提交</button>

			</div>
		</form>

2. 把相关的错误信息进行显示

<div class="ui error message"></div>

这个显示的信息可以放到你想要显示的地方，弹出颜色是粉红色。