第三天 form 获取，设置字段值，有效验证，提交 select onchange

dashboard/src/pages/demo/day-3.tsx

@@ -1,10 +1,11 @@
+import React,{useState} from 'react';
 import { Form, Input, Button, Select,Checkbox } from 'antd';
-import { unstable_renderSubtreeIntoContainer } from 'react-dom';
+const {Option}=Select;
 
 export default () => {
     const [form] = Form.useForm();
 
-    const onUsernameChange=(value:string)=>{
+    const onUsernameChange=(value:any)=>{
         console.log("username:",value);
     }
     const onGerderChange =(value:string)=>{
@@ -20,6 +21,7 @@ export default () => {
                 return;
         }
     }
+  //表单完成
   const onFinish = (values: any) => {
     console.log('Success:', values);
     const pwd1=form.getFieldValue("password");
@@ -32,14 +34,31 @@ export default () => {
     }
   };
 
+  //填充表单
   const onFill=()=>{
     form.setFieldsValue({username:"wikipali"});
     form.setFieldsValue({password:""});
     form.setFieldsValue({password2:""});
   }
+  //失败
   const onFinishFailed = (errorInfo: any) => {
     console.log('Failed:', errorInfo);
   };
+  //提交表单
+  const onSubmit=()=>{
+    console.log("form:",form);
+
+  }
+  const validatePassword=(rule,value,callback)=>{
+    console.log(value);
+    const pwd1=form.getFieldValue("password");
+    if(value && value!==pwd1){
+      callback("两次输入不一致");
+    }
+    else{
+      callback();
+    }
+  }
 
   return (
     <Form
@@ -50,11 +69,11 @@ export default () => {
       initialValues={{ remember: true }}
       onFinish={onFinish}
       onFinishFailed={onFinishFailed}
+      onSubmitCapture={onSubmit}
     >
     <Form.Item
         label="note"
         name="note"
-        rules={[{ required: true }]}
       >
         <Input />
       </Form.Item>
@@ -62,7 +81,8 @@ export default () => {
       <Form.Item
         label="用户名"
         name="username"
-        rules={[{ required: true, message: 'Please input your username!' }]}
+        initialValue="haha"
+        rules={[{ required: true, message: "Please input your '${name}'!" }]}
       >
         <Input onChange={onUsernameChange} />
       </Form.Item>
@@ -70,30 +90,55 @@ export default () => {
       <Form.Item
         label="密码"
         name="password"
-        rules={[{ required: true, message: 'Please input your password!' }]}
+        rules={[
+          { required: true, message: 'Please input your password!' },
+          { min: 6, message: '不能少于六个字符' },
+          { whitespace: false, message: '不能包含空格' }
+        ]}
       >
         <Input.Password />
       </Form.Item>
       <Form.Item
         label="重复密码"
         name="password2"
-        rules={[{ required: true, message: 'Please input your password!' }]}
+        validateTrigger="onBlue"
+        dependencies={['password']}
+        rules={[
+          { required: true, message: 'Please input your password!' },
+           /*
+          {
+            validator:validatePassword
+          }
+         */
+          
+         ({getFieldValue})=>({
+           validator(_,value){
+             if(!value || getFieldValue('password')===value){
+               return Promise.resolve();
+             }
+             return Promise.reject(new Error('两次密码不匹配'));
+           }
+         })
+         
+        ]}
       >
+
+
         <Input.Password />
       </Form.Item>
 
-<Form.Item
-name="gender" lable="性别" rules={[{reqired:true}]}>
-    <Select
-    placeholder="Select a option and change input text above"
-    onChange={onGerderChange}
-    allowClear
-    >
-        <Option value="male">男</Option>
-        <Option value="femail">女</Option>
-        <Option value="other">其他</Option>
-    </Select>
-</Form.Item>
+  <Form.Item name="gender" label="性别" >
+      <Select
+      placeholder="Select a option and change input text above"
+      onChange={onGerderChange}
+      allowClear
+      >
+          <Option value="male">男</Option>
+          <Option value="female">女</Option>
+          <Option value="other">其他</Option>
+      </Select>
+  </Form.Item>
+  
       <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
         <Button type="primary" htmlType="submit">
           提交