Vue.js前端框架教程12:Vue表单验证rules和form.validate

文章目录

表单验证

在 Vue 中,:rulesformRef.value.validate 通常用于表单验证。:rules 是一个对象,定义了表单字段的验证规则,而 formRef.value.validate 是一个方法,用于触发表单验证,并根据验证结果执行相应的操作。

:rules

:rules 是在表单组件中使用的一个属性,它接收一个对象,该对象包含了表单中每个字段的验证规则。每个字段的规则是一个数组,数组中的每个元素都是一个规则对象,可以包含以下属性:

  • required: 表示该字段是否必填。
  • message: 验证失败时显示的错误信息。
  • trigger: 指定何时触发验证(如 blurchange)。
  • type: 指定数据类型(如 stringnumber 等)。
  • minmax: 对于字符串或数组,限制最小和最大长度。
  • validator: 自定义验证函数。

例如,以下是使用 :rules 的一个简单示例:

html 复制代码
<template>
  <el-form :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-form>
</template>

<script>
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ]
      }
    };
  }
};
</script>
formRef.value.validate

formRef.value.validate 是一个方法,用于验证整个表单。它返回一个 Promise,如果表单验证通过,则 Promise 会解析为 true;如果验证失败,则 Promise 会解析为 false 或者抛出错误。

以下是使用 formRef.value.validate 的一个示例:

html 复制代码
<template>
  <el-form ref="formRef" :model="form" :rules="rules">
    <!-- 表单项 -->
  </el-form>
  <el-button @click="submitForm">提交</el-button>
</template>

<script>
export default {
  methods: {
    submitForm() {
      this.$refs.formRef.validate((valid) => {
        if (valid) {
          alert('表单验证通过');
          // 执行提交操作
        } else {
          alert('表单验证失败');
          return false;
        }
      });
    }
  }
};
</script>

在这个示例中,当用户点击提交按钮时,会触发 submitForm 方法。该方法调用 formRef.value.validate 来验证表单。如果验证通过,则显示提示消息并执行提交操作;如果验证失败,则显示错误提示。

这些是 Vue 表单验证的基本介绍和用法,你可以根据具体需求调整验证规则和处理验证结果的逻辑。

相关推荐
@大迁世界2 分钟前
Promise.all 与 Promise.allSettled:一次取数的小差别,救了我的接口
开发语言·前端·javascript·ecmascript
迎風吹頭髮3 分钟前
Linux服务器编程实践26-TCP连接超时重连机制:超时时间计算与重连策略
服务器·网络·php
知识分享小能手4 分钟前
微信小程序入门学习教程,从入门到精通,项目实战:美妆商城小程序 —— 知识点详解与案例代码 (18)
前端·学习·react.js·微信小程序·小程序·vue·前端技术
DoraBigHead17 分钟前
React 中的代数效应:从概念到 Fiber 架构的落地
前端·javascript·react.js
LuckySusu17 分钟前
【vue篇】Vue 性能优化全景图:从编码到部署的优化策略
前端·vue.js
卓伊凡22 分钟前
【03】建立隐私关于等相关页面和内容-vue+vite开发实战-做一个非常漂亮的APP下载落地页-支持PC和H5自适应提供安卓苹果鸿蒙下载和网页端访问-优雅草卓
前端
笨笨鸟慢慢飞24 分钟前
Vue3后退不刷新,前进刷新
前端
LuckySusu26 分钟前
【vue篇】SSR 深度解析:服务端渲染的“利”与“弊”
前端·vue.js
LuckySusu26 分钟前
【vue篇】SPA 单页面应用:现代 Web 的革命与挑战
前端·vue.js
LuckySusu28 分钟前
【vue篇】Vue 初始化页面闪动(FOUC)问题终极解决方案
前端·vue.js