improve form's docs

examples/docs/en-US/form.md

@@ -120,78 +120,46 @@
             { validator: checkAge, trigger: 'blur' }
           ]
         },
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
             key: Date.now(),
             value: ''
           }],
           email: ''
         },
-        dynamicRule: {
-          email: [
-            { required: true, message: 'Please input email address', trigger: 'blur' },
-            { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
-          ]
+        numberValidateForm: {
+          age: ''
         }
       };
     },
     methods: {
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+      onSubmit() {
+        console.log('submit!');
       },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate(valid => {
-          if (valid) {
-            alert('Submit');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+      onRuleFormSubmit() {
+        console.log('onRuleFormSubmit');
       },
-      handleSubmit3(ev) {
-        this.$refs.dynamicForm.validate(valid => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
-            alert('Submit');
+            alert('submit!');
           } else {
             console.log('error submit!!');
             return false;
           }
         });
       },
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleReset3() {
-        this.$refs.dynamicForm.resetFields();
-      },
-      handleValidate(prop, errorMsg) {
-        console.log(prop, errorMsg);
-      },
-      onSubmit() {
-        console.log('submit!');
-      },
-      onRuleFormSubmit() {
-        console.log('onRuleFormSubmit');
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item)
+        var index = this.dynamicValidateForm.domains.indexOf(item)
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1)
+          this.dynamicValidateForm.domains.splice(index, 1)
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
+        this.dynamicValidateForm.domains.push({
           key: Date.now(),
           value: ''
         });
@@ -552,8 +520,8 @@ Form component allows you to verify your data, helping you find and correct erro
     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit">Create</el-button>
-    <el-button @click="handleReset">Reset</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm')">Create</el-button>
+    <el-button @click="resetForm('ruleForm')">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -597,11 +565,8 @@ Form component allows you to verify your data, helping you find and correct erro
       };
     },
     methods: {
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -609,6 +574,9 @@ Form component allows you to verify your data, helping you find and correct erro
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -632,8 +600,8 @@ Form component allows you to verify your data, helping you find and correct erro
     <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit2">Submit</el-button>
-    <el-button @click="handleReset2">Reset</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm2')">Submit</el-button>
+    <el-button @click="resetForm('ruleForm2')">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -694,11 +662,8 @@ Form component allows you to verify your data, helping you find and correct erro
       };
     },
     methods: {
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -706,6 +671,9 @@ Form component allows you to verify your data, helping you find and correct erro
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -718,12 +686,19 @@ Form component allows you to verify your data, helping you find and correct erro
 :::demo In addition to passing all validation rules at once on the form component, you can also pass the validation rules or delete rules on a single form field dynamically.
 
 ```html
-<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="120px" class="demo-dynamic">
-  <el-form-item prop="email" label="Email">
-    <el-input v-model="dynamicForm.email"></el-input>
+<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="120px" class="demo-dynamic">
+  <el-form-item
+    prop="email"
+    label="Email"
+    :rules="[
+      { required: true, message: 'Please input email address', trigger: 'blur' },
+      { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
+    ]"
+  >
+    <el-input v-model="dynamicValidateForm.email"></el-input>
   </el-form-item>
   <el-form-item
-    v-for="(domain, index) in dynamicForm.domains"
+    v-for="(domain, index) in dynamicValidateForm.domains"
     :label="'Domain' + index"
     :key="domain.key"
     :prop="'domains.' + index + '.value'"
@@ -734,33 +709,27 @@ Form component allows you to verify your data, helping you find and correct erro
     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">Delete</el-button>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit3">Submit</el-button>
+    <el-button type="primary" @click="submitForm('dynamicValidateForm')">Submit</el-button>
     <el-button @click="addDomain">New domain</el-button>
-    <el-button @click="handleReset3">Reset</el-button>
+    <el-button @click="resetForm('dynamicValidateForm')">Reset</el-button>
   </el-form-item>
 </el-form>
 <script>
   export default {
     data() {
       return {
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
             key: 1,
             value: ''
           }],
           email: ''
-        },
-        dynamicRule: {
-          email: [
-            { required: true, message: 'Please input email address', trigger: 'blur' },
-            { type: 'email', message: 'Please input correct email address', trigger: 'blur,change' }
-          ]
         }
       };
     },
     methods: {
-      handleSubmit3(ev) {
-        this.$refs.dynamicForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -769,17 +738,17 @@ Form component allows you to verify your data, helping you find and correct erro
           }
         });
       },
-      handleReset3() {
-        this.$refs.dynamicForm.resetFields();
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item);
+        var index = this.dynamicValidateForm.domains.indexOf(item);
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1);
+          this.dynamicValidateForm.domains.splice(index, 1);
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
+        this.dynamicValidateForm.domains.push({
           key: Date.now(),
           value: ''
         });
@@ -788,7 +757,56 @@ Form component allows you to verify your data, helping you find and correct erro
   }
 </script>
 ```
-::: 
+:::
+
+### Number Validate
+
+::: demo Number Validate need a `.number` modifier added on the input `v-model` binding，it's used to transform the string value to the number which is provided by Vuejs.
+```html
+<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
+  <el-form-item
+    label="age"
+    prop="age"
+    :rules="[
+      { required: true, message: 'age is required'},
+      { type: 'number', message: 'age must be a number'}
+    ]"
+  >
+    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('numberValidateForm')">Submit</el-button>
+    <el-button @click="resetForm('numberValidateForm')">Reset</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        numberValidateForm: {
+          age: ''
+        }
+      };
+    },
+    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();
+      }
+    }
+  }
+</script>
+```
+:::
 
 ### Form Attributes
 

examples/docs/zh-CN/form.md

@@ -83,8 +83,6 @@
           age: ''
         },
         formLabelWidth: '80px',
-        options: [
-        ],
         rules: {
           name: [
             { required: true, message: '请输入活动名称', trigger: 'blur' },
@@ -120,78 +118,43 @@
             { validator: checkAge, trigger: 'blur' }
           ]
         },
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
             value: '',
             key: Date.now()
           }],
           email: ''
         },
-        dynamicRule: {
-          email: [
-            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
-          ]
+        numberValidateForm: {
+          age: ''
         }
       };
     },
     methods: {
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
-          if (valid) {
-            alert('submit!');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
-      },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate(valid => {
-          if (valid) {
-            alert('申请已提交');
-          } else {
-            console.log('error submit!!');
-            return false;
-          }
-        });
+      onSubmit() {
+        console.log('submit!');
       },
-      handleSubmit3(ev) {
-        this.$refs.dynamicForm.validate(valid => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
-            alert('申请已提交');
+            alert('submit!');
           } else {
             console.log('error submit!!');
             return false;
           }
         });
       },
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleReset3() {
-        this.$refs.dynamicForm.resetFields();
-      },
-      handleValidate(prop, errorMsg) {
-        console.log(prop, errorMsg);
-      },
-      onSubmit() {
-        console.log('submit!');
-      },
-      onRuleFormSubmit() {
-        console.log('onRuleFormSubmit');
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item)
+        var index = this.dynamicValidateForm.domains.indexOf(item)
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1)
+          this.dynamicValidateForm.domains.splice(index, 1)
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
+        this.dynamicValidateForm.domains.push({
           value: '',
           key: Date.now()
         });
@@ -545,8 +508,8 @@
     <el-input type="textarea" v-model="ruleForm.desc"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit">立即创建</el-button>
-    <el-button @click="handleReset">重置</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
+    <el-button @click="resetForm('ruleForm')">重置</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -590,11 +553,8 @@
       };
     },
     methods: {
-      handleReset() {
-        this.$refs.ruleForm.resetFields();
-      },
-      handleSubmit(ev) {
-        this.$refs.ruleForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -602,6 +562,9 @@
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -624,8 +587,8 @@
     <el-input v-model.number="ruleForm2.age"></el-input>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit2">提交</el-button>
-    <el-button @click="handleReset2">重置</el-button>
+    <el-button type="primary" @click="submitForm('ruleForm2')">提交</el-button>
+    <el-button @click="resetForm('ruleForm2')">重置</el-button>
   </el-form-item>
 </el-form>
 <script>
@@ -686,11 +649,8 @@
       };
     },
     methods: {
-      handleReset2() {
-        this.$refs.ruleForm2.resetFields();
-      },
-      handleSubmit2(ev) {
-        this.$refs.ruleForm2.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -698,6 +658,9 @@
             return false;
           }
         });
+      },
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       }
     }
   }
@@ -709,12 +672,19 @@
 
 ::: demo 除了在 Form 组件上一次性传递所有的验证规则外还可以在单个的表单域上传递属性的验证规则
 ```html
-<el-form :model="dynamicForm" :rules="dynamicRule" ref="dynamicForm" label-width="100px" class="demo-dynamic">
-  <el-form-item prop="email" label="邮箱">
-    <el-input v-model="dynamicForm.email"></el-input>
+<el-form :model="dynamicValidateForm" ref="dynamicValidateForm" label-width="100px" class="demo-dynamic">
+  <el-form-item
+    prop="email"
+    label="邮箱"
+    :rules="[
+      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
+      { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
+    ]"
+  >
+    <el-input v-model="dynamicValidateForm.email"></el-input>
   </el-form-item>
   <el-form-item
-    v-for="(domain, index) in dynamicForm.domains"
+    v-for="(domain, index) in dynamicValidateForm.domains"
     :label="'域名' + index"
     :key="domain.key"
     :prop="'domains.' + index + '.value'"
@@ -725,32 +695,26 @@
     <el-input v-model="domain.value"></el-input><el-button @click.prevent="removeDomain(domain)">删除</el-button>
   </el-form-item>
   <el-form-item>
-    <el-button type="primary" @click="handleSubmit3">提交</el-button>
+    <el-button type="primary" @click="submitForm('dynamicValidateForm')">提交</el-button>
     <el-button @click="addDomain">新增域名</el-button>
-    <el-button @click="handleReset3">重置</el-button>
+    <el-button @click="resetForm('dynamicValidateForm')">重置</el-button>
   </el-form-item>
 </el-form>
 <script>
   export default {
     data() {
       return {
-        dynamicForm: {
+        dynamicValidateForm: {
           domains: [{
             value: ''
           }],
           email: ''
-        },
-        dynamicRule: {
-          email: [
-            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
-            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
-          ]
         }
       };
     },
     methods: {
-      handleSubmit3(ev) {
-        this.$refs.dynamicForm.validate((valid) => {
+      submitForm(formName) {
+        this.$refs[formName].validate((valid) => {
           if (valid) {
             alert('submit!');
           } else {
@@ -759,17 +723,17 @@
           }
         });
       },
-      handleReset3() {
-        this.$refs.dynamicForm.resetFields();
+      resetForm(formName) {
+        this.$refs[formName].resetFields();
       },
       removeDomain(item) {
-        var index = this.dynamicForm.domains.indexOf(item)
+        var index = this.dynamicValidateForm.domains.indexOf(item)
         if (index !== -1) {
-          this.dynamicForm.domains.splice(index, 1)
+          this.dynamicValidateForm.domains.splice(index, 1)
         }
       },
       addDomain() {
-        this.dynamicForm.domains.push({
+        this.dynamicValidateForm.domains.push({
           value: '',
           key: Date.now()
         });
@@ -780,6 +744,55 @@
 ```
 :::
 
+### 数字类型验证
+
+::: demo 数字类型的验证需要在 `v-model` 处加上 `.number` 的修饰符，这是 `Vue` 自身提供的用于将绑定值转化为 `number` 类型的修饰符。
+```html
+<el-form :model="numberValidateForm" ref="numberValidateForm" label-width="100px" class="demo-ruleForm">
+  <el-form-item
+    label="年龄"
+    prop="age"
+    :rules="[
+      { required: true, message: '年龄不能为空'},
+      { type: 'number', message: '年龄必须为数字值'}
+    ]"
+  >
+    <el-input type="age" v-model.number="numberValidateForm.age" auto-complete="off"></el-input>
+  </el-form-item>
+  <el-form-item>
+    <el-button type="primary" @click="submitForm('numberValidateForm')">提交</el-button>
+    <el-button @click="resetForm('numberValidateForm')">重置</el-button>
+  </el-form-item>
+</el-form>
+<script>
+  export default {
+    data() {
+      return {
+        numberValidateForm: {
+          age: ''
+        }
+      };
+    },
+    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();
+      }
+    }
+  }
+</script>
+```
+:::
+
 ### Form Attributes
 
 | 参数      | 说明          | 类型      | 可选值                           | 默认值  |