ElementUI关于表单验证不起作用的问题解决

在项目中用到ElementUI的表单验证时,发现离开焦点后获取的输入框内容是空的,表示就是获取不到输入的字段。
在这里插入图片描述
以下是官网给出的表单验证的步骤和相关的代码。这是上半部分的。
在这里插入图片描述script部分的代码如下:
在这里插入图片描述重点来了:在仔细检查后发现,element-ui的表单校验规则中,el-form-item绑定的prop必须和该item下的表单元素绑定的v-model值的名称一致。也就是我把formData里的属性名改成和rules里的属性名一致就可以了!!!但是,在官网中并没有说到这个名字需要一致的问题。

官网的使用规则是这样的:
官网的使用规则
在这贴上我部分的代码:

   <el-dialog title="提示" :visible.sync="modiDialog" width="80%" :before-close="handleClose" >
     <el-form :model="ruleForm" label-width="100px" :rules="rules">
       <el-form-item label="用户姓名" prop="modiName">
         <el-input placeholder="请输入姓名" v-model="ruleForm.modiName"></el-input>
       </el-form-item>
         <el-form-item label="密码" prop="modiPassword">
           <el-input placeholder="请输入密码" v-model="ruleForm.modiPassword" show-password></el-input>
         </el-form-item>
       <el-form-item label="性别" prop="sex">
         <el-radio-group v-model="ruleForm.sex">
           <el-radio label="男"></el-radio>
           <el-radio label="女"></el-radio>
         </el-radio-group>
       </el-form-item>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="modiDialog = false">取 消</el-button>
       <el-button type="primary" @click="modiDialog = false">确 定</el-button>
     </span>
   </el-dialog>

script部分的:

export default {
  data() {
    return {
      ruleForm: {
        // 定义修改的数据
        modiName : '',
        modiPassword : '',
        sex: '',
      },
      tableData: [],
      delName: '',
      modiDialog : false,
      //表单验证
      rules:{
        modiName:[
           { required: true, message: '请输入姓名', trigger: 'blur' },
           { min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
        ],
        modiPassword:[
           { required: true, message: '请输入密码', trigger: 'blur' },
           { min: 6, max: 15, message: '长度在 6 到 15 个字符', trigger: 'blur' }
        ],
        sex: [
           { required: true, message: '请选择性别', trigger: 'change' }
        ],
      }
    }

以上,虽然问题不大,但是找了挺久的bug就当记录一下,下次就知道避免这个坑了。

  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值