Vue rules校验规则详解

时间：2025-02-27 16:25:22

提供了一套轻量级的、可扩展的模板校验规则。这些规则可以通过在v-model绑定中添加.modifier来使用，例如

下面是一些常见的 校验规则：

  • required: 检查值是否非空
  • email: 检查值是否符合电子邮件格式
  • min: 检查值是否大于等于指定的最小值
  • max: 检查值是否小于等于指定的最大值
  • minLength: 检查值的长度是否大于等于指定的最小长度
  • maxLength: 检查值的长度是否小于等于指定的最大长度
  • numeric: 检查值是否为数字
  • regex: 检查值是否符合指定的正则表达式

这是使用 .modifier 将这些规则应用于 v-model 的一个例子：

<template>
  <div>
    <input ="username" required>
    <input ="email" type="email" required>
    <input ="age" type="number" min="18" max="99" required>
  </div>
</template>

在这个例子中：

  • 将输入值去掉前后空格
  • required 校验输入是否非空
  • type="email" 校验输入是否符合电子邮件格式
  • 将输入转换成数字
  • min 和 max 校验输入是否在指定范围内

除了这些内置的校验规则，你还可以使用自定义的校验函数。校验函数应该返回一个布尔值，代表输入是否合法，例如：

<template>
  <div>
    <input v-model="password" :class="{ invalid: !validatePassword }">
  </div>
</template>

<script>
export default {
  data() {
    return {
      password: '',
    };
  },
  computed: {
    validatePassword() {
      return  >= 8;
    },
  },
};
</script>

在这个例子中，我们使用了一个计算属性 validatePassword，它根据密码的长度来返回一个布尔值。我们还在输入框上绑定了一个类名 invalid，如果输入不符合规则，就将这个类名添加到输入框上。

相关文章