antd form uses pattern and validator to customize verification rules

When using antd form form, form verification will definitely be used. I looked at the form verification of antd today and it is very useful. It not only has the default general verification, but also supports two ways of custom verification rules.

• Antd has several default verification rules such as:
• enum: enum type
• len: field length
• max: maximum length
• min: Minimum length
• required: Whether it is required

There are two ways to customize verification rules:validatorMethods for custom checks and usepatternPerform custom regular expression verification

1. Use pattern for verification

When defining, you can just define the regularity in the pattern. You can also write it like this here: new RegExp(/^[0-9a-zA-Z_]{1,}$/,'g')

< label="Login">
     {getFieldDecorator('loginname', {
         rules: [
             { required: true, message: 'Please enter the login name' },
             { max:20, message:'The name must not exceed 20 characters'},
             { pattern:new RegExp('^[0-9a-zA-Z_]{1,}$','g'), message:'Only numbers, letters, and underscores are allowed'}],
             validateFirst:true
     })(<Input autoComplete="off" />)}
 </>

This method is relatively simple and can handle simple logical judgments.

Many times our form items need to use the same verification rules and verification messages multiple times, so it is best to encapsulate the common verification rules used multiple times, so that it can avoid writing a lot of things each time and be conducive to centralized modification.

Package:

// Regular expressions for regular verification, here note that the '\' in the regular expression should be escaped using '\\'
 const patterns = {
     "name":"^[a-zA-Z_][0-9a-zA-Z_]{0,}$",
     "tel":"^1[2-9]\\d{0,}$",
     "email":"^\\w+([-+.]\\w+)*@\\w+([-.]\\w+)*\\\w+([-.]\\w+)*$",
     "pwd":"^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[\\(\\)])+$)([^(0-9a-zA-Z)]|[\\(\\)]|[a-z]|[A-Z]|[0-9]){8,}$",
     "IP":"^(?=(\\b|\\D))(((\\d{1,2})|(1\\d{1,2})|(2[0-4]\\d)|(25[0-5]))\\.){3}((\\d{1,2})|(1\\d{1,2})|(2[0-4]\\d)|(25[0-5]))(?=(\\b|\\D))$",
     "IDCard":"(^\\d{15}$)|(^\\d{17}([0-9]|X)$)"
 }


 //Tip information corresponding to regular expression
 const patternMsg = {
     "name":"Please start with letters and underscores and include numbers, letters and underscores",
     "tel":"not correct number",
     "email":"Not correct email address",
     "pwd":"The password consists of at least 8 digits, including two combinations of letters, numbers, and special characters".
     "IP":"Not correct IP address",
     "IDCard":"Incorrect ID number"
 }

 //Return the corresponding regular and information objects according to the regular used
 const pattern = (name,para='g') =>{
     return {
         pattern:new RegExp(patterns[name],para),
         message:patternMsg[name]
     }
 }

 export default pattern;

Use the pattern method:

< label="Login">
     {getFieldDecorator('loginname', {
         rules: [
             { required: true, message: 'Please enter the login name' },
             { max:20, message:'The name must not exceed 20 characters'},
             pattern('name')],
         validateFirst:true
     })(<Input autoComplete="off" />)}
 </>
 < label="user password">
     {getFieldDecorator('loginpass', {
         rules: [{ required: true, message: 'Please enter password' },
             pattern('pwd')],
         validateFirst:true
     })(<Input autoComplete="off" />)}
 </>

2. Use the validator method to verify:

structure:

< label="user password">
     {getFieldDecorator('loginpass', {
         rules: [{ required: true, message: 'Please input your note!' },{
             validator:(rules,value,callback)=>{(rules,value,callback)}
         }],
         validateFirst:true
     })(<Input autoComplete="off" />)}
 </>
 < label="Confirm Password">
     {getFieldDecorator('cfmloginpass', {
         rules: [{ required: true, message: 'Please input your note!' },{
             validator:(rules,value,callback)=>{(rules,value,callback)}
         }],
         validateFirst:true
     })(<Input autoComplete="off" />)}
 </>

method:

//The new password is consistently verified
     handleCheckPwd(rules,value,callback){
         let cfmPwd = ('cfmloginpass');
         if(cfmPwd && cfmPwd !== value){
             callback(new Error('Two password inputs are inconsistent'))
         }else{
             callback();
         }
     }

     //Confirm that the password verification is consistent
     handleCfmPwd(rules,value,callback){
         let loginpass = ('loginpass');
         if(loginpass && loginpass !== value){
             callback(new Error('Two password inputs are inconsistent'))
         }else{
             callback();
         }
     }

This method can verify more complex logical processing, such as the comparison of password values ​​between two times, etc.

Note that the validator's callback function must return a callback method for continued rule verification.

For details on password comparison and verification, please refer to:antd custom verification rules verify whether the passwords are consistent when the two times