首页 > 其他分享 >Vue进阶(幺贰幺):ElementUI 表单校验注意事项

Vue进阶(幺贰幺):ElementUI 表单校验注意事项

时间:2023-06-11 10:32:41浏览次数:62  
标签:Vue 进阶 ElementUI refs 校验 value 表单 callback reg

(文章目录)

一、表单检验

在这里插入图片描述 注:prop对应的不单单是rules规则里面的验证项,同时对应着form-itemv-model绑定的值。prop绑定的类要与el-form-itemv-model的值相对应。否则就算校验元素输入字符,也会提示“请输入”之类的提示语,造成校验不友好问题。 在这里插入图片描述

二、清除表单校验

// 清除表单校验的提示
if (this.$refs['XXX']) {
 // 延时执行
  this.$nextTick(function () {
    this.$refs['XXX'].clearValidate();
  })
};

三、callback()

vue自定义表单校验,不管检验是否通过一定要加 callback();

validateDatasourceNm(rule, value, callback) {
	let reg = /^[+]{0,1}(\d+)$|^[+]{0,1}(\d+\.\d+)$/; //只允许输入正数
	if (value === '') {
		callback();  //这句话没有的话 不知名的问题产生。
	} else {
		if (!reg.test(value)) {
			callback(new Error(this.ruleNames[rule.fullField]));
		}
		callback();
	}
}

四、拓展阅读

标签:Vue,进阶,ElementUI,refs,校验,value,表单,callback,reg
From: https://blog.51cto.com/shq5785/6457140

相关文章

  • 搜索进阶
    搜索进阶前提提要这一章不会有多余的题解,都是例题,当做知识点来讲前置知识众所周知,我们写搜索第一步是设计搜索状态,然后再次基础上优化,让他跑的更快搜索题不要过多纠结于他的时间复杂度,只有\(\mathcal{O}\)(能过、不能过)这两种时间复杂度(\(\mathcal{P}art\)1.设计搜索状态......
  • vue3的composition API如何使用async语句
    问题:在setup使用aysnc,生命函数钩子和函数必须出现在await语句前面,否者会出现组件无法渲染以及内存泄漏的问题。import{ref,watch,onMounted,onUnmounted}from'vue'exportdefaultdefineAsyncComponent({asyncsetup(){constcounter=ref(0......
  • Vue 国际化之 vue-i18n 的使用
    一、安装npminstallvue-i18nyarnaddvue-i18n如果在一个模块系统中使用它,你必须通过Vue.use()明确地安装vue-i18n:importVuefrom'vue'importVueI18nfrom'vue-i18n'Vue.use(VueI18n)二、使用在src下创建lang文件夹。1、准备语言包本例我准备了两种语言包,分别是......
  • Vue入门实战05-模板语法
    Vue使用一种基于HTML的模板语法,声明式将其组件实例的数据绑定到DOM。所有Vue模板都是语法层合法的HTML,可被符合规范的浏览器和HTML解析器解析。底层机制中,Vue会将模板编译成高度优化的JavaScript代码。结合响应式系统,当应用状态变更时,Vue能够智能地推导出需要重新渲染的......
  • SpringBoot进阶教程(七十六)多维度排序查询
    在项目中经常能遇到,需要对某些数据集合进行多维度排序的需求。对于集合多条件排序解决方案也有很多,今天我们就介绍一种,思路大致是设置一个分值的集合,这个分值是按照需求来设定大小的,再根据分值的大小对集合排序。v需求背景我们来模拟一个需求,现在需要查询一个用户列表,该列表......
  • Vue 中const,var,let区别与用法
    区别:1.const定义的变量不可以修改,而且必须初始化。2.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。3.let是块级作用域,函数内部使用let定义后,对函数外部无影响。......
  • 使用 Vue 和 Swiper 实现中间大两边小的轮播图效果
    以下是使用Vue和Swiper实现中间大两边小的轮播图效果的代码:1.安装Swiper:npminstallswiper--save 2.在Vue组件中引入Swiper:importSwiperfrom'swiper';import'swiper/css/swiper.css'; 3.在Vue组件中使用Swiper:<template><divclass="swip......
  • 前端vue基于原生check增强单选多选插件
    前端vue基于原生check增强单选多选插件, 下载完整代码请访问uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=12979效果图如下:     ####使用方法```使用方法<!--多选组件 checkData:多选数据 @change:多选事件 --><ccCheckView:checkDa......
  • 使用Python进行任务调度(进阶篇)
    在上一篇文章使用Python完美管理和调度你的多个任务中,介绍了使用Python+schedule管理和调度任务的入门方法,本文继续介绍任务调度进阶篇。问题描述:启动多个任务之后,由于种种原因,可能需要中途取消某个任务。代码截图:运行效果:......
  • #yyds干货盘点#【yyds干货盘点】5. Vue.js 事件处理
    学习目录:Vue.js简介Vue.js实例与数据绑定Vue.js计算属性和侦听器Vue.js条件渲染和列表渲染Vue.js事件处理Vue.js表单输入绑定Vue.js组件基础Vue.js组件通信Vue.js插槽Vue.js动态组件和异步组件Vue.js自定义指令Vue.js过渡和动画Vue.js混入Vue.js自定义事件和v-model......