表单验证

表单验证

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: 当校验完成时调用的回调函数

问题：

1. 要提交表单时怎么保证表单验证都是通过的
2. 如果提交失败 表单内容回显