码迷,mamicode.com
首页 > Web开发 > 详细

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

时间:2019-08-02 10:35:30      阅读:2156      评论:0      收藏:0      [点我收藏+]

标签:function   检查   查看   key   提示   解决办法   fun   efi   介绍   

 

方法使用前需了解:

来自”和“小编的小提示:

首先打印一下this.$refs[formName],检查是否拿到了正确的需要验证的form。

其次在拿到了正确的form后,检查该form上添加的表单验证是否正确,需要注意的点有:

1.使用此方法前检查prop一定必须要写在<el-form-item>上面,写在里面的input上或者其他任何地方都不行(el-form-item prop属性绑定)

2.el-form rules,model属性绑定,ref标识

自定义表单验证的坑:

 

一.validate/resetFields 未定义。

1:要验证的DOM,还没有加载出来。

2:有可能this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate(); 这种方式,不是你们想要的结果。

解决办法:

  1.  
    this.ticketDialog = true;
  2.  
     
  3.  
    //对整个表单进行重置,将所有字段值重置为初始值并移除校验结果
  4.  
     
  5.  
    this.$nextTick(function() {
  6.  
     
  7.  
    this.$refs.ticketInfoForm.resetFields();
  8.  
     
  9.  
    })
或者:this.$refs[ruleForm].validate() 方式不识别。需要使用: this.$refs.ruleForm.validate();

那么如下所示:

  1.  
    methods: {
  2.  
     
  3.  
    submitForm(ruleForm2) {
  4.  
     
  5.  
    //官网 this.$refs[ruleForm2].validate();
  6.  
     
  7.  
    //在实际使用中,会报错。validate未定义
  8.  
     
  9.  
    //使用this.$refs.ruleForm2.validate(); 成功。
  10.  
     
  11.  
    this.$refs[ruleForm2].validate((valid) => {
  12.  
     
  13.  
    if (valid) {
  14.  
     
  15.  
    alert(‘submit!‘);
  16.  
     
  17.  
    } else {
  18.  
     
  19.  
    console.log(‘error submit!!‘);
  20.  
     
  21.  
    return false;
  22.  
     
  23.  
    }
  24.  
     
  25.  
    });
  26.  
     
  27.  
    }
  28.  
     
  29.  
    }

二. 数字类型的验证, 兼容mac和windows系统。

数字类型的验证需要在 v-model 处加上 .number 的修饰符,这是 Vue 自身提供的用于将绑定值转化为 number 类型的修饰符。
如下所示:

  1.  
    <el-form-item label="年龄" prop="age">
  2.  
    <el-input type="number" v-model.number="ruleForm2.age"></el-input>
  3.  
    </el-form-item>

如有不解,可以查看具体案例:

html:

  1.  
    <script src="//unpkg.com/vue/dist/vue.js"></script>
  2.  
    <script src="//unpkg.com/element-ui/lib/index.js"></script>
  3.  
    <div id="app">
  4.  
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
  5.  
    <el-form-item label="密码" prop="pass">
  6.  
    <el-input type="password" v-model="ruleForm.pass" auto-complete="off"></el-input>
  7.  
    </el-form-item>
  8.  
    <el-form-item label="确认密码" prop="checkPass">
  9.  
    <el-input type="password" v-model="ruleForm.checkPass" auto-complete="off"></el-input>
  10.  
    </el-form-item>
  11.  
    <el-form-item label="年龄" prop="age">
  12.  
    <el-input type="number" v-model.number="ruleForm.age"></el-input>
  13.  
    </el-form-item>
  14.  
    <el-form-item>
  15.  
    <el-button type="primary" @click="submitForm(‘ruleForm‘)">提交</el-button>
  16.  
    <el-button @click="resetForm(‘ruleForm‘)">重置</el-button>
  17.  
    </el-form-item>
  18.  
    </el-form>
  19.  
    </div>

js:

  1.  
    var Main = {
  2.  
    data() {
  3.  
    var checkAge = (rule, value, callback) => {
  4.  
    if (!value) {
  5.  
    return callback(new Error(‘年龄不能为空‘));
  6.  
    }
  7.  
    setTimeout(() => {
  8.  
    if (!Number.isInteger(value)) {
  9.  
    callback(new Error(‘请输入数字值‘));
  10.  
    } else {
  11.  
    if (value < 18) {
  12.  
    callback(new Error(‘必须年满18岁‘));
  13.  
    } else {
  14.  
    callback();
  15.  
    }
  16.  
    }
  17.  
    }, 1000);
  18.  
    };
  19.  
    var validatePass = (rule, value, callback) => {
  20.  
    if (value === ‘‘) {
  21.  
    callback(new Error(‘请输入密码‘));
  22.  
    } else {
  23.  
    if (this.ruleForm.checkPass !== ‘‘) {
  24.  
    this.$refs.ruleForm.validateField(‘checkPass‘);
  25.  
    }
  26.  
    callback();
  27.  
    }
  28.  
    };
  29.  
    var validatePass2 = (rule, value, callback) => {
  30.  
    if (value === ‘‘) {
  31.  
    callback(new Error(‘请再次输入密码‘));
  32.  
    } else if (value !== this.ruleForm.pass) {
  33.  
    callback(new Error(‘两次输入密码不一致!‘));
  34.  
    } else {
  35.  
    callback();
  36.  
    }
  37.  
    };
  38.  
    return {
  39.  
    ruleForm: {
  40.  
    pass: ‘‘,
  41.  
    checkPass: ‘‘,
  42.  
    age: ‘‘
  43.  
    },
  44.  
    rules: {
  45.  
    pass: [
  46.  
    { validator: validatePass, trigger: ‘blur‘ }
  47.  
    ],
  48.  
    checkPass: [
  49.  
    { validator: validatePass2, trigger: ‘blur‘ }
  50.  
    ],
  51.  
    age: [
  52.  
    { validator: checkAge, trigger: ‘blur‘ }
  53.  
    ]
  54.  
    }
  55.  
    };
  56.  
    },
  57.  
    methods: {
  58.  
    submitForm(ruleForm) {
  59.  
    //官网 this.$refs[ruleForm].validate();
  60.  
    //在实际使用中,会报错。validate未定义
  61.  
    //
  62.  
    //使用this.$refs.ruleForm.validate(); 成功。
  63.  
    this.$refs.ruleForm.validate((valid) => {
  64.  
    if (valid) {
  65.  
    alert(‘submit!‘);
  66.  
    } else {
  67.  
    console.log(‘error submit!!‘);
  68.  
    return false;
  69.  
    }
  70.  
    });
  71.  
    },
  72.  
    resetForm(formName) {
  73.  
    this.$nextTick(function() {
  74.  
    this.$refs[formName].resetFields();
  75.  
    })
  76.  
    }
  77.  
    }
  78.  
    }
  79.  
    var Ctor = Vue.extend(Main)
  80.  
    new Ctor().$mount(‘#app‘)

以上介绍了" (vue.js)element ui 表单验证 this$refs[formName]validate"里面的小坑的问题解答,希望对有需要的网友有所帮助。

 

关于vue.js element ui 表单验证 this.$refs[formName].validate()的问题

标签:function   检查   查看   key   提示   解决办法   fun   efi   介绍   

原文地址:https://www.cnblogs.com/huge1122/p/11286860.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!