this.$refs.form.validate()不執(zhí)行問題

問題

使用以下方法獲取校驗(yàn)狀態(tài)的時(shí)候，一直獲取不到，console沒有結(jié)果輸出

this.$refs.form.validate().then(valid => {
  console.log(valid)
})

原因

①存在沒有加入驗(yàn)證規(guī)則的 prop

如：在代碼中寫了很多這樣的 prop，作為需要驗(yàn)證的字段：

<FormItem label="URL過濾" prop="groupId">

但是，在定義的 rules 里面沒有出現(xiàn)該 prop：

rules: {
  schemaId: [{ required: true, message: '必填'}],
}

注意：一般來(lái)講，多加上 prop 不會(huì)有問題，還有可能是自定義的校驗(yàn)有問題

②  自定義校驗(yàn)規(guī)則存在沒有調(diào)用到 callback() 的情況

如：沒有驗(yàn)證 value 為空的情況：

    const validateFilter = (rule, value, callback) => {
     if (!value.every(item => HTTPHEADER_KEYWORD_REGEXP.test(item))) {
        callback(new Error('關(guān)鍵字格式錯(cuò)誤：每個(gè)最長(zhǎng)255字符，不能包含中文'))
      } else if (value.join('').length > 2048) {
        callback(new Error('錯(cuò)誤：總長(zhǎng)度不能超過2048字符'))
      } else {
        callback()
      }
    }

上述判斷中沒有考慮到 value 為空的情況也要執(zhí)行一次 callback()，因此當(dāng) value 為空時(shí)校驗(yàn)狀態(tài)也不執(zhí)行。

    const validateFilter = (rule, value, callback) => {
      if (!value) {
        callback()
      } else if (!value.every(item => HTTPHEADER_KEYWORD_REGEXP.test(item))) {
        callback(new Error('關(guān)鍵字格式錯(cuò)誤：每個(gè)最長(zhǎng)255字符，不能包含中文'))
      } else if (value.join('').length > 2048) {
        callback(new Error('錯(cuò)誤：總長(zhǎng)度不能超過2048字符'))
      } else {
        callback()
      }
    }

解決思路：

• 根據(jù)框架文檔，檢查代碼書寫規(guī)范
• 打印this.$refs.form.validate()，看狀態(tài)，如果狀態(tài)是pedding（待辦），還沒有執(zhí)行完成，繼續(xù)看校驗(yàn)規(guī)則問題，是否考慮全面需要執(zhí)行 callback() 的情況。

this.$refs.form.validate()不起作用

問題描述？

使用該方法獲取校驗(yàn)狀態(tài)的時(shí)候，一直獲取不到，console沒有結(jié)果輸出

this.$refs.form.validate().then((valid) => {
? ? console.log(valid)
});

解決方法

去掉沒有加入驗(yàn)證規(guī)則的prop

什么意思呢？

我在代碼中寫了很多這樣的prop，作為需要校驗(yàn)的字段

<FormItem label="跨網(wǎng)網(wǎng)關(guān)" prop="groupId">

但是，在我定義的rules里面沒有出現(xiàn)該prop

rules: {
? ?schemaId: [{required: true, message: '必填'}],
},

解決思路

因?yàn)槲沂褂玫氖莍vew框架，所以我會(huì)先去ivew官網(wǎng)查看一番，一般一些比較簡(jiǎn)單的問題，直接翻官網(wǎng)都能得到解決，但是我這種比較無(wú)厘頭的問題，很明顯，我在官網(wǎng)并沒有得到什么實(shí)質(zhì)性的收獲

上百度，就算不能從前輩或同行那里得到什么實(shí)質(zhì)性的解決，但最少也能開闊一下自己的腦洞。

我就順帶說(shuō)下我得收獲：

確定自定義得規(guī)則在最后都進(jìn)行了callback()回調(diào)

可以自己將this.$refs.form.validate()打印出來(lái)看看狀態(tài)

雖然看上去，并沒有什么實(shí)質(zhì)性得解決，但是我從中明白了，肯定是我的校驗(yàn)沒有完成，二話不多說(shuō)。

console.log(this.$refs.form.validate())

果不其然啊，我的狀態(tài)是pedding（待辦）狀態(tài)，還沒有執(zhí)行完成，這個(gè)時(shí)候又繼續(xù)排查，確保校驗(yàn)規(guī)則沒有問題，那么就只能是上面，我自己定義多了prop字段，去掉后，正常呢。

一般來(lái)講多加上prop不會(huì)有問題，還有可能是你的自定義的校驗(yàn)有問題（有可能是你的自定義規(guī)則里面沒有寫callback(),檢查一下）。

總結(jié)

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

最新評(píng)論