有学有练才叫学习:学而不思则罔,思而不学则殆:学而不习,纸上谈兵,习而不进,画地为牢!

vue blur(Vue Formulate 介绍)

vue 炮渣日记 3周前 (11-19) 24次浏览 已收录 0个评论 扫描二维码

Vue Formulate 是使用 Vue 构建表单的最简单方法。而且现在可以在element-ui项目中使用,使用方法可以查看我之前的文章

前端表单验证对于提供良好的用户体验是不可或缺的,但由于配置它所涉及的痛苦, 它经常被忽视。Vue Formulate 极大地减少了前端验证的弯路,因此没有理由不使用它。

<FormulateInput
  type="text"
  label="What ice cream flavor?"
  help="注意:我们的草莓和香蕉刚卖完。"
  name="flavor"
  validation="required|not:strawberry,banana"
/>

声明规则

声明什么验证规则就像在你的 FormulateInput 字段中添加一个 validation prop 一样简单

字符串语法

声明在给定表单域上使用哪些规则的最简单方法是提供由管道 ( |)分隔的规则字符串。一些规则可能接受参数,这些是在冒号之后定义的。您可以使用逗号分隔多个参数。

数组语法

字符串语法的替代方法是提供一组规则。有时需要使用数组语法来保留输入或转义某些字符,例如在使用带有匹配规则的正则表达式时 。 每个规则都必须定义为一个数组,其中规则名称后跟任何参数。

<FormulateInput
  :validation="[
    ['required'],
    ['max', 10],
    ['min', 5]
  ]"
/>

就本文档而言,管道分隔字符串将是为字段设置验证规则的首选方法。

笔记:

使用数组语法时,请确保您的 prop 使用 v-bind:validation 或 :validation。

显示验证

验证错误总是实时计算的,但它们是根据 error-behavior 值显示的。 默认 error-behaviorblur — 意味着具有验证错误的字段仅在用户从表单域中移除焦点时才显示其错误。 在大多数情况下,这提供了最佳的用户体验,因为它可以防止用户立即收到错误消息的轰炸。当用户尝试提交验证消息失败的表单时,也会始终显示错误消息。

除了 blur 行为之外,error-behavior 还支持这些附加策略。

报错行为

说明

blur

(默认) 当用户从输入中移除焦点时显示,也会在 @submit 时显示

submit

只在表单提交时显示

live

一直显示

value

只要表单域中有值就在失去焦点和提交表单时显示

停止验证

bail 规则

要在遇到错误后停止验证(以防止同时显示多条消息), 您可以添加特殊规则:bail。当验证解析器遇到 bail 规则时,它会记住在遇到任何后续规则中的任何失败后停止验证该表单域。

<FormulateInput
  label="How many tacos do you want?"
  type="text"
  validation="bail|required|number|between:1,10,value"
  validation-name="Taco quantity"
  error-behavior="live"
/>

bail 修饰符

通常只在特定规则失败时才中断验证是可取的。例如,如果密码字段为空,您可能只想显示 required 错误消息, 但当它有一个值时,您希望显示所有失败的验证规则。为此,我们可以 ^ 在规则名称上使用修饰符。

<FormulateInput
  label="Create a new password (with modifier)"
  type="password"
  name="password"
  error-behavior="live"
  validation="^required|min:4,length|matches:/[0-9]/"
  :validation-messages="{
    matches: 'Passwords require at least one number.'
  }"
/>

要查看以上代码块的执行情况,请点击查看更多

喜欢 (0)
炮渣日记
关于作者:
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址