spring form标签的使用

---

前言

个人学习记录
涉及技术：jsp spring spring mvc JSR-349
关键的点：

1. 跳到页面的控制器入参要指定@ModelAttribute("provider")Provider provider
2. 页面要标明模型对象属性： <fm:form cssClass="layui-form" method="post" modelAttribute="provider">xxx</fm:form>
3. 根据相同url地址不同提交方式跳转，fm标签不用指定action:@GetMapping("/addTagProvider") @PostMapping("/addTagProvider")

---

一、spring form 标签和JSRxxx数据格式验证

1. spring form 标签是结合 spring mvc从控制器返回的ModelAndVeiw中取出数据的标签，该工具为浏览器页面的数据展示提供了便捷
2. JSR303 是JAVA 为 bean 数据合法性校验提供的标准框架 网上说更新到JSR-349了

二、spring表单 标签分类、属性

1.标签类别

名称	说明
<fm:from>	渲染表单元素
<fm:input/>	输入框组件标签
<fm:password>	密码框组件标签
<fm:hidden>	隐藏框组件标签
<fm:textarea>	多行输入框组件标签
<fm:radiobutton>	单选框组件标签
<fm:checkbox>	复选框组件标签
<fm:select>	下拉列表组件标签
<fm:error>	显示表单数据校验所应对的错误信息

2.标签属性

名称	说明
Path	表单对象属性 ，如 userName
cssClass	组件对应css样式类名
cssErrorClass	报错的cssy样式
cssStyle	组件对象的css样式
htmlEscape	特殊字符转义，默认true

三、 JSRxxx约束

约束	说明
@Null	必为空
@NotNull	不为空
@AssertTrue	必为ture
@AssertFalse	必为false
@Min(value)	数字并大于等于指定值
@Max(value)	数字并小于等于指定值
@DecimalMin(value)	小数并大于等于指定值
@DecimalMax(value)	小数并小于等于指定值
@Size(max,min)	大小在max min之间
@Digits(Integer,fraction)	数字，在可接受范围内
@Past	过去的日期
@Futrue	将来的日期
@Pattern	符合指定的正则表达式

四、结合JSRXXX约束使用步骤

1. maven pom.xml需要的JSR依赖

 <dependency>
            <groupId>org.hibernate.validator</groupId>
            <artifactId>hibernate-validator</artifactId>
            <version>6.0.5.Final</version>
 </dependency>
<dependency>
            <groupId>javax.validation</groupId>
            <artifactId>validation-api</artifactId>
            <version>2.0.1.Final</version>
</dependency>

2. 表对象属性上加约束

  /**
     * 供应商名称
     */
    @NotEmpty(message = "供应商名称不能为空")
    private String proName;

    /**
     * 供应商详细描述
     */
    private String proDesc;

    /**
     * 供应商联系人
     */
    @NotEmpty(message = "联系人不能为空")
    private String proContact;

    /**
     * 联系电话
     */
    @Length(max = 11,min =11,message = "请输入正确格式的手机号")
    private String proPhone;

3. 控制器指定@ModelAttribute

@GetMapping("/addTagProvider")
public String addTagProvider(@ModelAttribute("provider")Provider provider){
        return "provider/addTagProvider";
}

4. 在JSP页面引入spring form 标签库

<%@ taglib prefix="fm" uri="http://www.springframework.org/tags/form"%>

5. 表单元素添加标签属性

fm:标签指定 modelAttribute 这里是js跳转 也可以action跳转

<div class="layui-container">
        <fieldset class="layui-elem-field">
            <legend>添加供应商</legend>
            <div class="layui-field-box">
                <fm:form cssClass="layui-form" method="post" modelAttribute="provider">
                    <div class="layui-form-item">
                        <div class="layui-form-label">
                            供应商编码：
                        </div>
                        <div class="layui-input-inline layui-col-md8">
                            <fm:input path="proCode" name="proCode" cssClass="layui-input"/>
                        </div>
                        <div class="layui-form-mid layui-col-md5">
                            <fm:errors path="proCode" cssClass="layui-font-red"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-label">
                            供应商名称：
                        </div>
                        <div class="layui-input-inline layui-col-md8">
                            <fm:input path="proName" name="proName" cssClass="layui-input"/>
                        </div>
                        <div class="layui-form-mid layui-col-md5">
                            <fm:errors path="proName" cssClass="layui-font-red"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-label">
                            联系人：
                        </div>
                        <div class="layui-input-inline">
                            <fm:password path="proContact" name="proContact" cssClass="layui-input"/>
                        </div>
                        <div class="layui-form-mid layui-col-md5">
                            <fm:errors path="proContact" cssClass="layui-font-red"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-label">
                            联系电话：
                        </div>
                        <div class="layui-input-inline">
                            <fm:input path="proPhone" cssClass="layui-input" name="proPhone"/>
                        </div>
                        <div class="layui-form-mid layui-col-md5">
                            <fm:errors path="proPhone" cssClass="layui-font-red"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-label">
                            联系地址：
                        </div>
                        <div class="layui-input-inline">
                            <fm:input path="proAddress" cssClass="layui-input" name="proAddress"/>
                        </div>
                        <div class="layui-form-mid layui-col-md5">
                            <fm:errors path="proAddress" cssClass="layui-font-red"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-label">
                            传真：
                        </div>
                        <div class="layui-input-block layui-col-md5" style="margin-left: 0">
                           <fm:input path="proFax" name="proFax" cssClass="layui-input"/>
                        </div>
                        <div class="layui-form-mid layui-col-md5">
                            <fm:errors path="proFax" cssClass="layui-font-red"/>
                        </div>
                    </div>
                    <div class="layui-form-item">
                        <div class="layui-form-label">
                            描述：
                        </div>
                        <div class="layui-input-block layui-col-md5" style="margin-left: 0">
                            <fm:input path="proDesc" name="proDesc" cssClass="layui-input"/>
                        </div>
                        <div class="layui-form-mid layui-col-md5">
                            <fm:errors path="proDesc" cssClass="layui-font-red"/>
                        </div>
                    </div>
                    <input type="submit" class="layui-btn layui-btn-normal" value="保存"/>
                </fm:form>
            </div>
        </fieldset>
    </div>

6. 提交后的控制器进行JSRxxx校验

@PostMapping("/addTagProvider")
    public String addTagProvider(@Valid Provider provider, BindingResult result,HttpSession session){
        if(result.hasErrors()){
            log.info("add provider has errors");
            return "provider/addTagProvider";
        }
        if(providerService.addProvider(provider)){
            return "provider/listProvider";
        }
        return "provider/addTagProvider";
   }

7. 如果有错误 fm:errors将显示校验信息

---

结语

子曰：“君子食无求饱，居无求安，敏于事而慎于言，就有道而正焉，可谓好学也已。”《论语》

孔子说：“君子饮食不求满足，居处不求舒适，勤勉做事而说话谨慎，到有贤德的人那里去匡正自己，可以说是好学的了。”