Vue - 表单rules规则介绍

概述

rules规则是Vue.js中非常重要的属性，它可以对表单的输入进行校验，并给出提示信息。

这里将记录有关rules规则的常用用法。

基础用法

rules规则是一个数组，数组的每一项是一个对象，对象中包含两个属性：

属性名称	功能描述
message	当验证失败时显示的错误信息
trigger	指定何时触发验证，常见的值有 blur（失去焦点时）、change（值发生变化时）
type	指定数据类型，如 string、number、email 等
min 和 max	用于限制输入的最小和最大长度
pattern	使用正则表达式进行验证
validator	自定义验证函数，允许你编写更复杂的验证逻辑
required	是否必填，值为true或false。

例如：

rules: [
  { required: true, message: '不能为空' },
  { min: 6, max: 12, message: '长度必须在6到12之间' },
  { pattern: /^[a-zA-Z]+$/, message: '只能输入字母' }
]

上述例子中，第一个规则表示必填，第二个规则表示长度必须在6到12之间，第三个规则表示只能输入字母。

<template>
  <n-form ref="formRef" label-placement="left" :label-width="80" :model="formValue" :rules="rules">
      <n-form-item label="节点名称" path="name">
          <n-input v-model:value="formValue.name" placeholder="请输入 如: B35-陕西联通-专线-省内" />
      </n-form-item>
      <n-form-item label="节点类型" path="type">
          <n-select v-model:value="formValue.type" :options="OptionsType" placeholder="请选择" />
      </n-form-item>
      <n-form-item label="运营商" path="operator">
          <n-select v-model:value="formValue.operator" :options="OptionsOperator" placeholder="请选择" />
      </n-form-item>
      <n-form-item label="调度类型" path="dispatch">
          <n-select v-model:value="formValue.dispatch" :options="OptionsDispatch" placeholder="请选择" />
      </n-form-item>
  </n-form>
</template>

<script setup>
import { ref } from "vue"

const showModal = true;

const formValue = ref({
    name: "",
    type: null,
    operator: null,
    dispatch: null,
})

const rules = {
    name: [
        { required: true, message: "请输入节点名称", trigger: "blur" },
        { min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" },
    ],
    type: [
        { required: true, message: "请选择节点类型", trigger: "change" },
    ],
    operator: [
        { required: true, message: "请选择运营商", trigger: "change" },
    ],
    dispatch: { required: true, message: "请选择调度类型", trigger: ['blur', 'change', 'input'], type: 'array' },
}
</script>

trigger触发介绍

在表单验证中，blur、change和input是常见的事件，用于触发验证逻辑。下面分别介绍这三个事件的含义和用途，以及一些其他可能用到的事件。

input 事件

• 含义：每当输入框的内容发生变化时，立即触发验证。
• 用途：适用于需要实时反馈的场景，例如用户在输入过程中，希望立即看到输入内容是否符合要求。这可以提供即时的用户体验，帮助用户及时纠正错误。
• 示例：用户在输入邮箱地址时，每次键入一个字符，都会触发验证，检查邮箱格式是否正确。

blur 事件

• 含义：当输入框失去焦点时触发验证。
• 用途：适用于用户完成输入并离开输入框后进行验证。这可以减少不必要的验证调用，提高性能，同时在用户完成输入后提供验证结果。
• 示例：用户在输入姓名后，点击其他地方或切换到其他输入框，此时触发验证，检查姓名是否为空。

change 事件

• 含义：当输入框的内容发生变化并且输入框失去焦点时触发验证。
• 用途：适用于需要在用户完成输入并离开输入框后进行验证的场景，但与blur事件不同的是，change事件只有在内容实际发生变化后才会触发。
• 示例：用户在输入密码后，点击其他地方或切换到其他输入框，如果密码内容发生了变化，才会触发验证，检查密码是否符合要求。

focus 事件

• 含义：当输入框获得焦点时触发。
• 用途：可以用于初始化一些状态或显示提示信息。
• 示例：用户点击输入框时，显示一个提示信息，提示用户输入的内容要求。

keyup 事件

• 含义：当用户松开键盘上的键时触发。
• 用途：可以用于需要在用户完成键入操作后立即进行验证的场景。
• 示例：用户在输入搜索关键词时，每次松开键时触发搜索建议的显示。

keydown 事件

• 含义：当用户按下键盘上的键时触发。
• 用途：可以用于需要在用户开始键入时进行一些操作的场景，例如限制输入内容。
• 示例：用户在输入数字输入框时，按下非数字键时阻止输入。

keypress 事件

• 含义：当用户按下键盘上的键并产生字符值时触发。
• 用途：可以用于需要在用户输入字符时进行一些操作的场景，但现代开发中通常推荐使用input事件。
• 示例：用户在输入文本时，每次输入字符时进行一些处理，例如自动格式化输入内容。

总结

事件	总结
input	实时反馈，每次内容变化时触发。
blur	用户完成输入并离开输入框时触发。
change	用户完成输入并离开输入框且内容发生变化时触发。
focus	输入框获得焦点时触发，用于初始化状态或显示提示。
keyup	用户松开键时触发，用于需要在键入操作完成后立即进行的操作。
keydown	用户按下键时触发，用于需要在键入操作开始时进行的操作。
keypress	用户按下键并产生字符值时触发，现代开发中推荐使用input事件。

通过按钮触发验证

<template>
  <el-form ref="formRef" :model="form" :rules="rules">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="form.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="form.password"></el-input>
    </el-form-item>
    <el-button type="primary" @click="handleValidateButtonClick">验证</el-button>
  </el-form>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage as message } from 'element-plus';

const formRef = ref(null);
const form = ref({
  username: '',
  password: ''
});

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, message: '密码长度至少为6位', trigger: 'blur' }
  ]
};

const handleValidateButtonClick = (e) => {
  e.preventDefault();
  formRef.value?.validate((errors) => {
    if (!errors) {
      message.success('验证成功');
    } else {
      console.log(errors);
      message.error('验证失败');
    }
  });
};
</script>

这里直接通过formRef.value?.validate来对所有的表单项进行表单规则验证。

阻止默认事件

这里面e.preventDefault();的含义是阻止事件的默认行为。

详细解释

1. 事件默认行为

• 表单提交：当用户点击表单的提交按钮时，浏览器会默认将表单数据发送到服务器。这个默认行为可能会导致页面重新加载。
• 链接点击：当用户点击一个链接时，浏览器会默认导航到链接指定的URL，导致页面跳转。
• 输入框聚焦：当用户点击一个输入框时，浏览器会默认将光标聚焦到输入框中。

1. e.preventDefault() 的作用

• 阻止表单提交：在表单提交事件中使用 e.preventDefault() 可以阻止表单数据发送到服务器，从而防止页面重新加载。这在使用AJAX或其他前端框架（如Vue、React）进行异步表单处理时非常有用。
• 阻止链接跳转：在链接点击事件中使用 e.preventDefault() 可以阻止浏览器导航到链接指定的URL，从而防止页面跳转。这在使用单页应用（SPA）时非常有用，可以实现页面内导航而不重新加载页面。
• 阻止其他默认行为：在其他事件中，e.preventDefault() 也可以用于阻止默认行为，例如阻止输入框的默认聚焦行为。

表单内置的验证规则

在表单验证中，通常有多种内置的验证规则可以使用。这些规则可以帮助你确保用户输入的数据符合特定的要求。以下是一些常见的验证规则及其用途：

1. required

用途：确保字段不为空。

{ required: true, message: "请输入节点名称", trigger: "blur" }

2. min 和 max

用途：确保字段的长度在指定的范围内。

{ min: 2, max: 20, message: "长度在 2 到 20 个字符", trigger: "blur" }

3. minLength 和 maxLength

用途：确保字段的长度至少为 minLength，最多为 maxLength。

{ minLength: 2, message: "长度至少为 2 个字符", trigger: "blur" }
{ maxLength: 20, message: "长度最多为 20 个字符", trigger: "blur" }

4. pattern
   用途：确保字段的值匹配指定的正则表达式。

{ pattern: /^[a-zA-Z0-9]+$/, message: "只能输入字母和数字", trigger: "blur" }

5. email

用途：确保字段的值是一个有效的电子邮件地址。

{ email: true, message: "请输入有效的电子邮件地址", trigger: "blur" }

6. type

用途：确保字段的值是特定的类型，如 string、number、array 等。

{ type: 'string', message: "请输入字符串", trigger: "blur" }
{ type: 'number', message: "请输入数字", trigger: "blur" }

7. enum

用途：确保字段的值在指定的枚举值中。

{ enum: ['admin', 'user', 'guest'], message: "请输入有效的用户角色", trigger: "blur" }

自定义表单规则

<template>
  <form>
    <input type="password" v-model="form.password" :rules="passwordRules" />
  </form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        password: ''
      },
      passwordRules: [
        { required: true, message: '请输入密码', trigger: 'blur' },
        { validator: validatePassword, trigger: 'blur' }
      ]
    }
  },
  methods: {
    validatePassword(rule, value, callback) {
      if (value === '') {
        callback(new Error('请输入密码'));
      } else if (value.length < 6) {
        callback(new Error('密码至少6位'));
      } else {
        callback();
      }
    }
  }
}
</script>