antd 在進(jìn)行表單驗(yàn)證的時(shí)候，如何做到唯一性驗(yàn)證？

表單驗(yàn)證的需要向后臺(tái)發(fā)請(qǐng)求進(jìn)行唯一性驗(yàn)證，實(shí)時(shí)校驗(yàn)；

目前方案是在input的onBlur中發(fā)請(qǐng)求，

但是體驗(yàn)不好，每次onBlur的時(shí)候都頁(yè)面會(huì)閃一下，進(jìn)行下一步操作還可能因?yàn)橛|發(fā)onBlur導(dǎo)致onClick不執(zhí)行，需要點(diǎn)2次；

嘗試過(guò)的解決方案，網(wǎng)上普遍方案是setTimeout，但是不生效；

嘗試過(guò)的解決方案，用mousehover和mouseout，設(shè)置一個(gè)true/false，在執(zhí)行onBlur的時(shí)候判斷是否有下一步操作，
問(wèn)題：如果鍵盤(pán)操作會(huì)有很多不可控因素，影響體驗(yàn)（可能還不如點(diǎn)擊2次）；

onBlur和onSubmit/onClick沖突是普遍性問(wèn)題吧

表單唯一性驗(yàn)證的方法有什么好辦法嗎？

基于 react + antd 沒(méi)有jquery

新浪微博的注冊(cè)頁(yè)面好像可以做到唯一性校驗(yàn)，不過(guò)新浪微博注冊(cè)頁(yè)面很簡(jiǎn)單，好像沒(méi)用到框架；

回答

編輯回答

雅痞

antd的Form組件使用的是asyn-validator.
其中有個(gè)validator的驗(yàn)證就可以滿足你的需求。

const fields = {
  asyncField:{
    validator(rule,value,callback){
      ajax({
        url:'xx',
        value:value
      }).then(function(data){
        callback();
      },function(error){
        callback(new Error(error))
      });
    }
  },
 
  promiseField:{
      validator(rule, value){
        return ajax({
          url:'xx',
          value:value
        });
      }
    }
};

2017年10月4日 02:59

編輯回答