前端

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

云博小周宇3 Mins Read

   

方法使用前需了解：

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

首先打印一下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”里面的小坑的问题解答，希望对有需要的网友有所帮助。