如何动态获取验证消息

时间:2019-01-24 07:29:56

标签: vue.js vue-cli element-ui

我正在执行表单验证,但是当我尝试通过动态验证时,它不起作用。

如何在不使用验证器方法的情况下进行动态验证,因为在表单中有很多字段,对于每个字段,我都需要动态验证,如果我将所有人使用验证器方法,那么我的代码将增加,而我不会不需要。

谁能建议我如何在消息中传递动态值?

var Main = {
  data() {
    return {
      ruleForm2: {
        email: "",
        validationMsg: {
          msg: "Please Enter Email"
        }
      },
      
      rules2: {
        email: [{
          required: true,
          message: "Please Enter Email",
          trigger: 'blur'
        }]
        //email: [
        //  {
        //    required: true, 
        //    message: this.validationMsg.msg, 
        //    trigger: 'blur'
        //  }
        //]
      }
    }
  },
  
  methods: {
    submit() {
      this.$refs['ruleForm2'].validate(valid => {
        console.log("res", res);
        
        if (valid) {
          alert('true')
        } 
        else {
          alert('false')
          return false
        }
      })
    }
  }
}

var Ctor = Vue.extend(Main)

new Ctor().$mount('#app')
@import url("//unpkg.com/element-ui@1.4.1/lib/theme-default/index.css");
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@1.4.1/lib/index.js"></script>

<div id="app">
  <template>
    <el-form :model="ruleForm2" status-icon :rules="rules2" ref="ruleForm2" label-width="120px" class="demo-ruleForm">
      <el-form-item label="Email" prop="email">
         <el-input type="email" v-model="ruleForm2.email" autocomplete="off"></el-input>
      </el-form-item>
      
      <el-form-item>
         <el-button @click="submit">Submit</el-button>
      </el-form-item>
    </el-form>
  </template>
</div>

0 个答案:

没有答案