AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

SpringMVC的form表单标签使用(八)下

2021-12-28 384
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： SpringMVC的form表单标签使用(八)

五. 复选框


复选框与单选框的用法，几乎是一样的。 这里也简单讲解一下。


五.一 单个复选框 form:checkbox


属性：

2019082911384247.png

1 . 存放的是单值， 如 是否同意协议 这样的单个复选框。 为boolean 类型的值。


@RequestMapping(value="toLogin")
  public String toLogin(Model model){
    User user=new User();
    user.setName("老蝴蝶");
    //设置性别为 男
    user.setAgree(true);
    model.addAttribute("user",user);
    return "user/login";
  }


前端页面展示:


<form:label path="agree"> 是否同意协议:</form:label>
    <!-- 注意，path用的是agree,而不是isAgree. 这就是boolean 属性值的区别 -->
    <form:checkbox path="agree"/>


前端展示:


20190829113915959.png


源代码处理为:


<label for="agree"> 是否同意协议:</label>
<input id="agree1" name="agree" type="checkbox" value="true" checked="checked"/><input type="hidden" name="_agree" value="on"/>


多添加了一个隐藏域 为_agree的值。


2 . 绑定多个单值， 与radiobutton 是一致的。


后端:


@RequestMapping(value="toLogin")
  public String toLogin(Model model){
    User user=new User();
    user.setName("老蝴蝶");
    //设置爱好集合。
    List<String> hobby=new ArrayList<String> ();
    hobby.add("打游戏");
    hobby.add("编程");
    user.setHobby(hobby);
    model.addAttribute("user",user);
    return "user/login";
  }


前端展示:


<form:label path="hobby"> 爱好:</form:label>
    <!--用label来代替显示值 -->
    <form:checkbox path="hobby" value="读书" label="读书"/>
    <form:checkbox path="hobby" value="编程" label="编程"/>
    <form:checkbox path="hobby" value="打游戏" label="打游戏"/>
    <form:checkbox path="hobby" value="写作" label="写作"/>


前端回显展示:


20190829113924999.png


绑定 int值，与上面的是一样的。 不详细介绍了。


可以将前台的爱好集合，也从后端读取。 这样，需要用复选框的集合形式。


五.二 单个复选框 form:checkboxes


属性有:


20190829120802347.png


1 . 存储集合的形式， 单值的样式。


@RequestMapping(value="toLogin")
  public String toLogin(Model model){
    User user=new User();
    user.setName("老蝴蝶");
    //设置爱好集合。
    List<String> hobby=new ArrayList<String> ();
    hobby.add("打游戏");
    hobby.add("编程");
    user.setHobby(hobby);
    model.addAttribute("user",user);
    //后端返回 爱好的集合。 应该从数据库中查询。
    List<String> hobbyList=new ArrayList<String>();
    hobbyList.add("读书");
    hobbyList.add("打游戏");
    hobbyList.add("编程");
    hobbyList.add("唱歌");
    hobbyList.add("看小说");
    model.addAttribute("hobbyList",hobbyList);
    return "user/login";
  }


前端展示为:


<form:label path="hobby"> 爱好:</form:label>
    <form:checkboxes items="${hobbyList}" path="hobby"/>


页面显示


20190829120845806.png


如果值相同，那么就进行勾选。


可以用delimiter 属性来进行分隔， 如 , 的形式。


<form:checkboxes items="${hobbyList}" path="hobby" delimiter=","/>


20190829120853780.png


2 . 存储 Map 的形式， 也是单值。


@RequestMapping(value="toLogin")
  public String toLogin(Model model){
    User user=new User();
    user.setName("精灵妹");
    //设置爱好集合。
    List<String> hobby=new ArrayList<String> ();
    hobby.add("1");
    hobby.add("4");
    hobby.add("5");
    user.setHobby(hobby);
    model.addAttribute("user",user);
    //后端返回 爱好的集合。 应该从数据库中查询。
    Map<String,String> hobbyMap=new HashMap<String,String>();
    hobbyMap.put("1","读书");
    hobbyMap.put("2","打游戏");
    hobbyMap.put("3","编程");
    hobbyMap.put("4","唱歌");
    hobbyMap.put("5","看小说");
    model.addAttribute("hobbyMap",hobbyMap);
    return "user/login";
  }


前端代码:


<form:label path="hobby"> 爱好:</form:label>
    <!--用label来代替显示值 -->
    <form:checkboxes items="${hobbyMap}" path="hobby"/>


前台展示:


2019082912091143.png


3 .存储为集合的形式， 是javaBean的样式。


添加一个角色的类，Role . 为员工配置多个角色的形式。 这里，直接将Radio 单选框的SystemConn 进行扩展后进行测试。


后端:


//转到登录的页面
  @RequestMapping(value="toLogin")
  public String toLogin(Model model){
    User user=new User();
    user.setName("精灵妹");
    //设置该员工角色的集合。
    List<Role> roles=new ArrayList<Role>();
    Role urole1=new Role();
    urole1.setId(1);
    urole1.setName("超级管理员");
    Role urole2=new Role();
    urole2.setId(4);
    urole2.setName("一般用户");
    roles.add(urole1);
    roles.add(urole2);
    user.setRoles(roles);
    model.addAttribute("user",user);
    //后端返回 角色的集合。 应该从数据库中查询。
    List<Role> roleList=new ArrayList<Role>();
    Role role1=new Role();
    role1.setId(1);
    role1.setName("超级管理员");
    Role role2=new Role();
    role2.setId(2);
    role2.setName("机构管理员");
    Role role3=new Role();
    role3.setId(3);
    role3.setName("系统管理员");
    Role role4=new Role();
    role4.setId(4);
    role4.setName("一般用户");
    roleList.add(role1);
    roleList.add(role2);
    roleList.add(role3);
    roleList.add(role4);
    model.addAttribute("roleList",roleList);
    return "user/login";
  }


前端展示:


<form:form modelAttribute="user" action="login.action" method="delete">
    <form:label path="name">姓名:</form:label>
    <form:input path="name" cssClass="red"/> <br/>
    <form:label path="roles"> 角色:</form:label>
    <!--用label来代替显示值 -->
    <form:checkboxes items="${roleList}" path="roles" itemLabel="name" itemValue="id"/>
  </form:form>


运行服务器，前端显示:


2019082912092350.png


发现，可以显示角色的集合，但是不能回显。


原因是对象不一致导致的。 role 的id 和name 虽然一一致，但是并不能说明两个对象是一致的。


可以简单做个测试。


roleList 集合中添加 urole1 对象。


roleList.add(urole1);


这时，前端展示为:


2019082912093215.png


发现， urole1, 也就是最后面的 超级管理员被选中了。 可以进行回显。


最好的做法，是重写 Role 中的hashcode（） 和equals() 方法，来表明当 id一致时， 这个角色就相同。


Role.java


package com.yjl.pojo;
public class Role {
  private Integer id;
  private String name;
  public Integer getId() {
    return id;
  }
  public void setId(Integer id) {
    this.id = id;
  }
  public String getName() {
    return name;
  }
  public void setName(String name) {
    this.name = name;
  }
  @Override
  public int hashCode() {
    final int prime = 31;
    int result = 1;
    result = prime * result + ((id == null) ? 0 : id.hashCode());
    return result;
  }
  @Override
  public boolean equals(Object obj) {
    if (this == obj)
      return true;
    if (obj == null)
      return false;
    if (getClass() != obj.getClass())
      return false;
    Role other = (Role) obj;
    if (id == null) {
      if (other.id != null)
        return false;
    } else if (!id.equals(other.id))
      return false;
    return true;
  }
}


后端处理代码:


//转到登录的页面
  @RequestMapping(value="toLogin")
  public String toLogin(Model model){
    User user=new User();
    user.setName("精灵妹");
    //设置该员工角色的集合。
    List<Role> roles=new ArrayList<Role>();
    Role urole1=new Role();
    urole1.setId(1);
    Role urole2=new Role();
    urole2.setId(4);
    roles.add(urole1);
    roles.add(urole2);
    user.setRoles(roles);
    model.addAttribute("user",user);
    //后端返回 角色的集合。 应该从数据库中查询。
    List<Role> roleList=new ArrayList<Role>();
    Role role1=new Role();
    role1.setId(1);
    role1.setName("超级管理员");
    Role role2=new Role();
    role2.setId(2);
    role2.setName("机构管理员");
    Role role3=new Role();
    role3.setId(3);
    role3.setName("系统管理员");
    Role role4=new Role();
    role4.setId(4);
    role4.setName("一般用户");
    roleList.add(role1);
    roleList.add(role2);
    roleList.add(role3);
    roleList.add(role4);
    model.addAttribute("roleList",roleList);
    return "user/login";
  }


前端的代码，是一致的。不需要改变。


<form:label path="roles"> 角色:</form:label>
    <!--用label来代替显示值 -->
    <form:checkboxes items="${roleList}" path="roles" itemLabel="name" itemValue="id"/>


测试页面展示:


20190829120941853.png


查看源代码为:


<label for="roles"> 角色:</label>
    <!--用label来代替显示值 -->
    <span><input id="roles1" name="roles" type="checkbox" value="1" checked="checked"/><label for="roles1">超级管理员</label></span><span><input id="roles2" name="roles" type="checkbox" value="2"/><label for="roles2">机构管理员</label></span><span><input id="roles3" name="roles" type="checkbox" value="3"/><label for="roles3">系统管理员</label></span><span><input id="roles4" name="roles" type="checkbox" value="4" checked="checked"/><label for="roles4">一般用户</label></span><input type="hidden" name="_roles" value="on"/>


这就是 checkboxes 的基本的用法。


六. Select 选择框


input type=“select”, 关于select 框的表现，有三种标签。 一个是 form:select, 一个是 form:option, 还有一个是form:options


这些用法，与 复选框和单选框的用法是一致的。 可以类比化使用。 这里，只简单介绍一下。


form:select 的属性展示:


20190829120950619.png


六.一 form:select 的Map 形式。 单选。


后端代码:


  //转到登录的页面
  @RequestMapping(value="toLogin")
  public String toLogin(Model model){
    User user=new User();
    user.setName("两个蝴蝶飞");
    //设置该员工角色的集合。
    user.setAddr("2");
    Map<String,String> addrMap=new HashMap<String,String> ();
    addrMap.put("1","浦东新区");
    addrMap.put("2","松江");
    addrMap.put("3","徐汇");
    addrMap.put("4","杨浦");
    model.addAttribute("user",user);
    model.addAttribute("addrMap",addrMap);
    return "user/login";
  }


前端展示:


<form:label path="roles">城市:</form:label>
    <!--用label来代替显示值 -->
    <form:select items="${addrMap}" path="addr"/>


页面展示


20190829121001185.png


select 框，可以单选，也可以进行多选。


六.二 form:select 的Map 形式， 多选。


后端:


  @RequestMapping(value="toLogin")
  public String toLogin(Model model){
    User user=new User();
    user.setName("两个蝴蝶飞");
    //设置该员工角色的集合。
    List<String> jobList=new ArrayList<String>();
    jobList.add("1");
    jobList.add("2");
    user.setJob(jobList);
    Map<String,String> jobMap=new HashMap<String,String> ();
    jobMap.put("1","Java");
    jobMap.put("2","数据库");
    jobMap.put("3","Python");
    jobMap.put("4","大数据");
    model.addAttribute("user",user);
    model.addAttribute("jobMap",jobMap);
    return "user/login";
  }


前端展示:


<form:label path="job">职业:</form:label>
    <!--不需要设置 multiple="multiple" -->
    <form:select items="${jobMap}" path="job"/>


展示:


20190829121009558.png


查看源代码:


<label for="job">职业:</label>
    <!--用label来代替显示值 -->
    <select id="job" name="job" multiple="multiple"><option value="1" selected="selected">Java</option><option value="2" selected="selected">数据库</option><option value="3">Python</option><option value="4">大数据</option></select><input type="hidden" name="_job" value="1"/>


六.三 form:option 单值选项


属性有:


20190829121028401.png


form:select 会直接将所有的选项都展示出来， 直接全部填充 option 中的值。 有的时候，不太友好 。 如 option 的开头常常有 ‘请选择’ 之类的提示语。


以单个选项值为例， 即与 addr 为例子看一下。


后端：


@RequestMapping(value="toLogin")
  public String toLogin(Model model){
    User user=new User();
    user.setName("两个蝴蝶飞");
    //设置该员工角色的集合。
    user.setAddr("2");
    Map<String,String> addrMap=new HashMap<String,String> ();
    addrMap.put("1","浦东新区");
    addrMap.put("2","松江");
    addrMap.put("3","徐汇");
    addrMap.put("4","杨浦");
    model.addAttribute("user",user);
    model.addAttribute("addrMap",addrMap);
    return "user/login";
  }


前台展示: option 是一个个手写的。


<form:label path="addr">城市:</form:label>
    <!--用label来代替显示值 -->
    <form:select path="addr">
      <!-- 单值的时候，option 与form:option 是一致的，没有差别。 -->
      <option value="">请选择</option>
      <option value="1">浦东新区</option>
      <form:option value="2">松江</form:option>
      <form:option value="3">徐汇</form:option>
      <form:option value="4">杨浦</form:option>
    </form:select>


前台样式:


20190829121106823.png


六.四 form:select 与 form:option 同时出现，显示哪一个。


后端的代码保持不变。


前端代码:


<form:label path="addr">城市:</form:label>
    <!--用label来代替显示值 -->
    <form:select items="${addrMap}" path="addr">
      <!-- 单值的时候，option 与form:option 是一致的，没有差别。 -->
      <option value="">请选择1</option>
      <option value="5">浦东新区1</option>
      <form:option value="6">松江1</form:option>
      <form:option value="7">徐汇1</form:option>
      <form:option value="8">杨浦1</form:option>
    </form:select>


样式展示:


20190829121120291.png


发现， 是以 form:select 为主， form:option 中的值不显示。


六.五 form:options


属性有:


20190829121128925.png


当选项过多的时候，又想要添加’请选择’ 选项的时候，即结合 form:select 与form:option 的优点，可以用 form:options


后端代码保持不变。


前端代码:


<form:label path="addr">城市:</form:label>
    <!--用label来代替显示值 -->
    <form:select path="addr">
      <option value="">请选择城市</option>
      <form:options items="${addrMap}"/>
    </form:select>


前端展示:



20190829121151788.png


可以将 form:option 与form:options 连用


<form:select path="addr">
      <form:option value="">请选择城市</form:option>
      <form:options items="${addrMap}"/>
    </form:select>


相同的效果。


form:select, form:options 也可以用 itemLabel itemValue ，封闭 javaBean 的对象，如Role 对象。 与form:checkboxes 一致，不要忘记重写 Role 里面的equals() 和hashCode() 方法。 这里就不举例了。


七. form:errors 标签


属性有:


20190829121215207.png


验证，会有一个专门的章节讲解。 老蝴蝶在这里简单的举个例子吧。


七.一 先写一个 User的验证器 UserValidator


package com.yjl.validator;
import org.springframework.validation.Errors;
import org.springframework.validation.ValidationUtils;
import org.springframework.validation.Validator;
import com.yjl.pojo.User;
public class UserValidator implements Validator{
  @Override
  public boolean supports(Class<?> arg0) {
    return User.class.equals(arg0);
  }
  @Override
  public void validate(Object arg0, Errors errors) {
    //后面是 提示的语句，在国际化时，需要进行提示语句的国际化
    ValidationUtils.rejectIfEmpty(errors, "name",null,"name is null");
    ValidationUtils.rejectIfEmpty(errors, "age",null,"age is null");
  }
}


七.二 后端数据处理，添加绑定验证器


  //初始化绑定
  @InitBinder  
    public void initBinder(DataBinder binder) {  
       binder.setValidator(new UserValidator());  
    }  
  //转到登录的页面
  @RequestMapping(value="toLogin")
  public String toLogin(Model model){
    User user=new User();
    user.setName("老蝴蝶");
    model.addAttribute("user",user);
    return "user/login";
  }
  //绑定到user对象。
  @RequestMapping(value="login") 
  public String login(@Validated User user, Errors errors){
    if(errors.hasFieldErrors()){ //有错误字段
      return "user/login";
    }
    return "user/list";
  }


七.三 前端显示


<h2>两个蝴蝶飞,form表单使用</h2>
  <form:form modelAttribute="user" action="login.action" method="post">
    <form:label path="name">姓名:</form:label>
    <form:input path="name"/> 
    <form:errors path="name"></form:errors>
    <br/>
    <form:label path="age">年龄:</form:label>
    <form:input path="age"/> 
    <form:errors path="age"></form:errors> <br/>
    <form:button>提交</form:button>
  </form:form>
</body>


当输入时, 不输入年龄，进行提交时,age提示错误。


20190829121224480.png


当年龄和名称都不输入时，提示两个都是空。


2019082912123044.png


七.四 form:errors 中path的写法


有三种写法。


1 .* , 即path=x (x实际 为 8键盘上的星星，打不出来。 下面的也是一样。) 时，是所有的。 所有的没有通过验证的字段，都放置在这里面。


<form:label path="age">年龄:</form:label>
    <form:input path="age"/> 
    <form:errors path="*"></form:errors> <br/>


年龄，名称都不输入时:


2019082912123718.png


2 . 前缀*, 即path= 前缀x, 是所有以这个为开头的 。


<form:label path="age">年龄:</form:label>
    <form:input path="age"/> 
    <form:errors path="ag*"></form:errors> <br/>


年龄不输入时，


20190829121246509.png


3 . 准确定位， 用path= 名称。 只接收该名称的错误。


<form:label path="age">年龄:</form:label>
    <form:input path="age"/> 
    <form:errors path="age"></form:errors> <br/>


年龄不输入时， 显示错误。 年龄输入，而姓名不输入时，不接收错误。


这就是form表单标签的使用。 老蝴蝶先歇会。


谢谢!!!

文章标签：
前端开发
数据处理
存储
关键词：
Spring MVC表单标签
Spring MVC form表单标签
两个蝴蝶飞
目录
相关文章
瑶大头*^_^*
|
存储 应用服务中间件 容器
springmvc-页面跳转&表单标签&其他标签&tomcat控制台中文乱码问题
springmvc-页面跳转&表单标签&其他标签&tomcat控制台中文乱码问题
瑶大头*^_^*
54 0
不会编程的小孩子
|
5月前
|
前端开发 Java 数据库
SpringMVC的架构有什么优势？——表单和数据校验（四）
SpringMVC的架构有什么优势？——表单和数据校验（四）
不会编程的小孩子
39 0
热烈的马
|
6月前
|
存储 前端开发 Java
Spring Boot中Spring MVC的表单标签库与数据绑定讲解与实战（附源码 超详细必看）
Spring Boot中Spring MVC的表单标签库与数据绑定讲解与实战（附源码 超详细必看）
热烈的马
88 0
讓丄帝愛伱
|
自然语言处理 前端开发 Java
SpringMVC表单标签
SpringMVC表单标签
讓丄帝愛伱
43 0
小tata鸡米
|
Java
SpringMVC中使用form:form表单标签报500错误
SpringMVC中使用form:form表单标签报500错误
小tata鸡米
114 0
我是廖志伟
|
前端开发 Java Spring
Spring MVC框架：第八章：表单form:form标签
Spring MVC框架：第八章：表单form:form标签
我是廖志伟
186 0
Spring MVC框架：第八章：表单form:form标签
一乐乐
|
前端开发 Java 数据库连接
学习SpringMVC必知必会（7）~springmvc的数据校验、表单标签、文件上传和下载
学习SpringMVC必知必会（7）~springmvc的数据校验、表单标签、文件上传和下载
一乐乐
218 0
学习SpringMVC必知必会（7）~springmvc的数据校验、表单标签、文件上传和下载
两个蝴蝶飞
|
存储 前端开发 数据库
SpringMVC的form表单标签使用(八)中
SpringMVC的form表单标签使用(八)
两个蝴蝶飞
263 0
SpringMVC的form表单标签使用(八)中
两个蝴蝶飞
|
前端开发 Java 网络架构
SpringMVC的form表单标签使用(八)上
SpringMVC的form表单标签使用(八)
两个蝴蝶飞
268 0
SpringMVC的form表单标签使用(八)上
让线程再跑一会
|
6月前
|
设计模式 前端开发 JavaScript
Spring MVC（一）【什么是Spring MVC】
Spring MVC（一）【什么是Spring MVC】
让线程再跑一会
87 0