Vue进阶（三十）：vue中使用element-ui进行表单验证

一、简单逻辑验证（直接使用rules）
实现思路
html中给el-form增加 :rules="rules"

html中在el-form-item 中增加属性 prop="名称"

js中直接在data中定义rules:{}

html部分

        
          
          常用地址
        
      

js部分

二、自定义验证逻辑
实现思路

1. html中给el-form增加 :rules="rules"
2. html中在el-form-item 中增加属性 prop="名称"
3. js中直接在data中在rules中的名称对应中设置 validator: 验证器名称,
4. js中在data中 return之上书写验证器对应的js验证逻辑

html部分

js部分

效果图如下

三、表单提交
实现思路

1. html中给el-form增加 ref="form" :model="ruleForm"
2. html中给提交按钮增加点击事件 @click="submitForm('form')"
   （）中对应的为form的ref="form"

js中直接在methods中定义提交事件 submitForm(){}
html部分

//form

//表单项
  
          
  、
  ...
  //提交按钮
  立即登录             

js部分

 methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
             //如果通过验证 to do...
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }