自定义表单校验规则说明

Mingyun-zjk

于 2023-03-13 20:24:46 发布

阅读量376

点赞数

CC 4.0 BY-SA版权

文章标签：前端 vue.js elementui

本文链接：https://blog.youkuaiyun.com/Strive_Limingyun/article/details/129505080

本文详细阐述了在Vue.js和ElementUI框架下如何实现自定义的表单验证规则。通过实例解析，介绍了如何定义验证规则，以及在表单提交时如何进行有效的数据校验，确保用户输入的数据符合业务需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述

<el-form ref="form" :model="loginForm" :rules="loginRules">
 <el-form-item prop="isAgree">
    <el-checkbox v-model="loginForm.isAgree">
      用户平台使用协议
    </el-checkbox>
  </el-form-item>
</el-form>
loginRules: {
  isAgree: [
    {
     validator: (rule, value, callback) => {
       // rule规则
       // value检查的数据 true/false
       // callback 函数 执行这个函数
       // 成功执行callback 失败也执行callback(错误对象 new Error(错误信息))
      value ? callback() : callback(new Error('没有勾选用户平台协议'))
     }
   }
 ]
}