element-ui 表单验证关闭async-validator验证警告

已于 2023-03-14 10:58:51 修改
阅读量3.5k 收藏
点赞数 1
分类专栏： element ui 文章标签： ui 前端 elementui
于 2022-09-08 09:45:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_57677300/article/details/126758279
版权
💂 个人网站: 【紫陌】【笔记分享网】
💅 想寻找共同学习交流、共同成长的伙伴， 请点击【前端学习交流群】

前言：今天在项目中遇到element-ui 表单验证出现async-validator验证警告，就让人很烦，今天就把它干掉。

解决方案: 

首先：在node_modules文件夹中找到async-validator文件夹中的es下的util.js文件，整个的路径：node_modules > async-validator > es > util.js

注释第14行代码，可能你们不是14行，找准console.warn(type, errors);

 

这样就可以了，然后重启项目才有效果！

紫陌~
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
async-validator：验证表单异步
02-25
异步验证器 验证表单异步。 一种变体 安装 npm i async-validator 用法 基本用法包括定义一个描述符，将其分配给一个模式，并将要验证的对象以及一个回调函数传递给该模式的validate方法： import Schema from 'async-validator' ; const descriptor = { name : { type : 'string' , required : true , validator : ( rule , value ) => value === 'muji' , } , age : { type : 'number' , asyncValidator : ( rule , value ) => { return new Promise ( ( resolve , re
vue-async-validator-example:async-validator在vue.js的验证示例
05-08
验证者 vue.js 2.x的表单验证器 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report # run unit tests npm run unit # run all tests npm test 有关工作原理的详细说明，请查看的和。
async-validator:验证表单异步
05-10
异步验证器 验证表单异步。 的变体 安装 npm i async-validator 用法 基本用法包括定义描述符，将其分配给架构，将要验证的对象以及回调函数传递给架构的validate方法： import Schema from 'async-validator' ; const descriptor = { name : { type : 'string' , required : true , validator : ( rule , value ) => value === 'muji' , } , age : { type : 'number' , asyncValidator : ( rule , value ) => { return new Promise ( ( resolve , reject ) =>
解决element-ui进行校验后控制台提示async-validator验证警告
qq_42730111的博客
05-16 6126
1、在node_modules文件夹中找到async-validator文件夹中的es下的util.js文件，整个的路径：node_modules > async-validator > es > util.js 2、注释util.js中的输出日志，注释掉即可 原文链接：https://blog.csdn.net/u014678583/article/details/113930356 ...
element-ui 关闭控制台async-validator验证警告
u014678583的博客
02-22 3891
1、在node_modules文件夹中找到async-validator文件夹中的es下的util.js文件，整个的路径：node_modules >async-validator >es >util.js 2、注释util.js中的输出日志，注释掉即可 3、测试，已经没有async-validator验证警告输出了 ...
【VUE】Element UI 表单校验出现async-validator: [‘discipline is required‘]报错
weixin_61972561的博客
07-03 1867
【VUE】Element UI 表单校验出现async-validator: ['discipline/XXX is required']报错
如何消除或者关闭控制台async-validator警告
weixin_48262798的博客
09-21 892
在Vue项目中我们使用element-ui进行表单验证判断后会在控制台出现这样的提示信息：（如图所示）
async-validator：Element表单验证
weixin_30872789的博客
06-12 489
转载文章：Element表单验证（2） Element表单验证（2） 上篇讲的是async-validator的基本要素，那么，如何使用到Element中以及怎样优雅地使用，就在本篇。 上篇讲到async-validator由3大部分组成 Options Validate Rules 基本验证流程如下 先按照rule的规则，制定每个字段的规范，生成rule...
element ui 清除为空校验
江湖行骗老中医
11-22 583
this.$nextTick(() => { this.$refs.Validate.clearValidate() })
Element-UI做校验进行测试控制台有黄色警告如何解决
qq_42805569的博客
12-04 3720
在用element-ui做数据校验的时候，可能会遇到小的问题，比如，进行校验测试的时候控制台会出现黄色警告，虽然不影响实际效果，但是，看着还是心里不爽，哈哈 情况如下： 进行校验测试，控制台不断的警告 解决方案：在 node_modules 文件夹中找到如图所指的文件，将右边那行代码注释掉，然后保存刷新浏览器 效果，是不是看着舒服多了： ...
vant(ZanUi)结合async-validator实现表单验证的方法
10-17
主要介绍了vant(ZanUi)结合async-validator实现表单验证的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React中使用async validator进行表单验证的实例代码
10-18
react上进行表单验证是很繁琐的，在这里使用async-validator处理起来就变的很方便了，接下来通过本文给大家介绍React中使用async validator进行表单验证的方法,需要的朋友可以参考下
vue+element-ui 关闭对话框清除验证和表单内容
热门推荐
qq_36437172的博客
03-04 1万+
在项目中遇到对话框关闭或者取消后，再次打开验证错误或者表单内容依然存在的效果，如下： 1、首先在你的对话框 取消按钮 加一个click事件， <div slot="footer" class="dialog-footer"> 　　<el-button @click="handleCancel('form')">取 消</el-button> &...
element-ui表单校验成功，一直发出警告
shsyzhzhgn的博客
07-14 576
表单校验成功validate返回true,控制台报错，警告信息fieldValue:“”
element 切换页面，表单rules自动校验如何关闭。
qq_38425020的博客
01-28 2628
element 官网有个属性，validate-on-rule-change，将此属性设置为false并且使用resetFields方法将form表单重置并移除校验结果。由于业务场景需要对切换元素时，rules重新赋值，此时页面会出现自动校验表单的元素，用户体验很差。
关闭控制台的async-validator警告
m0_64182641的博客
02-24 1069
关闭控制台的async-validator警告
Vue 项目中使用 Element UI库（Element UI 是一套基于 Vue.js 的桌面端组件库）
qq_53348178的博客
05-27 492
el-input v-model="user.username" id="username" placeholder="请输入用户名" /><el-input v-model="user.password" id="password" placeholder="请输入密码" /><el-button @click="login" margin="0 auto">登录</el-button><el-form-item label="用户名" for="username">（做优化，可以不用）
elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择
IT13333的博客
05-28 202
【代码】elemnt ui 时间选择器。当前日期往前推6个月以前的的不可选择。
Firebase Local Emulator Suite详解
最新发布
江上清风山间明月的博客
05-30 344
Firebase Local Emulator Suite 是一组本地服务，可以模拟 Firebase 平台的在线服务，帮助开发者在本地环境中开发和测试应用程序，而不必依赖实时的 Firebase 项目。以下是关于 Firebase Local Emulator Suite 的详细介绍及其使用方法。
vue3+element-plus 表单验证
04-27
在 Vue3 中使用 Element Plus 进行表单验证可以按照以下步骤进行： 1. 安装 Element Plus 和 VeeValidate ``` npm install element-plus vee-validate@next ``` 2. 在 main.js 中引入 Element Plus 和 VeeValidate ```js import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/lib/theme-chalk/index.css' import { defineRule, ErrorMessage, configure } from 'vee-validate' import { required, min, max, email } from '@vee-validate/rules' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) // 注册 VeeValidate 规则 defineRule('required', required) defineRule('min', min) defineRule('max', max) defineRule('email', email) // 配置 VeeValidate configure({ generateMessage: ({ field, rule }) => { const messages = { required: `${field}不能为空`, min: `${field}至少为${rule.params.min}个字符`, max: `${field}不能超过${rule.params.max}个字符`, email: `${field}必须是有效的邮箱地址` } return messages[rule.name] || `${field}无效` } }) app.component('ErrorMessage', ErrorMessage) app.mount('#app') ``` 3. 在组件中使用 VeeValidate ```html <template> <el-form :model="form" :rules="rules" ref="form"> <el-form-item label="用户名" prop="username"> <el-input v-model="form.username"></el-input> <error-message name="username"></error-message> </el-form-item> <el-form-item label="密码" prop="password"> <el-input type="password" v-model="form.password"></el-input> <error-message name="password"></error-message> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> </el-form-item> </el-form> </template> <script> import { defineComponent } from 'vue' import { useVeeValidate } from '@vee-validate/vue3' export default defineComponent({ setup() { const { handleSubmit, resetForm, errors, setErrors } = useVeeValidate() const form = { username: '', password: '' } const rules = { username: [ { required: true, message: '请输入用户名', trigger: 'blur' }, { min: 6, max: 16, message: '用户名长度在 6 到 16 个字符', trigger: 'blur' } ], password: [ { required: true, message: '请输入密码', trigger: 'blur' }, { min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur' } ] } const submitForm = handleSubmit(async () => { // 提交表单逻辑 }) return { form, rules, submitForm, resetForm, errors, setErrors } } }) </script> ``` 在这个例子中，我们使用了 `useVeeValidate()` hook 来管理表单验证，定义了一个 `form` 对象来存储表单数据，定义了 `rules` 对象来定义表单验证规则，使用了 `handleSubmit()` 方法来触发表单提交逻辑，并且使用了 `ErrorMessage` 组件来展示错误信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值