vue-validator驗證器初體驗

本文僅介紹vue-validator的基本用法

使用方法

1.直接引用在線cdn地址 https://cdn.bootcss.com/vue-validator/3.0.0-alpha.2/vue-validator.js
    2.npm安裝 npm install vue-validator

若是是npm安裝完以後在入口文件main.js中引入

import Validator from 'vue-validator';
Vue.use(Validator);

文中使用的表單控件基於elementUI

<template>
    <div class="app-container">
        <el-tabs v-model="activeName">
            <el-tab-pane label="表單" name="rulesPane">
                <el-form ref="rulesForm" :rules="formRules" :model="rulesForm" label-width="200px">
                    <el-form-item label="用戶名:" prop="userName">
                        <el-input v-model="rulesForm.userName" style="width:300px" maxlength="50"/>
                    </el-form-item>
                    <el-form-item label="身份證號:" prop="idNumber">
                        <el-input v-model="rulesForm.idNumber" style="width:300px" maxlength="50"/>
                    </el-form-item>
                    <el-form-item label="地址:" prop="address">
                        <el-input v-model="rulesForm.address" style="width:300px" maxlength="50"/>
                    </el-form-item>
                    <el-form-item label="手機號:" prop="phoneNumber">
                        <el-input v-model="rulesForm.phoneNumber" style="width:300px" maxlength="50"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit">保存</el-button>
                        <el-button type="primary" @click="reset">重置</el-button>
                    </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

在<el-form ref="rulesForm" :rules="formRules" :model="rulesForm"></el-form>中，ref是被引用時的標識，在驗證表單的時候傳入此表示，rules是驗證規則，須要在data中定義

在<el-form-item label="用戶名:" prop="userName"></el-form-item>中，prop對應rules中的規則，在使用 validate、resetFields 方法的狀況下，該屬性是必填的

在script中定義驗證規則和方法

<script>
    const validatorIdNumber = function (rule, value, callback) {
        const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
        if(!value) {
            return callback(new Error ('請輸入身份證號'))
        }else if(reg.test(value)){
            callback()
        }else {
            return callback(new Error('身份證號格式不正確'))
        }
    }
    const validatorPhoneNumber = function (rule, value, callback) {
        const reg = /^[1][3,4,5,7,8][0-9]{9}$/
        if(!value){
            return callback(new Error('請輸入手機號'))
        }else if(reg.test(value)){
            callback()
        }else {
            return callback(new Error('手機號格式不正確'))
        }
    }

    export default{
        data() {
            return {
                rulesForm: {
                    userName:'',
                    address:'',
                    idNumber:'',
                    phoneNumber: ''
                },
                formRules: {
                    userName:[{required: true,message: '請輸入用戶名',trigger: 'blur'}],
                    idNumber:[{required: true,trigger: 'blur',validator: validatorIdNumber}],
                    address:[{required: true, message: '請輸入地址',trigger: 'blur'}],
                    phoneNumber: [{required: true,trigger: 'blur', validator: validatorPhoneNumber}]
                }
            }
        },
        methods:{
            onSubmit () {
                this.$refs['rulesForm'].validate(valid => {
                    console.log(valid)
                    if(valid){
                        alert('成功提交')
                    }else{
                        alert('提交失敗')
                        return false
                    }
                })
            },
            reset (){
                this.$refs['rulesForm'].resetFields()
            }
        }
    }
</script>

首先定義驗證方法
validatorIdNumber是用來驗證身份證號的驗證器
validatorPhoneNumber用來驗證是否爲正確的手機號
'(rule, value, callback) => {}' 爲固定格式
方法中定義的常量reg是驗證器的正則表達式

接着定義驗證規則
驗證規則中userName就是在表單中傳入的prop，required爲是否必填，message爲失去焦點後的提示內容，trigger爲觸發驗證的事件類型，validator爲驗證表單的方法

最後提交表單
this.$refs[ ]獲取標識符提交表單驗證
this.$refs['rulesForm'].resetFields()此方法能夠重置表單

tips
使用resetFields()重置表單時，須要在data內初始化表單