vue 验证表单格式rule和清空表单resetfields

一、前端界面
有一个对话框，内有2个输入框testappname和testdescription，以及2个按钮cancel和submit

<el-dialog title="Test" v-model="testFormVisible" :close-on-click-modal="false">
    <el-form :model="testForm" label-width="120px" :rules="testFormRules" ref="testForm">
        <el-form-item label="testappname" prop="testappname">
              <el-input v-model="testForm.testappname" auto-complete="off"></el-input>
        </el-form-item>
    <el-form-item label="testdescription" prop="testdescription">
              <el-input type="textarea" v-model="testForm.testdescription"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click.native="testFormVisible = false">cancel</el-button>
        <el-button type="primary" @click.native="testSubmit" :loading="addLoading">submit</el-button>
    </div>
</el-dialog>

二、增加表单格式校验规则rule
给这2个输入框都加入非空校验
注意：el-form-item上设置prop字段，表单rule验证和resetfields() 清理的都是prop绑定的字段

testFormRules: {
    //trigger: 触发方式，blur 失去焦点事件，focus 获取焦点事件，change数据改变
    testappname: [{ required: true, message: '请输入appname', trigger: 'blur' }],
    testdescription: [{ required: true, message: '请输入description', trigger: 'blur' }]
},
testForm: {
    testappname: '',
    testdescription: ''
}

三、清空表单resetfields
form要设置ref，且ref值要与 this.$refs[formName].resetFields()中的foemName一致

methods: {
    resetForm () {
       this.$refs['testForm'].resetFields();
   }
}