HTML/CSS CSS 解决 field error 的重复代码

luikore · 2013年11月23日 · 最后由 luikore 回复于 2013年11月23日 · 4145 次阅读

表单验证 error 字段写起来是挺麻烦的事情, 最后生成的 html 会像是:

<label>
  <input>
  <!-- 下面这个还是条件出现的 -->
  <div class="field-error">...</div>
  ...

前人发明了各种各样的 form builder 和 helper 去简化这种页面结构的创建... 搞得页面很复杂而且前端不友好

但这种小问题用 css 就能简单搞定... 假设页面这么写

label data-error=@errors[field]
  input

样式这么写

label[data-error]:after
  content: attr(data-error)
  color: red  

data-error 属性的内容就会自动附加到后面. 效果见 http://codepen.io/anon/pen/LCzGA

混合前端验证的话, 直接改 data-error 属性就好了.

data-hint 等同理

你还用 simple_form?

无视 IE7 以下,一切美好了。

#1 楼 @pepsin 可以在不支持的浏览器 fallback 到用 JavaScript 添加

#2 楼 @doitian 恩,simple-form 我一直搞不懂有什么好的,感觉跟 Rails 原生的那些 helper 也没多少精简。原生的就是有几个设计很诡异。

- -这个不错

按照 Simple Form 的思路,也可以通过改 Ruby 代码统一改成顶楼那种模式。我是觉得 View 代码就应该写在 View 里,因地制宜,不然会不自觉思考用 Simple Form 要怎么实现。

对 form 表单中错误字段的提示真是很麻烦.

这个办法好!

我们这要求前端在一般的 field 有 error 出现时要有一个 shake animation……然后就还得回到一开始那种结构了……

content 不能直接写 HTML,样式是个问题。 我一般会根据前端的样式写个 rails helper 来解决。

#8 楼 @aptx4869 #9 楼 @camel 是的这样就很难用 css 解决了

需要 登陆 后方可回复, 如果你还没有账号请 注册新账号