表单验证
elementUi的form组件中添加了async-validator.
如下:
< template/>中
。
//动态绑定Form中需要用到验证规则的数据
<el-form :model="ruleForm" :rules="rules" ref="ruleForm">
//form-item中获取prop值
<el-form-item label="活动名称" prop="name">
//input中获取输入的值
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
</el-form>
< script />中
//动态绑定Form中需要用到验证规则的数据
//script标签里的rules是一个对象,是所有的验证规则.
export default {
data() {
return {
ruleForm: {
name: "",//prop值
......
},
rules: {
//prop对应的规则, 每一项用prop绑定验证规则.
name: [
{ required: true, message: "请输入活动名称", trigger: "blur" },
{ min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
],
},
}
},
methods: {
submitForm(formName) {
this.$refs[formName].validate(valid => {
if (valid) {
alert("submit!");
} else {
console.log("error submit!!");
return false;
}
});
},
resetForm(formName) {
this.$refs[formName].resetFields();
}
}
};
validator
指定的字段自定义同步校验函数
validator(rule, value, callback){}
rule参数: 一个对象,包含校验字段的信息以及校验规则
value要: 校验的值。
callback: 当校验完成时调用的回调函数
问题:
- 要提交表单时怎么保证表单验证都是通过的
- 如果提交失败 表单内容回显