Click the close or confirm button in the element el-dialog to clear the content and verification

Code:

<template>
  <div>
    <el-button type="primary" @click="dialogFormVisible = true">打开嵌套表单的Dialog</el-button>
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible">
      <el-form ref="form" :model="form" :rules="rules" :before-close="closeDiv">
        <el-form-item label="姓名"prop = " Name " > 
          <el-input v-model = " form.Name " placeholder = " Please enter your real name " /> 
        </ el-form-item> 
        <el-form-item label = " mobile number " prop = " Mobile " > 
          <el-input v-model = " form.Mobile " placeholder = " Please enter your mobile phone number " maxlength = " 11 " /> 
        </ el-form-item> 
        <el-form-item label = " ID number " prop =" idCardNo " > 
          <el-input v-model = " form.idCardNo " placeholder = " Please enter your ID number " maxlength = " 20 " /> 
        </ el-form-item> 
        <el-form-item label = " Detailed address " prop = " address " > 
          <el-input v-model = " form.address " type = " textarea " placeholder = " Please enter detailed address " > </ el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="Submit">提交 </el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dialogFormVisible:false,
      Form verification
      //
      form: {},//Form verification pattern can do regular verification 
      rules: { 
        Name: [ 
          {required: true , pattern: / ^ [\ u4e00- \ u9fa5a-zA-Z] { 1 , 20 } $ /, message: " Please enter Chinese and English names " , trigger: " blur " } 
        ], 
        address: [ 
          {required: true , message: " Please enter the detailed address " , trigger: " blur " } 
        ], 
        Mobile: [ 
          { 
            required: true , 
            pattern: / ^. 1 [ . 3 | . 4 | . 5 | . 6 | . 7 | . 8 | . 9 ] [ 0 - . 9 ] \ D { . 8 } $ / , 
            Message: " Please enter a valid phone number " , 
            Trigger: " Blur " 
          } 
        ], 
        idCardNo: [ 
          { 
            required: true , 
            pattern: / ^ \ d { 6 } ( 18 | 19 | 20) \ D {? 2 } ( 0 [ . 1 - . 9 ] | . 1 [ 012 ]) ( 0 [ . 1 - . 9 ] | [ 12 is ] \ D | . 3 [ 01 ]) \ D { . 3 } (\ D | [xX ]) $ / , 
            message: " Please enter the correct format ID number " , 
            trigger: " blur " 
          } 
        ], 
      }, 
    } 
  }, 
  methods: { 
    // Click to submit 
    Submit () {
       this . $ refs [ ' form ' ] .validate (valid => {
         if (valid) { // Requesting the background interface means verifying the operation through the
           // requesting background interface
           // After the request is successful, clear the content in the input box 
          this . $ nextTick (() = > {
             // form corresponds to your written <el-form ref = "form"> </ el-form> 
            this . $ refs [ " form " ] .resetFields (); 
          }); 
        } 
      }) 
    }, 
    cancel () { 
      this .dialogFormVisible = false 
      // click the cancel button when clear the contents of the input box to clear validation
       //   operation after this. $ nextTick acquired node 
      this. $ nextTick (() => {
         // form corresponds to the <el-form ref = "form"> </ el-form> 
        this you wrote . $ refs [ " form " ] .resetFields (); 
      }); 
    } , 
    // upper right corner × cancel button 
    closeDiv () {
       this . $ NextTick (() => {
         // form corresponds to your written <el-form ref = "form"> </ el-form> 
        this . $ Refs [ " form " ] .resetFields (); 
      }); 
    } 
  } 
}
 </ script>

If there is any error or improvement, please point out the correction