Elementuid的Form 组件提供了表单验证的功能，只需要通过 rules 属性传入约定的验证规则，并将 Form-Item 的 prop 属性设置为需校验的字段名即可。
写个简单的例子：
1.基本用法：
<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="活动名称" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
<script>
export default {
data() {
return {
ruleForm: {
name: '',
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
]
}
};
}
}
</script>
如果它不止这种简单的校验，可以通过validator另外再加方法：
<script>
export default {
data() {
return {
ruleForm: {
name: '',
},
rules: {
name: [
{ required: true, message: '请输入活动名称', trigger: 'blur' },
{ min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
{ validator: this.otherRules, trigger: 'blur' }
]
}
};
},
methods(){
otherRules(rule, val, callback) {
if () {
callback(new Error(xxx'))
} else if () {
callback(new Error('xxxxx'))
} else {
callback()
}
}
}
}
</script>
注：像长度这种校验也可以放到validator对应的方法里，但是不能为空的校验最好与它分开（不然有时候错误提示会是英文的形式）
2.规则校验：
submit(){
this.$refs.ruleFrom.validate(valid => {
if(valid){
//校验通过后的操作
}
})
}
有时候我们并不想整个表单一起校验，只想校验其中某一个：
submit(){
this.$refs.ruleFrom.validateField('name',valid => {
if(!valid){
//校验通过后的操作
}
})
}
3.清空校验
（1）初始化的时候就出现了错误验证。在表单初始赋值后，加如下代码：（按道理讲，此处应该加clearValidate(),但是并不起作用，，，根据自身情况定吧*_*）
this.$refs.ruleForm.resetFields()
（2）如果有一个审批意见选项，同意的时候就进行表单验证，不同意的时候就直接提交，在选择审批意见时需要先清空表单验证：
this.$refs.ruleForm.clearValidate();
this.$refs.ruleForm.clearValidate(['name']);//如果清除某个表单的校验
//或者在el-form-item层加ref
<el-form-item ref="name">...</el-form-item>
this.$refs.name.clearValidate()
总结一下二者的区别：
clearValidate() //仅清空校验
resetFields() //不仅清空校验，还重置字段值