Ant design Pro form.Item validator

form.Item validator

1.“name”: “ant-design-pro”,
“version”: “2.0.0-beta.1”,
2.异步校验

• a 查询数据库，声明在render里，随时可以进行

const checkUserID = (rule, value, callbacks) => {
      if(!value || value.length ===0){
        callbacks('主要联系人身份证号不能为空');
        return ;
      }
      if(!/^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/.test(value)){
        callbacks('证件号码格式错误！');
      }else{
        this.props.dispatch({
          type: 'registerForm/checkUserID',
          payload: {
            id : value,
            type : 0
          },
          callback: response => {
            if (response && 'ok' === response.result) {
              callbacks();
              return ;
            } else {
              callbacks(response.msg);
            }
          }
        });
      }
    };

• b 经过正则校验后的 需要注意三点
  • 1 修改model的callback的方法名
  • 2 response 的 msg（返回dto的message 属性） 不能被识别validator的 callback 方法识别
  • 3 使用时需要加 msg+’’ 具体看例子

const checkOrgCode = (rule, value, callback) =>{
  if(!getFieldValue('uniformCreditCode') && (!value || value.length ===0)){
    callback('组织机构代码不能为空!');
    return ;
  }
  const ws = [3, 7, 9, 10, 5, 8, 4, 2];
  const str = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ';
  const reg = /^([0-9A-Z]){8}-[0-9|X]$/;// /^[A-Za-z0-9]{8}-[A-Za-z0-9]{1}$/
  let sum = 0;
  for (let i = 0; i < 8; i++){
    sum += str.indexOf(value.charAt(i)) * ws[i];
  }
  let c9 = 11 - (sum % 11);
  c9 = c9 === 10 ? 'X' : c9 ;
  if( reg.test(value) && c9 !== value.charAt(9)  || !value || value.length ===0){
    if(value && value.length !==0){
      dispatch({
        type: 'registerForm/checkOrgCode',
        payload: {
          orgCode :value
        },
        callbackNew: response => {
          if (response && 'ok' === response.result) {
            callback();
          } else {
            callback(response.msg);
          }
        }
      });
    }else{
      callback();
    }
  }else{
    callback('组织机构代码格式错误！');
  }
};