feat: add vc-form demo

Author: tangjinzhou

components/vc-form/demo/validateTrigger.js

@@ -0,0 +1,112 @@
+/* eslint react/no-multi-comp:0, no-console:0 */
+
+import { createForm } from '../index'
+import { regionStyle, errorStyle } from './styles'
+
+const Email = {
+  props: {
+    form: Object,
+  },
+  render () {
+    const { getFieldProps, getFieldError, isFieldValidating } = this.form
+    const errors = getFieldError('email')
+    return (<div style={ regionStyle }>
+      <div>email validate onBlur && onChange</div>
+      <div>
+        <input {...getFieldProps('email', {
+          validate: [{
+            trigger: 'blur',
+            rules: [{
+              required: true,
+            }],
+          }, {
+            trigger: ['blur', 'input'],
+            rules: [{
+              type: 'email',
+              message: '错误的 email 格式',
+            }],
+          }],
+        })}
+        />
+      </div>
+      <div style={errorStyle}>
+        {errors ? errors.join(',') : null}
+      </div>
+      <div style={errorStyle}>
+        {isFieldValidating('email') ? 'validating' : null}
+      </div>
+    </div>)
+  },
+
+}
+
+const User = {
+  props: {
+    form: Object,
+  },
+  render () {
+    const { getFieldProps, getFieldError, isFieldValidating } = this.form
+    const errors = getFieldError('user')
+    return (<div style={ regionStyle }>
+      <div>user validate on submit</div>
+      <div>
+        <input {...getFieldProps('user', {
+          rules: [
+            {
+              required: true,
+            },
+            {
+              type: 'string',
+              min: 5,
+            },
+          ],
+          validateTrigger: null,
+        })}
+        />
+      </div>
+      <div style={errorStyle}>
+        {(errors) ? errors.join(',') : null}
+      </div>
+      <div style={errorStyle}>
+        {isFieldValidating('user') ? 'validating' : null}
+      </div>
+    </div>)
+  },
+}
+
+const Form = {
+  props: {
+    form: Object,
+  },
+  methods: {
+    onSubmit  (e) {
+      e.preventDefault()
+      this.form.validateFields((error, values) => {
+        if (!error) {
+          console.log('ok', values)
+        } else {
+          console.log('error', error, values)
+        }
+      })
+    },
+  },
+
+  render () {
+    const { form } = this
+    return (<div style={{ margin: '20px' }}>
+      <h2>use validateTrigger config</h2>
+      <form onSubmit={this.onSubmit}>
+        <User form={ form }/>
+
+        <Email form={ form }/>
+
+        <div style={ regionStyle }>
+          <button>submit</button>
+        </div>
+      </form>
+    </div>)
+  },
+}
+
+export default createForm()(Form)
+