IT的隱形人世界

最近有做到驗證，筆記一下，發現真的蠻淺顯易懂的，比elementUI還簡單...

 

<v-form ref="form" >
        <v-text-field v-model="form.name" :counter="10" :rules="rules.name" label="大名" required></v-text-field>
        <v-text-field v-model="form.email" label="信箱" :rules="rules.email" required></v-text-field>
        <v-textarea v-model="form.conetnt"  :counter="500" label="內容" :rules="rules.conetnt" required></v-textarea>                        
</v-form>

 

Js的部分:

大概說明一下，拿rules.name來說，裡面就包含了兩個驗證，

其一，如果進來的值(v)為不為空，則沒事，否則回傳驗證資訊'請填寫大名'

其二，如果進來的值(v) <= 10 ，則沒事，否則回傳驗證資訊'不可大於10字元'

要多種變化可以加入規則運算式錯處理唷!!

data: {
      rules : {
               name: [
                  v => !!v || '請填寫大名',
                  v => v.length <= 10 || '不可大於10字元',
               ],
               email: [
                  v => !!v || '請填寫信箱',
                  v => /.+@.+/.test(v) || '信箱格式不正確',
               ],
               conetnt: [
                  v => !!v || '請填寫內容'
               ],
            }
}

 

很簡單吧!!