chore(demo): add async check demo

qiqiboy · Mar 6, 2019 · 775082d · 775082d
1 parent 9bca563
commit 775082d
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 4 deletions.
diff --git a/docs/app/modules/LoginForm/index.js b/docs/app/modules/LoginForm/index.js
@@ -68,6 +68,16 @@ class LoginForm extends Component {
 
             //异步校验
             return new Promise((resolve, reject) => setTimeout(() => reject('435454'), 2000));
+        },
+
+        asyncCheck(value) {
+            if (value) {
+                return new Promise((resolve, reject) => {
+                    setTimeout(() => reject(new Error('名字重复啦！')), 3000);
+                });
+            }
+
+            return true;
         }
     };
 
@@ -107,7 +117,12 @@ class LoginForm extends Component {
                             </a>
                         </small>
                     </h4>
-                    <Field name="username" required $validators={this.$validators} $parser={value => value.trim()}>
+                    <Field
+                        name="username"
+                        required
+                        asyncCheck
+                        $validators={this.$validators}
+                        $parser={value => value.trim()}>
                         {props => (
                             <div className={'form-group' + (props.$dirty && props.$invalid ? ' has-error' : '')}>
                                 <label className="control-label">用户名</label>
@@ -122,6 +137,8 @@ class LoginForm extends Component {
                                     props.$invalid && (
                                         <span className="help-block">{Object.values(props.$error)[0]}</span>
                                     )}
+
+                                {props.$pending && <span className="help-block">正在异步校验</span>}
                             </div>
                         )}
                     </Field>

diff --git a/docs/demo/index.html b/docs/demo/index.html
@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no"><title>react-formutil</title><script type="text/javascript">window.webpackManifest={0:"static/js/0.chunk.c49d5d81.js",1:"static/js/1.chunk.55213bf2.js",2:"static/js/2.chunk.0e9e80e0.js",3:"static/js/3.chunk.5887a551.js",4:"static/js/4.chunk.d67ea0ac.js",5:"static/js/index.chunk.46441fc1.js"}</script><link href="./static/css/index.2b78230d.css" rel="stylesheet"></head><body><div id="wrap" class="wrapper"></div><script type="text/javascript" src="./static/js/vendor.0016d019.js"></script><script type="text/javascript" src="./static/js/index.46441fc1.js"></script></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no"><title>react-formutil</title><script type="text/javascript">window.webpackManifest={0:"static/js/0.chunk.c49d5d81.js",1:"static/js/1.chunk.55213bf2.js",2:"static/js/2.chunk.0e9e80e0.js",3:"static/js/3.chunk.5887a551.js",4:"static/js/4.chunk.d67ea0ac.js",5:"static/js/index.chunk.bf3f2aba.js"}</script><link href="./static/css/index.2b78230d.css" rel="stylesheet"></head><body><div id="wrap" class="wrapper"></div><script type="text/javascript" src="./static/js/vendor.6bbbcee0.js"></script><script type="text/javascript" src="./static/js/index.bf3f2aba.js"></script></body></html>
diff --git a/docs/demo/service-worker.js b/docs/demo/service-worker.js
diff --git a/docs/demo/static/js/index.46441fc1.js → docs/demo/static/js/index.bf3f2aba.js b/docs/demo/static/js/index.46441fc1.js → docs/demo/static/js/index.bf3f2aba.js
diff --git a/docs/demo/static/js/vendor.0016d019.js → docs/demo/static/js/vendor.6bbbcee0.js b/docs/demo/static/js/vendor.0016d019.js → docs/demo/static/js/vendor.6bbbcee0.js
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no"><title>react-formutil</title><script type="text/javascript">window.webpackManifest={0:"static/js/0.chunk.c49d5d81.js",1:"static/js/1.chunk.55213bf2.js",2:"static/js/2.chunk.0e9e80e0.js",3:"static/js/3.chunk.5887a551.js",4:"static/js/4.chunk.d67ea0ac.js",5:"static/js/index.chunk.46441fc1.js"}</script><link href="./static/css/index.2b78230d.css" rel="stylesheet"></head><body><div id="wrap" class="wrapper"></div><script type="text/javascript" src="./static/js/vendor.0016d019.js"></script><script type="text/javascript" src="./static/js/index.46441fc1.js"></script></body></html>
		<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,shrink-to-fit=no"><title>react-formutil</title><script type="text/javascript">window.webpackManifest={0:"static/js/0.chunk.c49d5d81.js",1:"static/js/1.chunk.55213bf2.js",2:"static/js/2.chunk.0e9e80e0.js",3:"static/js/3.chunk.5887a551.js",4:"static/js/4.chunk.d67ea0ac.js",5:"static/js/index.chunk.bf3f2aba.js"}</script><link href="./static/css/index.2b78230d.css" rel="stylesheet"></head><body><div id="wrap" class="wrapper"></div><script type="text/javascript" src="./static/js/vendor.6bbbcee0.js"></script><script type="text/javascript" src="./static/js/index.bf3f2aba.js"></script></body></html>