update Form

update Form

test/routers/form.vue

@@ -1,7 +1,19 @@
 <template>
-    <div>
-        <i-form>
-
+    <div style="width: 400px">
+        <i-form v-ref:form :model="form" :rules="rules" :label-width="50" label-position="right">
+            <form-item label="邮箱" prop="mail">
+                <i-input :value.sync="form.mail" placeholder="请输入邮箱">
+                    <Icon type="ios-email-outline" slot="prepend"></Icon>
+                </i-input>
+            </form-item>
+            <form-item label="密码" prop="passwd">
+                <i-input type="password" :value.sync="form.passwd" placeholder="请输入密码">
+                    <Icon type="ios-locked-outline" slot="prepend"></Icon>
+                </i-input>
+            </form-item>
+            <form-item>
+                <i-button type="primary" @click="onSubmit('form')">提交</i-button>
+            </form-item>
         </i-form>
     </div>
 </template>
@@ -9,9 +21,40 @@
     export default {
         props: {},
         data () {
-            return {}
+            return {
+                form: {
+                    mail: '',
+                    passwd: ''
+                },
+                rules: {
+                    mail: [
+                        {
+                            required: true, message: '请输入邮箱', trigger: 'blur'
+                        },
+                        {
+                            min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'
+                        }
+                    ],
+                    passwd: [
+                        {
+                            required: true, message: '请输入密码', trigger: 'blur'
+                        }
+                    ]
+                }
+            }
         },
         computed: {},
-        methods: {}
+        methods: {
+            onSubmit (formName) {
+                this.$refs[formName].validate((valid) => {
+                    if (valid) {
+                        this.$Message.success('submit!');
+                    } else {
+                        this.$Message.error('error submit!');
+                        return false;
+                    }
+                });
+            }
+        }
     };
 </script>