Element的表单校验笔记

最新推荐文章于 2024-01-05 20:00:35 发布

MMH_MMH

最新推荐文章于 2024-01-05 20:00:35 发布

阅读量375

点赞数

文章标签： elementui

本文链接：https://blog.csdn.net/MMH_MMH/article/details/123646758

版权

本文主要介绍了在Element UI中如何进行表单校验，包括自定义校验规则的函数实现，该函数包含三个参数：当前规则、当前值和回调函数。此外，还讨论了在用户未离开输入焦点时如何手动触发校验的方法，通过使用ref属性来调用表单的验证功能。

摘要由CSDN通过智能技术生成

安装Element

开发时依赖：开发环境所需要的依赖 -> devDependencies

运行时依赖: 项目上线依然需要的依赖 -> dependencies

npm i element-ui

在main.js中对ElementUI进行注册 :

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

表单的校验规则:

几个基本使用的规则:

   loginRules: {
        mobile: [{ required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }],
        password: [{ required: true, message: '密码不能为空', trigger: 'blur' }, {