何隆昌 移除表单校验,添加单个校验,验证,自定义错误信息

移除表单校验

	<Form ref="form" rule={this.rules}>
		<FormItem prop="name" label="姓名">
			<Input/>
		</FormItem>
		<FormItem prop="age" label="年龄">
			<Input/>
		</FormItem>
	</Form>
		
	// 根据判断条件, 移除所有表单项的校验
	if (/*条件*/) {
		this.$refs['form'].clearValidate();
	}

	// 但是有时候只需要移除其中的某一项校验, 如只移除姓名的校验:
	if (/*条件*/) {
		this.$refs['form'].clearValidate(['name']);//prop="name",ref="form"(表单名称)
	}
	
	
// 多个删除时,把要移除校验的表单项的多个prop放到数组里面, 
//调用clearValidate()方法时传入prop数组参数['name','email']
// 不传任何参数时, 默认会移除整个表单校验

添加单个校验

    this.$refs.ruleForm.validateField("title");//校验单个属性
 this.$refs.ruleForm.validateField('title', (error) => {//点击时校验并且判断是否通过
          if(!error){
            //当校验通过时,这里面写逻辑代码
            alert("d")
          }
        })

自定义提示信息

在这里插入图片描述
一,这种控制台会报错的

1,用下标的
this.$refs.ruleForm.fields[0].error="错误提示"//fields是固定的,下标表示是第几个输入框(带prop的)
2,用prop名称的
this.$refs.ruleForm.fields.find((item) => (item.prop === 'file')).error='asdasd'
//(item.prop === 'file')file就是表单里的prop="file"
//这个F12会报错,但不影响
//报错原因prop是单向绑定,不能更改数据,只能由父组件传输过来

二,还有一种方法就是在data里定义一个变量(这种不会报错)
在这里插入图片描述

 data() {
      return {
      error:''//这里默认一定要设置为空
}

点击的时候
在这里插入图片描述

this.error=''//注意:这里想要提示必须每次在提示前给他赋空值,要不会只会执行一次提示
this.error='错误提示'

如果想要消除这个报错信息,直接给赋空值就行

this.error=''

版权声明:本文为weixin_43826491原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。