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

举报
SHQ5785 发表于 2020/12/30 00:16:22 2020/12/30
2.4k+ 0 0
【摘要】 表单检验 注:prop对应的不单单是rules规则里面的验证项,同时对应着我们form-item下的v-model的值。prop绑定的类要与el-form-item下的v-model的值相对应。否则就算校验元素输入字符,也会提示“请输入”之类的提示语,造成校验不友好问题。 清除表单校验 // 清除表单校验的提示 if (this.$refs['XXX']) {...

表单检验

在这里插入图片描述
注:prop对应的不单单是rules规则里面的验证项,同时对应着我们form-item下的v-model的值。prop绑定的类要与el-form-item下的v-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();
	}
}

  
 

延伸阅读:

文章来源: shq5785.blog.csdn.net,作者:No Silver Bullet,版权归原作者所有,如需转载,请联系作者。

原文链接:shq5785.blog.csdn.net/article/details/106431017

【版权声明】本文为华为云社区用户转载文章,如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

作者其他文章

评论(0

抱歉,系统识别当前为高风险访问,暂不支持该操作

    全部回复

    上滑加载中

    设置昵称

    在此一键设置昵称,即可参与社区互动!

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

    *长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。