javascript - Vue/Vuetify - วิธีสร้างการตรวจสอบความถูกต้องในแต่ละรายการชิปแทนที่จะตรวจสอบทั้งอินพุตการเลือก

มีใครรู้วิธีทำการตรวจสอบความถูกต้อง (ด้วย vee-validate) สำหรับแต่ละรายการชิปบ้างไหม?

ฉันมีโค้ดชิ้นนี้:

<v-select
  class="elevation-0 mt-border-bottom"
  v-model="PhoneNumber"
  label="Add phone number"
  chips
  tags
  solo
  prepend-icon="phone"
  clearable
  :error-messages="errors.collect('Phone Number')"
  v-validate="'required|numeric'"
  data-vv-name="Phone Number"
  required
>
    <template slot="selection" slot-scope="data">
        <v-chip
          close
          outline
          dark
          @input="remove(data.item)"
          :selected="data.selected"
        >
            <strong>{{ data.item }}</strong>
        </v-chip>
    </template>
</v-select>

<script>
    export default {
        data () {
            return {
                PhoneNumber: []
            }
        },
        methods: {
            async submitNewNumber () {
                await this.$validator.validateAll().then((isValid) => {
                    if (isValid) {
                        console.log('submitted')
                    } else {
                        return false
                    }
                })
            }
        }
    }
</script>

และตอนนี้การตรวจสอบความถูกต้องกำลังเกิดขึ้นกับข้อมูลหมายเลขโทรศัพท์ทั้งหมดเท่านั้น ฉันอยากรู้ว่าฉันจะทำให้มันทำงานกับแต่ละชิปภายในการตั้งค่านี้โดยตั้งค่า min_value เป็น 9 และ max_value เป็น 15 ได้อย่างไร

Vuetify - การใช้งานชิป: https://vuetifyjs.com/en/components/chips

Vuetify - Vee-validate: https://vuetifyjs.com/en/components/forms#example-vee-validate

Vee-validate - กฎการตรวจสอบความถูกต้อง: https://baianat.github.io/vee-validate/guide/rules.html

ขอบคุณ

คำตอบ #1

ดูเหมือนว่าจะไม่มีฟังก์ชันการตรวจสอบที่ built-in สำหรับ v-chip ดังนั้นฉันจึงใช้การตรวจสอบค่าเริ่มต้น (ไม่ใช่ vee-validate) ด้วยวิธีนี้คุณสามารถเห็นผลลัพธ์ของ v-select จากนั้นคุณสามารถวนลูปผ่านผลลัพธ์และตรวจสอบค่าของแต่ละค่าได้

        inputRules = [
            (v: any) => {
                if (!v || v.length < 1)
                    return 'Input is required';
                else if (v.length > 0) {
                for (let i = 0; i < v.length; i++) {
                    if (v[i].length > 9)
                        return 'Invalid Number';
                }
            }
                else return true;
            }
        ];

<v-form ref="form" v-model="valid" lazy-validation>
        <v-select
            class="elevation-0 mt-border-bottom"
            v-model="phoneNumber"
            label="Add phone number"
            chips
            tags
            solo
            prepend-icon="phone"
            clearable
            data-vv-name="Phone Number"
            required
            :rules="inputRules"
        >
            <template slot="selection" slot-scope="data">
                <v-chip
                    close
                    outline
                    dark
                    @input="remove(data.item)"
                    :selected="data.selected"
                >
                    <strong>{{ data.item }}</strong>
                </v-chip>
            </template>
        </v-select>
        <v-btn @click.native="submitNewNumber">Test</v-btn>
    </v-form>

คำตอบ #2

สำหรับเรื่องนั้น เราต้อง

1. ตรวจสอบค่าด้วยการเป็นอาเรย์ (ดังนั้นต้องตรวจสอบแต่ละรายการเป็นรายบุคคล)
2. กำหนดกฎ vee-validation สำหรับตัวคุณเอง

// ES6 code
import {extend} from "vee-validate"
import {isEmail, isArray} from "validator"

// e.g. check each chip to contain valid email
extend("chipUrlRule", function (val) {
  if (!isArray(val) || val.length < 0) {
    return "Enter at least one Email"
  }

  for (let i = 0; i < val.length; i++) {
    if (!isEmail(val[i])) {
      return `${val[i]} is not a valid Email Address`
    }
  }

  return true

})