diff --git a/src/form/README.md b/src/form/README.md
index fdf5683e0..a5910a0f2 100644
--- a/src/form/README.md
+++ b/src/form/README.md
@@ -31,7 +31,9 @@ Vue.use(Form);
     :rules="[{ required: true, message: 'Password is required' }]"
   />
   <div style="margin: 16px;">
-    <van-button round block type="info">Submit</van-button>
+    <van-button round block type="info" native-type="submit">
+      Submit
+    </van-button>
   </div>
 </van-form>
 ```
@@ -55,11 +57,13 @@ export default {
 ### Validate Rules
 
 ```html
-<van-form @submit="onSubmit" @failed="onFailed">
-  <van-field v-model="value" name="phone" label="Phone" :rules="rules.phone" />
-  <van-field v-model="code" name="code" label="Code" :rules="rules.code" />
+<van-form validate-first @submit="onSubmit" @failed="onFailed">
+  <van-field v-model="phone" name="phone" label="Phone" :rules="phoneRules" />
+  <van-field v-model="code" name="code" label="Code" :rules="codeRules" />
   <div style="margin: 16px;">
-    <van-button round block type="info">Submit</van-button>
+    <van-button round block type="info" native-type="submit">
+      Submit
+    </van-button>
   </div>
 </van-form>
 ```
@@ -69,23 +73,24 @@ import { Toast } from 'vant';
 
 export default {
   data() {
-    this.rules = {
-      phone: [
-        { required: true, message: 'Phone is required' },
-        { validator: val => this.validatePhone, message: 'Incorrect phone' },
-      ],
-      code: [
-        { required: true, message: 'Code is required' },
-        { validator: this.validateCode, message: 'Incorrect code' },
-      ],
+    this.phoneRules = [
+      { required: true, message: 'Phone is required' },
+      { validator: this.phoneValidator, message: 'Incorrect phone' },
+    ];
+    this.codeRules = [
+      { required: true, message: 'Code is required' },
+      { validator: this.codeValidator, message: 'Incorrect code' },
+    ];
+    return {
+      code: '',
+      phone: '',
     };
-    return { value: '' };
   },
   methods: {
-    validatePhone(val) {
+    phoneValidator(val) {
       return /1\d{10}/.test(val);
     },
-    validateCode(val) {
+    codeValidator(val) {
       return new Promise(resolve => {
         Toast.loading('Validating...');
 
diff --git a/src/form/README.zh-CN.md b/src/form/README.zh-CN.md
index c57d50a9b..cea9b981b 100644
--- a/src/form/README.zh-CN.md
+++ b/src/form/README.zh-CN.md
@@ -37,7 +37,9 @@ Vue.use(Form);
     :rules="[{ required: true, message: '请填写密码' }]"
   />
   <div style="margin: 16px;">
-    <van-button round block type="info">提交</van-button>
+    <van-button round block type="info" native-type="submit">
+      提交
+    </van-button>
   </div>
 </van-form>
 ```
@@ -60,14 +62,16 @@ export default {
 
 ### 校验规则
 
-在`rules`中，可以通过`validator`字段定义校验函数
+通过`rules`中的`validator`字段定义校验函数
 
 ```html
-<van-form @submit="onSubmit" @failed="onFailed">
-  <van-field v-model="value" name="phone" label="手机号" :rules="rules.phone" />
-  <van-field v-model="code" name="code" label="验证码" :rules="rules.code" />
+<van-form validate-first @submit="onSubmit" @failed="onFailed">
+  <van-field v-model="phone" name="phone" label="手机号" :rules="phoneRules" />
+  <van-field v-model="code" name="code" label="验证码" :rules="codeRules" />
   <div style="margin: 16px;">
-    <van-button round block type="info">提交</van-button>
+    <van-button round block type="info" native-type="submit">
+      提交
+    </van-button>
   </div>
 </van-form>
 ```
@@ -77,25 +81,26 @@ import { Toast } from 'vant';
 
 export default {
   data() {
-    this.rules = {
-      phone: [
-        { required: true, message: '请输入手机号' },
-        { validator: val => this.validatePhone, message: '手机号格式错误' },
-      ],
-      code: [
-        { required: true, message: '请输入验证码' },
-        { validator: this.validateCode, message: '验证码错误' },
-      ],
+    this.phoneRules = [
+      { required: true, message: '请输入手机号' },
+      { validator: this.phoneValidator, message: '手机号格式错误' },
+    ];
+    this.codeRules = [
+      { required: true, message: '请输入验证码' },
+      { validator: this.codeValidator, message: '验证码错误' },
+    ];
+    return {
+      code: '',
+      phone: '',
     };
-    return { value: '' };
   },
   methods: {
     // 校验函数返回 true 表示校验通过，false 表示不通过
-    validatePhone(val) {
+    phoneValidator(val) {
       return /1\d{10}/.test(val);
     },
     // 校验函数返回 Promise 来实现异步校验
-    validateCode(val) {
+    codeValidator(val) {
       return new Promise(resolve => {
         Toast.loading('验证中...');
 
diff --git a/src/form/demo/BasicUsage.vue b/src/form/demo/BasicUsage.vue
index 7877a1a47..ede60f5be 100644
--- a/src/form/demo/BasicUsage.vue
+++ b/src/form/demo/BasicUsage.vue
@@ -17,7 +17,9 @@
         :placeholder="$t('password')"
       />
       <div style="margin: 16px 16px 0;">
-        <van-button type="info" round block>{{ $t('submit') }}</van-button>
+        <van-button round block type="info" native-type="submit">
+          {{ $t('submit') }}
+        </van-button>
       </div>
     </van-form>
   </demo-block>
diff --git a/src/form/demo/FieldType.vue b/src/form/demo/FieldType.vue
index 905f9d81e..3a90b6764 100644
--- a/src/form/demo/FieldType.vue
+++ b/src/form/demo/FieldType.vue
@@ -53,7 +53,9 @@
       <field-type-calendar />
 
       <div style="margin: 16px 16px 0;">
-        <van-button type="info" round block>{{ $t('submit') }}</van-button>
+        <van-button round block type="info" native-type="submit">
+          {{ $t('submit') }}
+        </van-button>
       </div>
     </van-form>
   </demo-block>
diff --git a/src/form/demo/ValidateRules.vue b/src/form/demo/ValidateRules.vue
index 1aa434e73..2ceecfd64 100644
--- a/src/form/demo/ValidateRules.vue
+++ b/src/form/demo/ValidateRules.vue
@@ -5,18 +5,20 @@
         v-model="phone"
         name="phone"
         :label="$t('phone')"
-        :rules="rules.phone"
+        :rules="phoneRules"
         :placeholder="$t('phone')"
       />
       <van-field
         v-model="code"
         name="code"
         :label="$t('code')"
-        :rules="rules.code"
+        :rules="codeRules"
         :placeholder="$t('code')"
       />
       <div style="margin: 16px 16px 0;">
-        <van-button type="info" round block>{{ $t('submit') }}</van-button>
+        <van-button round block type="info" native-type="submit">
+          {{ $t('submit') }}
+        </van-button>
       </div>
     </van-form>
   </demo-block>
@@ -57,30 +59,29 @@ export default {
   },
 
   created() {
-    this.rules = {
-      phone: [
-        { required: true, message: this.$t('requirePhone') },
-        {
-          validator: this.validatePhone,
-          message: this.$t('incorrectPhone'),
-        },
-      ],
-      code: [
-        { required: true, message: this.$t('requireCode') },
-        {
-          validator: this.validateCode,
-          message: this.$t('incorrectCode'),
-        },
-      ],
-    };
+    this.phoneRules = [
+      { required: true, message: this.$t('requirePhone') },
+      {
+        validator: this.phoneValidator,
+        message: this.$t('incorrectPhone'),
+      },
+    ];
+
+    this.codeRules = [
+      { required: true, message: this.$t('requireCode') },
+      {
+        validator: this.codeValidator,
+        message: this.$t('incorrectCode'),
+      },
+    ];
   },
 
   methods: {
-    validatePhone(val) {
+    phoneValidator(val) {
       return /1\d{10}/.test(val);
     },
 
-    validateCode(val) {
+    codeValidator(val) {
       return new Promise(resolve => {
         this.$toast.loading(this.$t('validating'));
 
diff --git a/src/form/test/__snapshots__/demo.spec.js.snap b/src/form/test/__snapshots__/demo.spec.js.snap
index 8b1ff9aa7..0045fac1d 100644
--- a/src/form/test/__snapshots__/demo.spec.js.snap
+++ b/src/form/test/__snapshots__/demo.spec.js.snap
@@ -16,7 +16,9 @@ exports[`renders demo correctly 1`] = `
           <div class="van-field__body"><input type="password" name="password" placeholder="密码" class="van-field__control"></div>
         </div>
       </div>
-      <div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
+      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
+        提交
+      </span></button></div>
     </form>
   </div>
   <div>
@@ -33,7 +35,9 @@ exports[`renders demo correctly 1`] = `
           <div class="van-field__body"><input type="text" name="code" placeholder="验证码" class="van-field__control"></div>
         </div>
       </div>
-      <div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
+      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
+        提交
+      </span></button></div>
     </form>
   </div>
   <div>
@@ -210,7 +214,9 @@ exports[`renders demo correctly 1`] = `
         </div>
         <!---->
       </div>
-      <div style="margin: 16px 16px 0px;"><button class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">提交</span></button></div>
+      <div style="margin: 16px 16px 0px;"><button type="submit" class="van-button van-button--info van-button--normal van-button--block van-button--round"><span class="van-button__text">
+        提交
+      </span></button></div>
     </form>
   </div>
 </div>