您好,登录后才能下订单哦!
这篇文章运用简单易懂的例子给大家介绍element-ui和vue实现表单验证提示语清除操作,内容非常详细,感兴趣的小伙伴们可以参考借鉴,希望对大家能有所帮助。
代码一、
let result = Vue.extend({ name: 'recommend-list', template: template, watch: { dialogSequenceVisible: function (val,oldVla) { this.$refs["form"].resetFields(); } }, data() { let validateSequence = (rule, value, callback) => { let val = this.trim(value); if (val == '') { callback(new Error('顺序值不允许为空')); } else if (value > 9223372036854775807) { callback(new Error('顺序值不能超过9223372036854775807')); } else if (!this.isNumber(val)) { callback(new Error('必须输入正整数'));
代码二、
<el-dialog title="调整顺序" :visible.sync="dialogSequenceVisible" @close='closeDialog'> <el-form label-width="200px" :model="form" :rules="rules" ref="form"> <el-form-item label="请输入调整的顺序值:" prop="sequence"> <el-input v-model="form.sequence" auto-complete="off"></el-input> </el-form-item> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="dialogSequenceVisible = false">取 消</el-button> <el-button type="primary" @click="position()">确 定</el-button> </div> </el-dialog>
图二、
但是,这样会页面调试模式会报错 “ Cannot read property 'resetFields' of undefined ” 错误, 应该是第一次弹出dialog对话框的时候没有弄到DOM里, 需要修改vue中的watch代码, 做个限定. 这样不但可以清除提示语, 还可以清空输入框里内容残留, 如下:
let result = Vue.extend({ name: 'recommend-list', template: template, watch: { dialogSequenceVisible: function (val,oldVla) { if (this.$refs['form'] != undefined) { this.$refs["form"].resetFields(); } } },
补充知识:elementUI vue 编辑中的input的验证残留清除
当使用编辑的时候, 假如上次的验证没通过, 报红了, 下次再点击编辑的时候还会报红,因此要清除验证残留, 方式有两种:
this.$refs["from"].resetFields(); //移除校验结果并重置字段值
this.$refs["from"].clearValidate(); //移除校验结果
关于element-ui和vue实现表单验证提示语清除操作就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。