element-ui和vue实现表单验证提示语清除操作

发布时间:2020-11-03 19:35:12 作者:Leah
来源:亿速云 阅读:1213

这篇文章运用简单易懂的例子给大家介绍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>

图二、

element-ui和vue实现表单验证提示语清除操作

但是,这样会页面调试模式会报错 “ 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实现表单验证提示语清除操作就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。

推荐阅读:
  1. h5如何实现输入框提示语和正常文本框提示语
  2. 怎么设置H5的表单验证失败提示语

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

element-ui vue

上一篇:vue实现在界面发送表情

下一篇:vue与node模版引擎的渲染标记{{}}(双花括号)冲突问题怎么解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》