element-ui表单验证

黄良钵

分类: 程序开发 0 0

表单验证那里跟着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. }
  • 0人 Love
  • 0人 Haha
  • 0人 Wow
  • 0人 Sad
  • 0人 Angry
element-ui、Vue、表单验证

作者简介:黄良钵

打赏

博客站长,前端开发工程师

共 0 条评论关于 “element-ui表单验证”

Loading...