vue表單驗證組件vue-verify-plugin

install

npm install vue-verify-plugin

use

<div>
                <span class="left">姓名</span>
                <input class="left" v-model="name" v-verify.name="name"/>
           
                <span class="left">聯系電話</span>
                <input class="left" v-model="phone" v-verify.phone="phone"/>
            
</div>
<script>
//在指定頁面引入
import verify from "vue-verify-plugin"
Vue.use(verify, {
        blur: true   //設置離開焦點后觸發
    })

 export default {
        name: 'app',
        data () {
        },
       verify: {
            phone: ["required", "mobile"],
        },
    }
</script>

指令說明

v-verify

在表單控件元素上創建數據的驗證規則，他會自動匹配要驗證的值以及驗證的規則。

v-verify 修飾符說明

該指令最后一個修飾符為自定義分組

//自定義teacher分組
v-verify.teacher
//自定義student分組
v-verify.student

//驗證時可分開進行驗證  

//驗證student 分組
this.$verify.check("student")
//驗證teacher 分組
this.$verify.check("teacher")
//驗證所有
this.$verify.check();

默認驗證規則

*email 郵箱規則驗證
*mobile 手機號碼驗證
*required 必填
*url 鏈接規則驗證
*maxLength 最多maxLength個字符串(可自定義message)
*minLength 最少minLength個字符串(可自定義)

自定義驗證規則

name: [
                'required',
                {
                    test: function (val) {
                        if (val.length < 2) {
                            return false
                        }
                        return true
                    },
                    message: "姓名不得小於2位"
                }
            ],