Vue+表单验证 Vee-Validate

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 不会出现上面报错。

配置validate.js。抽离出来验证

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: () => '请输入正确的邮箱格式',
        required: ( field )=> "请输入" + field
      },
      attributes:{
        phone: '手机',
        Yhm:'用户名',
        pass:'密码',
        email:'邮箱'
      }
  }
};
 
Validator.updateDictionary(dictionary);
 
Validator.extend('phone', {
  messages: {
    zh_CN:field => field + '必须是11位手机号码',
  },
  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位由字母、数字、特殊符号两两组成',
  },
  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 + '请输入正确的邮箱',
  },
  validate: value => {
    return  /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/.test(value)
  }
});

main.js中引用

 import  './validate.js'

页面当中使用方法

<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="手机" 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('有错误的哦')
                    }
                })
            }
        }
    }
</script>

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