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, callbacks) =>{
      if(!getFieldValue('uniformCreditCode') && (!value || value.length ===0)){
        callbacks('組織機構代碼不能爲空!');
        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) {
                callbacks();
              } else {
                callbacks(''+response.msg);
              }
            }
          });
        }
        callbacks();
        return;
      }
      callbacks('組織機構代碼格式錯誤！');
    };