vee-validate的官網連結

VeeValidate中文文件

參考部落格：

vee-validate 自定義驗證規則

前端框架Vue（11）——Vue+表單驗證 VeeValidate 實踐

vue專案中使用vee-validate表單驗證

一、安裝Vee-Validate

npm install vee-validate --save

二、建立一個js存放表單驗證規則，validate.js

//validate.js中的詳細程式碼(已引入中文檔案)，包含其他自定義驗證規則 //摺疊

import Vue from 'vue'
import VeeValidate, {
    Validator
} from 'vee-validate'
import zh from 'vee-validate/dist/locale/zh_CN' // 引入中文檔案
Validator.addLocale(zh)
const config = {
    locale: 'zh_CN',
    fieldsBagName: 'fieldBags'
}
Vue.use(VeeValidate, config)

// 自定義validate
//不配置則預設
const dictionary = {
    zh_CN: {
        //message ： 提示語
        messages: {
            required: (field) => '請輸入' + field,
            number: (field) => field + '必須為數值',
            url: () => '請輸入正確格式的伺服器地址',
            ip: () => '請輸入正確的IP地址',
        },
        //attributes： 就是 filed
        attributes: {
            name:"使用者名稱",
            ip: 'IP地址',
            httpPort: 'HTTP埠',
            userName: '使用者暱稱',
            mobile: '手機號碼',
            emailAdd: '郵件地址',
            authCode: '您收到的驗證碼',
            loginPwd: '登入密碼（6~18位)',
            traderpwd: '交易密碼（6~18位)',
            recommender: '您的推薦人',
            isSee: '閱讀使用者協議，並同意',
            npwdLog: '新的登入密碼',
            qrwdLog: '確認登入密碼'
        }
    }
}

Validator.updateDictionary(dictionary)

// 1.IPV4地址
Validator.extend('ipAddr', {
    messages: {
        zh_CN: field => '請輸入正確的IPV4地址'
    },
    validate: value => {
        return /^((25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))\.){3}(25[0-5]|2[0-4]\d|((1\d{2})|([1-9]?\d)))$/.test(value)
    }
})

// 2.埠【0~65535】
Validator.extend('port', {
    messages: {
        zh_CN: field => '請輸入正確格式的埠號'
    },
    validate: value => {
        return /^([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-4]\d{4}|65[0-4]\d{2}|655[0-2]\d|6553[0-5])$/.test(value)
    }
})

// 3.使用者暱稱
Validator.extend('name', {
    messages: {
        zh_CN: field => '使用者暱稱不允許特殊符號'
    },
    validate: value => {
        return /^[\u4e00-\u9fa5A-Za-z0-9]*$/.test(value)
    }
})

// 4.使用者暱稱
Validator.extend('phone', {
    messages: {
        zh_CN: field => '手機號格式不正確'
    },
    validate: value => {
        return /^1[2-9]\d{9}$/.test(value)
    }
})      

// 5.郵箱
Validator.extend('email', {
    messages: {
        zh_CN: field => '郵箱格式不正確'
    },
    validate: value => {
        return /^[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?$/.test(value)
    }
})

// 6.驗證碼
Validator.extend('code', {
    messages: {
        zh_CN: field => '驗證碼格式不正確'
    },
    validate: value => {
        return /^[0-9]*$/.test(value)
    }
})

// 6.登入密碼
Validator.extend('logpwd', {
    messages: {
        zh_CN: field => '登入密碼格式不正確'
    },
    validate: value => {
        return /^\S{6,18}$/.test(value)
    }
})

// 7.交易密碼
Validator.extend('tradpwd', {
    messages: {
        zh_CN: field => '交易密碼格式不正確'
    },
    validate: value => {
        return /^\S{6,18}$/.test(value)
    }
})

// 8.推薦人
Validator.extend('recom', {
    messages: {
        zh_CN: field => '推薦人格式不正確'
    },
    validate: value => {
        return /^[^\u4e00-\u9fa5]{0,}$/.test(value)
    }
})

// 9.使用者協議
Validator.extend('see', {
    messages: {
        zh_CN: field => '請閱讀使用者協議，並同意'
    },
    validate: value => {
        return true
    }
})

// 10.忘記密碼，新的登入密碼
Validator.extend('npwd', {
    messages: {
        zh_CN: field => '登入密碼格式不正確[6~18位]'
    },
    validate: value => {
        return /^\S{6,18}$/.test(value)
    }
})

// 11.忘記密碼，確認新的登入密碼
Validator.extend('qrwd', {
    messages: {
        zh_CN: field => '登入密碼格式不正確[6~18位]'
    },
    validate: value => {
        return /^\S{6,18}$/.test(value)
    }
})

//再附上個內建的校驗規則，摺疊

after{target} - 比target要大的一個合法日期，格式(DD/MM/YYYY)
alpha - 只包含英文字元
alpha_dash - 可以包含英文、數字、下劃線、破折號
alpha_num - 可以包含英文和數字
before:{target} - 和after相反
between:{min},{max} - 在min和max之間的數字
confirmed:{target} - 必須和target一樣
date_between:{min,max} - 日期在min和max之間
date_format:{format} - 合法的format格式化日期
decimal:{decimals?} - 數字，而且是decimals進位制
digits:{length} - 長度為length的數字
dimensions:{width},{height} - 符合寬高規定的圖片
email - 不解釋
ext:[extensions] - 字尾名
image - 圖片
in:[list] - 包含在陣列list內的值
ip - ipv4地址
max:{length} - 最大長度為length的字元
mimes:[list] - 檔案型別
min - max相反
mot_in - in相反
numeric - 只允許數字
regex:{pattern} - 值必須符合正則pattern
required - 不解釋
size:{kb} - 檔案大小不超過
url:{domain?} - (指定域名的)url

三、元件中使用

<div class="layui-form-item">
                        <label class="layui-form-label">賬戶</label>
                        <div class="layui-block">
                                <input
                                        v-model="name"
                                        v-validate
 
="'required|min:3|alpha'"
                                        :class="{
                                                input: true,
                                                'is-danger': errors.has('name'),
                                        }"
                                        type="text"
                                        name="name"
                                        class="layui-input"
                                        placeholder="賬戶"
                                />
                                <span
                                        v-show="errors.has('name')"
                                        class="text-style"
                                        v-cloak
                                >
                                        {{ errors.first("name") }}
                                </span>
                        </div>
</div>

span中用到了errors的幾個方法，這裡的引數都是定義了驗證規則的表單的name。列舉幾個errors的方法: //摺疊

1、first(‘field')
field中（也就是剛剛說過的name表單）中的第一個錯誤
2、collect(‘field')
field中所有的錯誤
3、has(‘field')
field中是否有錯誤
4、all()
當前表單中的所有錯誤
5、any()
當前表單中是否有錯誤
6、count()
當前表單中的錯誤數量
7、clear()
清除當前表單中的所有錯誤

四、點選按鈕，再次驗證

<div class="loginbutton">
           <div @click="doSubmit">立即登入</div>
</div>

methods: {   
                doSubmit() {
                this.$validator.validateAll().then(valid => {
                    // 所有校驗通過valid 為true
                if (valid) {
                // 傳送資料
                    } else {
                        console.log('提交失敗')
                    }
                })
                },  
    }

// validateAll()校驗所有,只要有一個校驗失敗了，就返回false

其他補充：

自帶規則和config配置資訊