表单验证那里跟着element文档报错。。。

主要在 this.$refs[formName].validate() 这里报错,我打印了下this.$refs看看里面有什么,结果是这样的:

element-ui表单验证

先上代码看看:

1. <el-form :model="ruleForm" :rules="rules" ref="ruleForm" class='form' label-width="80px">
2.  <el-form-item label="账号"
3.    prop="name"
4.  >
5.    <el-input v-model="ruleForm.name"></el-input>
6.  </el-form-item>
7.  <el-form-item label="密码"
8.    prop="password"
9.  >
10.    <el-input v-model="ruleForm.password"></el-input>
11.  </el-form-item>
12.  <el-form-item label="验证码"
13.    prop="code"
14.  >
15.    <el-input v-model="ruleForm.code"></el-input>
16.  </el-form-item>
17.  <el-form-item>
18.    <el-button type="primary" @click="onSubmit(ruleForm)">登录</el-button>
19.  </el-form-item>
20. /el-form>

 

1. data () {
2.     return {
3.       code: '', // 验证码svg
4.       ruleForm: {
5.         name: '', // 用户名
6.         password: '', // 密码
7.         code: '' // 验证码
8.       },
9.       rules: {
10.         name: [
11.           { required: true, message: '请输入账号', trigger: 'blur' }
12.         ],
13.         password: [
14.           { required: true, trigger: 'blur', message: '请输入密码' }
15.         ],
16.         code: [
17.           { required: true, trigger: 'blur', message: '请输入验证码' }
18.         ]
19.       }
20.     }
21.   },
22.   methods: {
23.     onSubmit (ruleForm2) {
24.       this.$refs.ruleForm.validate((valid) => {
25.         if (valid) {
26.           console.log(valid)
27.         } else {
28.           console.log('error submit!!')
29.           return false
30.         }
31.       })
32.     },
33. }