vue+element-Ui实现简单的表单必填项验证（1）
- 在项目中，通常我们在提交表单的时候需要进行一个必填项的验证，在这里，就简单的介绍一下element提供的表单组件中的必填项验证
- 通过阅读文档，可以得知el-form上是自带一个validate方法的
对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
一、首先，我们要调用el-form上的方法，需要绑定一个ref，通过ref链的方式来进行调用
二、通过自带的属性rules来绑定一个验证规则
-
验证规则：
-
是否必须填： required:true|| fasle
-
根据正则表达式验证： pattern
-
最大长度和最小长度： min和max
-
数据转换：transform（value）
-
自定义校验功能：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
}
})
}
