Simple_form进阶用法:优化栏位设置(包含Model设定)

本篇文章将介绍Simple_form的更多用法,关于栏位大家使用得非常多,因此如何调整f.input成了常见到的问题,以下会分享一些最常用的调整方法,让页面上的栏位更美观、更实用。(因为栏位限制与Model息息相关,文章中也会介绍Model中的设定)

❖ 本文使用新生大学全栈营job-listing教程内容为架构 ❖


让我们开始吧!

Part 1 - f.input常见用法介绍

我们以app/views/admin/jobs/new.html.erb做示范(为了示范日期格式,增加了created_at栏位)

app/views/admin/jobs/new.html.erb
<%= simple_form_for [:admin,@job] do |f| %>
    <div class="form-job">
      <%= f.input :title, label: false, error: '请输入职位名称', hint: '请输入完整职位名称', placeholder: '职位名称', required: true, autofocus: true, input_html: { class: "form-control"} %>
      <%= f.input :description, label: '职位介绍' %>
      <%= f.input :wage_lower_bound, as: :string %>
      <%= f.input :wage_upper_bound %>
      <%= f.input :contact_email, input_html: { maxlength: 16 } %>
      <%= f.input :created_at, label: '职位建立时间', start_year: 2010, end_year: Date.today.year %>
      <%= f.input :is_hidden, :label => false, as: :radio_buttons, collection:  [['显示', false], ['隐藏', true]] %>
    <div class="form-actions text-center">
      <%= f.submit "Submit", disable_with: "Submiting...", class: "btn btn-primary"%>
    </div>
  <% end %>

1、label:栏位上方文字,如果设定为false则隐藏文字
2-1、placeholder:栏位内文字
2-2、autofocus:设置为true,则进入该页面时,会自动focus在此栏位上(可以看到栏位外框变色,及栏位内出现游标)
3、hint:栏位下方文字
4-1、as: :radio_buttons:用单选按钮方式呈现(多选为as: :check_boxes)
4-2、collection:选项内容,用[]框住,如果要设置选项代表的值,可用['#name','#value'],例如[['显示', false], ['隐藏', true]]

5-1、start_year: 起始年份,可直接输入年份(栏位格式必须为date)
5-2、end_year: 结束年份,Date.today.year为限制到当前年份(栏位格式必须为date)
❖ 预设为当前年分正负五年 ❖

6-1、error:错误提示
6-2、required:设置为true,则此栏位必须得输入
7、as: :string,强制设定栏位为字串型态(原本integer栏位无法输入文字)
8-1、input_html:栏位CSS格式, { class: "#css样式"}
8-2、input_html:如果设置为input_html: { maxlength: 16 }则限制栏位最多只能输入16个字符

以上就是最常见的几种用法,有没有发现栏位限制、错误提示也可以直接在f.input里设置呢?但为了美观及统一管理,下面会介绍在Model里设置的方法

如果实在无法理解上面各种设定,最简单的方法就是复制一份到文档中,实际应用马上就会明白了!


Part 2 - 在Model设定栏位限制

❖ 在开始前请先把刚刚那行练习用的<%= f.input :created_at, label: '职位建立时间', start_year: 2010, end_year: Date.today.year %>删除,才不会影响到操作 ❖

app/models/job.rb
validates :title, presence: { message: "请填写职位名称" }
validates :description, presence: { message: "请填写职位描述" }
validates :wage_lower_bound, presence: { message: "请填写最低薪水" }
validates :wage_upper_bound, presence: { message: "请填写最高薪水" }
validates :wage_lower_bound, numericality: { less_than: :wage_upper_bound, message: "薪水下限不能高于薪水上限" }
validates :wage_upper_bound, numericality: { greater_than: 0, message: "最小薪水必须大于零" }
validates :contact_email, presence: { message: "请填写联系用的邮箱" }
validates_format_of :contact_email, :with => /\A([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})\Z/i , message: "请输入正确的邮箱格式"

1-1、presence:限制栏位必须输入

1-2、message:可直接将错误提示写在message里
例如presence: { message: "请填写职位名称" }

2-1、numericality:限制栏位内容必须为数字

2-2、less_than:栏位数值必须小于另一个栏位
例如less_than: :wage_upper_bound

2-3、greater_than:栏位数字必须大于设定

例如greater_than: 0

3、validates_format_of :contact_email, :with => /\A([^@\s]+)@((?:[-a-z0-9]+.)+[a-z]{2,})\Z/i
这段代码的意思为contact_email必须符合E-mail格式

至于为什么每个栏位要分开写呢?这部分是个人习惯,整体浏览起来对每个栏位的设定比较清楚,大家可以依造自己需求调整



关于Simple_form就介绍到这边

强烈建议大家先去看Simple_form的官方文档,https://github.com/plataformatec/simple_form,里面有非常详细的介绍,先快速扫过即可,不用去背里面的代码,日后需要调用时在回来查询。





有任何问题或建议都可以留言给我,或在微信、Slack上找到我 :D

没想到这篇文章比想像中还要难写阿!!!不是很好解释这些用法,还是建议大家实际运用,才会有深刻的体会,如有不足敬请见谅。 (´ー`)

如果我的文章对你有帮助,欢迎打赏,谢谢你的支持! :D

comments powered by Disqus