参考http://element.eleme.io/#/zh-CN/component/form
使用:只需要通过 rules
属性传入约定的验证规则,并将 Form-Item 的 prop
属性设置为需校验的字段名即可。校验规则参见 async-validator
1.在from表单上配置属性rules
<el‐form :model="pageForm" :rules="pageFormRules" label‐width="80px" >
2.数据模型中编写校验规则、
pageFormRules: {
siteId:[ {required: true, message: '请选择站点', trigger: 'blur'} ],
templateId:[ {required: true, message: '请选择模版', trigger: 'blur'} ],
pageName: [ {required: true, message: '请输入页面名称', trigger: 'blur'} ],
pageWebPath: [ {required: true, message: '请输入访问路径', trigger: 'blur'} ],
pagePhysicalPath: [ {required: true, message: '请输入物理路径', trigger: 'blur'} ]
}
3.在form表单上添加 ref属性(ref=“pageForm”)在校验时引用此表单对象
<el‐form :model="pageForm" :rules="pageFormRules" label‐width="80px" ref="pageForm">
4.执行校验
<el-button type="primary" @click="submitForm('pageForm')">立即创建</el-button>
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();
}
}
}