TWSNMP FC:自動発見画面に入力チェックを組み込む

今朝は猫が４時に起こしてくれましたが眠くて二度寝しようとすると、また騒いで起こしにきてくれました。かみさんが起きてお世話しましたが、またやってきて私を起こしました。
昨日は、ひたすらテーブル形式で表示する画面にCSVのエクスポート機能を組み込みました。同じソースコードを繰り返しコピー＆ペーストして、少し修正する作業でしたが大量にあるので腕がいたくなりました。
さて今朝は自動発見の画面に

フォーム・コンポーネント

を使って入力チェックする機能を組み込みました。チェックするのは、開始IPと終了IPで以下のルールです。

・必須
・IPアドレス形式である
・終了IPは開始IP以降のアドレス

      startIPRules: [
       (v) => !!v || '開始IPは必須です。',
       (v) =>
         /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])$/.test(
           v
         ) || 'IPアドレスを指定してください。',
     ],
     endIPRules: [
       (v) => !!v || '終了IPは必須です。',
       (v) =>
         /^((25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])\.){3}(25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9]?[0-9])$/.test(
           v
         ) || 'IPアドレスを指定してください。',
       (v) => {
         return this.cmpIP(v) || '開始IP以降のアドレスを指定してください。'
       },
     ],
    cmpIP(b) {
     const aa = this.discover.Conf.StartIP.split('.')
     const ba = b.split('.')
     if (aa.length !== 4 || ba.length !== 4) {
       return false
     }
     for (let i = 0; i < 4; i++) {
       if (aa[i] * 1 > ba[i] * 1) {
         return false
       }
     }
     return true
   },

のようなソースコードでルールを実現しました。
結果

のようになりました。今日の開発は、

自動発見画面に入力チェックを追加 · twsnmp/twsnmpfc@7ad2892

です。入力チェックを組み込む場所も沢山あるので、また腕が痛くなりそうです。明日に続く