我正在构建一个基本的“必需”表单验证函数。这是函数:
JS:
export default {
methods: {
required(string) {
if (!string) {
return 'This field is required!'
}
}
}
}
HTML:
<input id="username"
v-model="credentials.username"
type="text"
name="username"
/>
<span>{{ required(credentials.username) }}</span>
上面的效果很好。如果我开始输入,返回的值变为空。如果我清空输入,返回值会按预期返回,“此字段为必填项”。
我的问题是,如何将值返回为 null/blank 以开始?预期流量为:
- 返回值为 null/空白开始
- 用户开始输入,没有任何变化,因为 string.length != 0
- 用户删除所有字符,导致string.length == 0,导致返回值为'This field is required!'
最佳答案
一种解决方案是使用 input
-事件处理程序(为输入中的每个新值调用)设置一个标志以指示该字段是“脏的”。然后根据标志有条件地渲染验证结果(<span>
):
声明一个名为
"dirty"
的数据属性:export default { data() { return { dirty: false, } } }
在模板中,添加
input
-<input>
上的事件处理程序设置dirty
标志:<input @input="dirty = true">
此外,有条件地呈现
<span>
基于dirty
的字段:<span v-if="dirty">{{ required(credentials.username) }}</span>
关于Javascript/Vue3 - Mixins - 默认返回 'null',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/67944867/