Vue.js 提供了一套轻量级的、可扩展的模板校验规则。这些规则可以通过在v-model
绑定中添加.modifier
来使用,例如v-model.trim
下面是一些常见的 Vue.js 校验规则:
required
: 检查值是否非空email
: 检查值是否符合电子邮件格式min
: 检查值是否大于等于指定的最小值max
: 检查值是否小于等于指定的最大值minLength
: 检查值的长度是否大于等于指定的最小长度maxLength
: 检查值的长度是否小于等于指定的最大长度numeric
: 检查值是否为数字regex
: 检查值是否符合指定的正则表达式
这是使用 .modifier
将这些规则应用于 v-model
的一个例子:
<template><div><input v-model.trim="username" required><input v-model.trim="email" type="email" required><input v-model.number="age" type="number" min="18" max="99" required></div>
</template>
在这个例子中:
v-model.trim
将输入值去掉前后空格required
校验输入是否非空type="email"
校验输入是否符合电子邮件格式v-model.number
将输入转换成数字min
和max
校验输入是否在指定范围内
除了这些内置的校验规则,你还可以使用自定义的校验函数。校验函数应该返回一个布尔值,代表输入是否合法,例如:
<template><div><input v-model="password" :class="{ invalid: !validatePassword }"></div>
</template><script>
export default {data() {return {password: '',};},computed: {validatePassword() {return this.password.length >= 8;},},
};
</script>
在这个例子中,我们使用了一个计算属性 validatePassword
,它根据密码的长度来返回一个布尔值。我们还在输入框上绑定了一个类名 invalid
,如果输入不符合规则,就将这个类名添加到输入框上。