elementUI的表单校验

参考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();
      }
    }
      }