diff --git a/packages/ncform-e2e/ncform/cypress/integration/examples/extend.spec.js b/packages/ncform-e2e/ncform/cypress/integration/examples/extend.spec.js
new file mode 100644
index 0000000..73df8fe
--- /dev/null
+++ b/packages/ncform-e2e/ncform/cypress/integration/examples/extend.spec.js
@@ -0,0 +1,38 @@
+/// <reference types="Cypress" />
+
+const md5 = require('blueimp-md5');
+
+context('Extend', () => {
+
+  before(() => {
+    cy.visit('http://localhost:3000/examples/components/vue-ncform/_extend.html')
+  })
+
+  it('Control: extend', () => {
+    let id = md5('Control: extend');
+    cy.get(`[data-cy=${id}]`).within(() => {
+      cy.get('.__ncform-control').contains('hello world: ncform ncform').should('exist');
+      cy.get('.__ncform-control').contains('Hi daniel: ncform ncform').should('exist');
+    })
+  })
+
+  it('Rule: extend', () => {
+    let id = md5('Rule: extend');
+    cy.get(`[data-cy=${id}]`).within(() => {
+      cy.get('label').contains('helloWorld').next().find('input').as('worldInput');
+      cy.get('label').contains('helloDaniel').next().find('input').as('danielInput');
+
+      cy.get('@worldInput').type('daniel');
+      cy.get('@worldInput').next('.invalid-feedback').should('be.visible');
+      cy.get('@worldInput').clear().type('world');
+      cy.get('@worldInput').next('.invalid-feedback').should('not.be.visible');
+
+      cy.get('@danielInput').type('world');
+      cy.get('@danielInput').next('.invalid-feedback').should('be.visible');
+      cy.get('@danielInput').clear().type('daniel');
+      cy.get('@danielInput').next('.invalid-feedback').should('not.be.visible');
+
+    })
+  })
+
+})
diff --git a/packages/ncform/examples/components/vue-ncform/_extend.html b/packages/ncform/examples/components/vue-ncform/_extend.html
new file mode 100644
index 0000000..6a88c89
--- /dev/null
+++ b/packages/ncform/examples/components/vue-ncform/_extend.html
@@ -0,0 +1,177 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>vue-ncform Example</title>
+
+    <link
+      rel="stylesheet"
+      href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css"
+    />
+  </head>
+
+  <body>
+    <div id="demo" class="container">
+      <template v-for="item in formSchemas">
+        <div
+          :data-cy="item.id"
+          v-if="mode !== 'only' || item.only"
+          :key="item.formName"
+        >
+          <h4>[CASE] {{ item.title }}</h4>
+          <ncform
+            :form-schema="item.formSchema"
+            v-model="item.formSchema.value"
+            :form-name="item.formName"
+          ></ncform>
+          <hr />
+        </div>
+      </template>
+    </div>
+
+    <script
+      type="text/javascript"
+      src="../../../node_modules/vue/dist/vue.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="https://unpkg.com/blueimp-md5@2.10.0/js/md5.js"
+    ></script>
+    <script
+      type="text/javascript"
+      src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"
+    ></script>
+    <script type="text/javascript" src="../../../dist/vueNcform.js"></script>
+    <script type="text/javascript">
+      let extComponents = {
+        helloWorld: {
+          mixins: [ncformCommon.mixins.vue.controlMixin],
+          template: '<div>{{$t("hi", {msg: modelVal})}} {{modelVal}}</div>',
+          i18nData: {
+            en: {
+              hi: 'hello world: <%= msg %>'
+            },
+            zh_cn: {
+              hi: '你好 世界: <%= msg %>'
+            }
+          },
+          props: {
+            value: {
+              type: [String]
+            }
+          }
+        },
+        helloDaniel: {
+          mixins: [ncformCommon.mixins.vue.controlMixin],
+          template: '<div>{{$t("hi", {msg: modelVal})}} {{modelVal}}</div>',
+          i18nData: {
+            en: {
+              hi: 'Hi daniel: <%= msg %>'
+            },
+            zh_cn: {
+              hi: '你好 丹尼尔: <%= msg %>'
+            }
+          },
+          props: {
+            value: {
+              type: [String]
+            }
+          }
+        }
+      };
+
+      class HelloWorld extends ncformCommon.ValidationRule {
+        constructor(props) {
+          super(props);
+          this.name = 'myCustom';
+          this.defaultErrMsg = 'yeah, show my custom rule message';
+        }
+
+        validateLogic(val, ruleVal) {
+          this.errMsg = "must fill in 'world'";
+          return val === 'world';
+        }
+      }
+      class HelloDaniel extends ncformCommon.ValidationRule {
+        constructor(props) {
+          super(props);
+          this.name = 'myCustom';
+          this.defaultErrMsg = 'yeah, show my custom rule message';
+        }
+
+        validateLogic(val, ruleVal) {
+          this.errMsg = "must fill in 'daniel'";
+          return val === 'daniel';
+        }
+      }
+
+      Vue.use(vueNcform, {
+        lang: 'en',
+        extComponents: { helloWorld: extComponents.helloWorld },
+        extRules: [{ helloWorld: HelloWorld }]
+      });
+
+      new Vue({
+        el: '#demo',
+        created() {
+          this.$ncformAddWidget({
+            name: 'helloDaniel',
+            widget: extComponents.helloDaniel
+          });
+          this.$ncformAddRule({ name: 'helloDaniel', rule: HelloDaniel });
+        },
+        data: {
+          mode: 'all', // all or only. if only mode, only objects with only:true in formSchemas are valid
+          formSchemas: [
+            {
+              id: md5('Control: extend'),
+              title: 'Control: extend',
+              formName: 'form_' + Math.random(),
+              formSchema: {
+                type: 'object',
+                properties: {
+                  helloWorld: {
+                    type: 'string',
+                    value: 'ncform',
+                    ui: {
+                      widget: 'hello-world'
+                    }
+                  },
+                  helloDaniel: {
+                    type: 'string',
+                    value: 'ncform',
+                    ui: {
+                      widget: 'hello-daniel'
+                    }
+                  }
+                }
+              }
+            },
+            {
+              id: md5('Rule: extend'),
+              title: 'Rule: extend',
+              formName: 'form_' + Math.random(),
+              formSchema: {
+                type: 'object',
+                properties: {
+                  helloWorld: {
+                    type: 'string',
+                    rules: {
+                      helloWorld: true
+                    }
+                  },
+                  helloDaniel: {
+                    type: 'string',
+                    rules: {
+                      helloDaniel: true
+                    }
+                  }
+                }
+              }
+            }
+          ]
+        }
+      });
+    </script>
+  </body>
+</html>
diff --git a/packages/ncform/examples/components/vue-ncform/ext-components-use.html b/packages/ncform/examples/components/vue-ncform/ext-components-use.html
deleted file mode 100755
index ad46c44..0000000
--- a/packages/ncform/examples/components/vue-ncform/ext-components-use.html
+++ /dev/null
@@ -1,92 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <title>vue-ncform Example</title>
-
-  <!--可自己扩展替换掉样式-->
-  <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
-</head>
-
-<body>
-
-  <!--演示区域-->
-  <div id="demo" style="padding: 8px">
-    <ncform :form-schema="formSchema" v-model="formSchema.value"></ncform>
-
-    <button class="btn btn-primary" @click="submit()">提交</button>
-  </div>
-
-  <script type="text/javascript" src="../../../node_modules/vue/dist/vue.js"></script>
-  <script type="text/javascript" src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
-  <script type="text/javascript" src="../../../dist/vueNcform.js"></script>
-
-  <script type="text/javascript">
-    // 这里只作示例，实际的扩展请使用ncform-common中的mixins
-    let extComponents = {
-      'sayHi': {
-        mixins: [ncformCommon.mixins.vue.controlMixin],
-        template: '<div>{{$t("hi", {msg: modelVal})}} {{modelVal}}</div>',
-        i18nData: {
-          en: {
-            hi: 'Hi <%= msg %>'
-          },
-          zh_cn: {
-            hi: '你好 <%= msg %>'
-          }
-        },
-        props: {
-          value: {
-            type: [String]
-          },
-        },
-      }
-    }
-
-    // You can add your custom widget while registering ncform
-    // Vue.use(vueNcform, { extComponents });
-
-    Vue.use(vueNcform, { lang: 'en' });
-
-    // Bootstrap the app
-    new Vue({
-      el: '#demo',
-      created() {
-        // You can add your custom widget after registering ncform as follow:
-        this.$ncformAddWidget({name: 'sayHi', widget: extComponents.sayHi});
-      },
-      data: {
-        formSchema: {
-          type: 'object',
-          properties: {
-            username: {
-              type: 'string',
-              ui: {
-                label: 'Username',
-              }
-            },
-            msg: {
-              type: 'string',
-              ui: {
-                label: 'message',
-                widget: 'sayHi'
-              }
-            }
-          },
-          value: {
-            "username": "daniel",
-            "msg": 'daniel'
-          }
-        },
-      },
-      methods: {
-        submit() {
-          console.log(JSON.stringify(this.$data.formSchema.value, null, 2));
-        }
-      }
-    });
-  </script>
-</body>
-
-</html>
diff --git a/packages/ncform/examples/components/vue-ncform/ext-rule-use.html b/packages/ncform/examples/components/vue-ncform/ext-rule-use.html
deleted file mode 100755
index d5a59fb..0000000
--- a/packages/ncform/examples/components/vue-ncform/ext-rule-use.html
+++ /dev/null
@@ -1,103 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-  <meta charset="UTF-8">
-  <title>vue-ncform Example</title>
-
-  <!--可自己扩展替换掉样式-->
-  <link rel="stylesheet" href="../../../node_modules/bootstrap/dist/css/bootstrap.min.css">
-</head>
-
-<body>
-
-  <!--演示区域-->
-  <div id="demo" style="padding: 8px">
-    <ncform :form-schema="formSchema" v-model="formSchema.value"></ncform>
-
-    <button class="btn btn-primary" @click="submit()">提交</button>
-  </div>
-
-  <script type="text/javascript" src="../../../node_modules/vue/dist/vue.js"></script>
-  <script type="text/javascript" src="../../../node_modules/@ncform/ncform-common/dist/ncformCommon.min.js"></script>
-  <script type="text/javascript" src="../../../dist/vueNcform.js"></script>
-
-  <script type="text/javascript">
-
-    // 扩展的规则只需继续ValidationRule，实现validateLogic逻辑即可
-    class MyCustomRule extends ncformCommon.ValidationRule {
-
-      constructor(props) {
-        super(props);
-        this.name = 'myCustom';
-        this.defaultErrMsg = 'yeah, show my custom rule message';
-      }
-
-      validateLogic(val, ruleVal) {
-        // this.errMsg = "dynamic error"
-        // return new Promise((rs, rj)=>{
-        //   const rd = parseInt(Math.random()*20+1)*100;
-        //   console.log('request', rd);
-        //   setTimeout(()=>{
-        //     rs(val === 'daniel');
-        //     console.log('==>',rd)
-        //   },rd);
-        // });
-
-        this.errMsg = "must fill in 'daniel'"
-        return val === 'daniel';
-      }
-
-    }
-
-    // You can add your custom rule while registering ncform
-    // Vue.use(vueNcform, { extRules: [{myCustom: MyCustomRule}] });
-
-    Vue.use(vueNcform, { lang: 'en' });
-
-    // Bootstrap the app
-    new Vue({
-      el: '#demo',
-      created() {
-        // You can add your custom rule after registering ncform as follow:
-        this.$ncformAddRule({name: 'myCustom', rule: MyCustomRule});
-      },
-      data: {
-        formSchema: {
-          type: 'object',
-          properties: {
-            username: {
-              type: 'string',
-              ui: {
-                label: 'Username',
-              },
-              rules: {
-                myCustom: {
-                  value: true,
-                  options: {
-                    delay: 300,
-                    delayMsg: "异步验证中.."
-                  }
-                }
-              }
-            },
-            age: {
-              type: 'integer',
-            }
-          },
-          value: {
-            "username": "daniel",
-            "age": 18
-          }
-        },
-      },
-      methods: {
-        submit() {
-          console.log(JSON.stringify(this.$data.formSchema.value, null, 2));
-        }
-      }
-    });
-  </script>
-</body>
-
-</html>
