111.gif

安裝Vee-Validate

cnpm install vee-validate#2.0.0-rc.25 --save

image.png

安裝舊版版本： npm install vee-validate@2.0.0-rc.25 不會(huì)出現(xiàn)上面報(bào)錯(cuò)。

配置validate.js。抽離出來(lái)驗(yàn)證

import Vue from 'vue'
import VeeValidate from 'vee-validate'
import {Validator} from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN';//引入中文文件
 
// 配置中文
Validator.addLocale('zh_CN',zh_CN);
 
const config = {
  locale: 'zh_CN'
};
 
Vue.use(VeeValidate,config);
 
// 自定義validate 
const dictionary = {
   zh_CN: {
      messages: {
        email: () => '請(qǐng)輸入正確的郵箱格式',
        required: ( field )=> "請(qǐng)輸入" + field
      },
      attributes:{
        phone: '手機(jī)',
        Yhm:'用戶名',
        pass:'密碼',
        email:'郵箱'
      }
  }
};
 
Validator.updateDictionary(dictionary);
 
Validator.extend('phone', {
  messages: {
    zh_CN:field => field + '必須是11位手機(jī)號(hào)碼',
  },
  validate: value => {
    return value.length == 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/.test(value)
  }
});

Validator.extend('Yhm', {
  messages: {
    zh_CN:field => field + '用戶名最少三位哦',
  },
  validate: value => {
    return value.length > 3 
  }
});

Validator.extend('pass', {
  messages: {
    zh_CN:field => field + '6-16位由字母、數(shù)字、特殊符號(hào)兩兩組成',
  },
  validate: value => {
    return value.length >= 6 && /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/.test(value)
  }
});

Validator.extend('email', {
  messages: {
    zh_CN:field => field + '請(qǐng)輸入正確的郵箱',
  },
  validate: value => {
    return  /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)
  }
});

main.js中引用

 import  './validate.js'

頁(yè)面當(dāng)中使用方法

<template>
    <div>

        <van-cell-group>
            <van-field v-model="Yhm" name='Yhm' label="用戶名" v-validate="'required|Yhm'" :class="{'input': true, 'is-danger': errors.has('Yhm') }"></van-field>
            <span v-show="errors.has('Yhm')" class="text-style" v-cloak> {{ errors.first('Yhm') }} </span>
        </van-cell-group>

        <van-cell-group>
            <van-field v-model="phone" name='phone' label="手機(jī)" v-validate="'required|phone'" :class="{'input': true, 'is-danger': errors.has('phone') }"></van-field>
            <span v-show="errors.has('phone')" class="text-style" v-cloak> {{ errors.first('phone') }} </span>
        </van-cell-group>

        <van-cell-group>
            <van-field v-model="pass" name='pass' label="密碼" v-validate="'required|pass'" :class="{'input': true, 'is-danger': errors.has('pass') }"></van-field>
            <span v-show="errors.has('pass')" class="text-style" v-cloak> {{ errors.first('pass') }} </span>
        </van-cell-group>

        <van-cell-group>
            <van-field v-model="email" name='email' label="郵箱" v-validate="'required|email'" :class="{'input': true, 'is-danger': errors.has('email') }"></van-field>
            <span v-show="errors.has('email')" class="text-style" v-cloak> {{ errors.first('email') }} </span>
        </van-cell-group>

        <van-button type="primary" size="normal" @click='btn'>提交</van-button>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                Yhm: '',
                phone: '',
                pass: '',
                email: ''
            }
        },
        methods: {
            btn() {
                this.$validator.validateAll().then((result) => {
                    if (result) {
                        console.log('全部正確')
                    }else{
                        console.log('有錯(cuò)誤的哦')
                    }
                })
            }
        }
    }
</script>

<style scope>
    .text-style {
        line-height: 1rem;
        color: red;
        display: block;
        text-indent: 2.8rem;
        transition: .5s;
    }
</style>