1. The length of the input value is determined
1.1 The different type of the input value, the input limit value different lengths.
At this requires a custom validation rule. The length requirements: Input five Chinese, 10 non-Chinese
. 1 <the FormItem label = "Name" {...} formItemLayout> 2 {getFieldDecorator ( 'name' , { . 3 the rules: [ . 4 { . 5 required: to true , . 6 Message: "name can not be blank" , 7 } 8 { . 9 Validator: the async (rule, value, the callback) => { 10 const REG = new new the RegExp ( "[u4E00 \\ - \\ u9FFF] +", "G"); // regular check . 11 IF(reg.test (value) && value.length>. 5 ) { 12 is the callback ( "Chinese up to 5" ); 13 is } the else IF (value.length> 10 ) { 14 the callback ( "up to 10 non-Chinese" ); 15 } the else { 16 the callback (); . 17 } 18 is } . 19 } 20 is ], 21 is }) ( 22 is <Input placeholder = "enter here name" allowClear />, 23 is )} 24 </ the FormItem>
1.2 do not distinguish between types of input, a unified set length.
Such as:
- 5 minimum length of the input value, the maximum 10; existing rules: min, max
- A length of only 10 bits. Use existing rule: len
. 1 <the FormItem label = "Name" {...} formItemLayout> 2 {getFieldDecorator ( 'name' , { . 3 the rules: [ . 4 // input bit length value of at least 5, maximum 10 . 5 { . 6 min:. 3 . 7 Message: "minimum 5" , . 8 }, . 9 { 10 max: 15 . 11 Message: "maximum 10" , 12 } 13 is 14 // input values required length of 10 15 // { 16 // len: 10 . 17 // Message: "Enter the length of less than 10", 18 is // } . 19 20 is ], 21 is }) ( 22 is <placeholder the Input = "enter here name" allowClear />, 23 is )} 24 </ FormItem>
2. Analyzing the validity of the input value
Method 1: The easiest to use rules of verification getFieldDecorator
rules defined validation rules, message text is prompted when the check does not pass
. 1 {getFieldDecorator ( 'inputContent' , { 2 the rules: [{ . 3 required: to true , . 4 Message: 'Please enter your!' , . 5 }], . 6 }) ( . 7 <the Input /> . 8 )}
Second way: controlled by validateStatus + help simultaneously.
antd provides validateStatus, help, hasFeedback and other property, you may need to use Form.create and getFieldDecorator, check the timing and content of their own definition.
- validateStatus: check status, an optional 'success', 'warning', 'error', 'validating'.
- hasFeedback: for feedback to the input box to add an icon.
- help: set the check copy.
Note: This calibration method has a downside, it is not to use the words of getFieldDecorator no way to set the field name to get the value of the input when not on form and assign values with getFieldsValue and setFieldsValue other methods.
Example: while monitoring whether the input box is empty and is valid
- Set validateStatus, help, you can not use this validator check three ways, the conflict, making the validator does not take effect.
- And the copy will only display the prompt copywriting help set ( "name can not be blank"), message copy (message: "! Name you need to enter") previously set rule will not take effect. So prompt copy changes will only be used to help set up.
. 1 < the FormItem formItemLayout {...} 2 label = "Name" . 3 validateStatus = { the this .state.showError "error"? : ( . 4 the this .state.inputEmpty "error":? "" )} . 5 Help = { the this ? .state.showError "enter the name does not meet the requirements" : ( . 6 the this .state.inputEmpty "name can not be empty":? "" )} . 7 > . 8 {getFieldDecorator ( 'name' , { . 9 the 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 is } 27 } 28 ], 29 30 }) ( 31 is < the Input 32 placeholder = "enter here name" 33 is allowClear 34 is the onBlur = { the this .handleInputChange} /> 35 ) 36 } 37 [ </ the FormItem>
Input box handleInputChange self implemented method, used to verify whether the value for a
Three ways: using a validator custom validation getFieldDecorator
Internal ant.design using async-validator, async-validator by reading the documentation, understand each rule that you could custom validator. validator is a function, which has three parameters are important: rule, value and callback.
- rule: This rule is, you can not
- value: This is the value to be verified
- callback: This is a callback function, you can verify the error message after error as calling the callback
For example:
1 <FormItem 2 label="标签" 3 labelCol={{ span: 6 }} 4 wrapperCol={{ span: 14 }}> 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 the callback ( `first I +. 1 {$ } labels more than 16 characters`); 16 } the else IF (value.name.length == 0 ) { . 17 the callback ( `The first I +. 1 {$ } tag can not be empty '); 18 is } the else { . 19 the callback (); 20 is } 21 is }); 22 is } the else { 23 is the callback (); 24 } 25 } 26 }], 27 })( 28 <MyTag /> 29 )} 30 </FormItem>
It can also be written as:
1 <FormItem 2 label="标签" 3 labelCol={{ span: 6 }} 4 wrapperCol={{ span: 14 }}> 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 <MyTag /> 18 )} 19 </FormItem>
There are kinds of writing: write a single method to handle handleValidator
. 1 handleValidator = (rule, Val, the callback) => { 2 IF (! Val) { . 3 the callback (); . 4 } . 5 the let validateResult = ...; // custom rules . 6 IF (! ValidateResult) { . 7 the callback ( 'Please enter the correct content!' ); . 8 } . 9 the callback (); 10 } . 11 12 is 13 is {getFieldDecorator ( 'Validator' , { 14 the rules: [{ 15 required: to true , 16 message: 'Please enter your' . 17 }, { 18 is Validator: the this .handleValidator . 19 }] 20 is }) ( 21 is <INPUT /> 22 is )}
Note: just put a Form.Item recommend a decorated getFieldDecorator over the child, when there is more decorated of the child, help required validateStatus can not be generated automatically. Available at this time following a process check.