vue+element-Ui实现简单的表单必填项验证

• 在项目中，通常我们在提交表单的时候需要进行一个必填项的验证，在这里，就简单的介绍一下element提供的表单组件中的必填项验证
• 通过阅读文档，可以得知el-form上是自带一个validate方法的

对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise

一、首先，我们要调用el-form上的方法，需要绑定一个ref，通过ref链的方式来进行调用

二、通过自带的属性rules来绑定一个验证规则

• 验证规则：

  • 是否必须填： required:true|| fasle

  • 根据正则表达式验证： pattern

  • 最大长度和最小长度： min和max

  • 数据转换：transform（value）{return}

  • 自定义校验功能：validador:fn(rule, value, callback)

  • 自带验证类型： type

    • string：必须是类型string。
    • number：必须是类型number。
    • boolean：必须是类型boolean。
    • method：必须是类型function。
    • regexp：必须是RegExp创建新项时不生成异常的实例 或* 字符串RegExp。
    • integer：必须是类型number和整数。
    • float：必须是类型number和浮点数。
    • array：必须是由…确定的数组Array.isArray。
    • object：必须是类型object而不是Array.isArray。
    • enum：价值必须存在于enum。
    • date：值必须有效，由确定 Date
    • url：必须是类型url。
    • hex：必须是类型hex。
    • email：必须是类型email。

    Rules: {
      goodsName: [
    		// 还可以通过pattern来加入正则    
        { type: 'date'，required: true, message: '商品名不能为空', trigg: 'blur' },
        // 也可以放入两条验证规则
        { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
      ]
    }
    

三、model为表单控件绑定的数据对象

四、el-form-item中prop是与rules验证规则对应的名称，验证的就是v-model存在不存在

五、这样在点击最后的提交按钮的时候，只需触发一个我们的validate就可以了

<el-form ref="basicInfo" :model="Form" :rules="Rules" label-width="120px" class="basicInfo">
  <el-form-item
    label="商品名称："
    prop="goodsName"
  >
    <el-col class="goodsAddSecond-InputWidth">
      <el-input v-model="Form.goodsName"></el-input>
    </el-col>
  </el-form-item>
</el-form>
<el-button @click="submit('basicInfo')"></el-button>

submit(formName) {
  this.$refs[formName].validate(valid => {
    if(valid){
      alert("验证成功")
    }else{
      alert("验证失败")
      return false
    }
	})
}

这是我们一个简单的利用element-Ui提供的方法实现一个表单必填项验证就完成了。