【React实践总结】Form表单即时校验输入值（基于Antd Design）

1.判断输入值的长度

1.1 根据输入值的类型不同，限制输入值长度不同
此时需要使用自定义的校验规则。 如长度要求：中文输入5位，非中文10位

 2     {getFieldDecorator('name', {
 3         rules: [
 4             {
 5                 required: true,
 6                 message: "名称不能为空",                                           
 7             },                    
 8             {
 9                 validator: async (rule, value, callback) => {
10                     const reg = new RegExp("[\\u4E00-\\u9FFF]+","g"); //正则校验
11                     if(reg.test(value) && value.length > 5){
12                         callback("中文最多5位");
13                     }else if(value.length > 10){
14                         callback("非中文最多10位");
15                     } else{
16                         callback();
17                     }                                                                                            
18                 }
19             }
20         ],
21     })(
22         ,
23     )}
24 

1.2 不对输入类型做区分，统一设置长度
如：

输入值长度最少5位，最大10位； 使用现有规则：min ,max
长度只能为10位。 使用现有规则：len

2     {getFieldDecorator('name', {
3         rules: [   
4             //输入值长度最少5位，最大10位               
5             {
6                min:3
7                message: "最小5位",    
8             },                    
9             {
10                 max:15
11                message: "最大10位",    
12             }
13 
14             //输入值长度需要为10位
15 //            {
16 //               len:10
17 //               message: "输入长度不足10位",    
18 //            }
19 
20         ],
21     })(
22         ,
23     )}
24     

2. 判断输入值的有效性

方式一： 最简单使用getFieldDecorator中的rules验证

rules中定义校验规则，message为校验不通过时的提示文字

{getFieldDecorator('inputContent', {
2             rules: [{
3               required: true, 
4               message: '请输入内容!',
5             }],
6           })(
7             
8 )}

方式二： 通过validateStatus+help 同时来控制。

antd提供了validateStatus，help，hasFeedback 等属性，你可以不需要使用 Form.create 和 getFieldDecorator，自己定义校验的时机和内容。

validateStatus: 校验状态，可选 'success', 'warning', 'error', 'validating'。
hasFeedback：用于给输入框添加反馈图标。
help：设置校验文案。

注： 这种校验方法有一个不足之处，就是不使用getFieldDecorator的话没办法设置字段名，获取输入的值的时候不能用getFieldsValue和setFieldsValue等方法对表单进行赋值和取值。

例子：同时监测输入框内容是否为空和是否有效

设置了validateStatus，help，这个就不能使用方式三的validator方式校验了，会冲突，使得validator不生效。
且文案也只会显示help设置的提示文案（"名称不能为空"），原先规则设置的message文案（message: "名称需要输入！"）也不会生效。所以提示文案的变化也就只能用help来设置。

8     {getFieldDecorator('name', {
9         initialValue: "",
10         rules: [
11             {
12                 required: true,
13                 message: "名称需要输入！",
14             },{
15                 validator: async (rule, value, callback) => {
16                     if(!value){
17                         this.setState({
18                             inputEmpty: true
19                         })
20                     }else{
21                         this.setState({
22                             inputEmpty: false
23                         })
24                     }                                                 
25                     
26                 }
27             }                                     
28         ],
29 
30     })(
31         
35     )
36     }
37 

输入框的handleInputChange方法可自行实现，用来校验输入值是否符合要

方式三：使用getFieldDecorator的validator自定义校验

ant.design内部使用了async-validator，通过阅读async-validator的文档，了解到每个rule其实都是可以定制validator。validator是个函数，其中有三个参数很重要：rule,value和callback。

rule：这个是规则，可以不用
value：这个是要验证的值
callback：这个是回调函数，验证出错后可以把错误信息作为参数调用callback
举例：

 5     {getFieldDecorator('tags', {
 6         rules: [{
 7             required: true,
 8             type:'array',
 9             message:'必填',
10         },{
11             validator(rule, values, callback){
12                 if(values && values.length>0){
13                     values.map((value,i)=>{
14                         if(value.name.length > 16 ){
15                             callback(`第${i+1}个标签超过16个字符`);
16                         }else if(value.name.length == 0){    
17                             callback(`第${i+1}个标签不能为空`);
18                         }else{    
19                             callback();
20                         }
21                     });
22                 }else{
23                     callback();
24                 }
25             }
26         }],
27     })(
28         
29     )}
30 

还可以写成：

 5     {getFieldDecorator('tags', {
 6         rules: [{
 7             required: true,
 8             type:'array',
 9             message:'必填',
10         },{
11             validator: async (rule, value, callback) => {
12                   callback('Something wrong!');
13                 }
14             }
15         }],
16     })(
17         
18     )}
19 

还有种写法： 单独写一个handleValidator方法来处理

handleValidator = (rule, val, callback) => {
 2         if (!val) {
 3             callback();
 4         }
 5         let validateResult = ...;  // 自定义规则
 6         if (!validateResult) {
 7             callback('请输入正确的内容！');
 8         }
 9         callback();
10     }
11     
12     
13 {getFieldDecorator('validator', {
14     rules: [{
15         required: true,
16         message: '请输入内容'
17     }, {
18         validator: this.handleValidator
19     }]
20 })(
21     
22 )}

注意：一个 Form.Item 建议只放一个被 getFieldDecorator 装饰过的 child，当有多个被装饰过的 child 时，help required validateStatus 无法自动生成。此时可用下面一种方法校验。

声明：该文章系转载，转载该文章的目的在于更广泛的传递信息