Vue表单规则

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="请输入节点名称" />
    </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();的含义是阻止事件的默认行为。

详细解释

事件默认行为

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

e.preventDefault() 的作用

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

表单内置的验证规则

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

required

用途：确保字段不为空。

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

min 和 max

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

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

minLength 和 maxLength

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

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

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

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

email

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

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

type

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

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

enum

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

1	{ 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>