您的位置:68399皇家赌场 > 服务器租用 > vue中vee validate表单校验的几种为主采用

vue中vee validate表单校验的几种为主采用

发布时间:2019-05-08 19:29编辑:服务器租用浏览(133)

    后天重视记录一下用vee-validate来打开表单校验的多少个基本选用。包蕴最基础的必填和尺寸校验;异步请求服务的校验(重名校验),还有延迟校验。怎样引入等就不在这里赘述了,直接进入正题。

    今天重视记录一下用vee-validate来拓展表单校验的多少个主导采纳。包蕴最基础的必填和长短校验;异步请求服务的校验(重著名高校验),还有延迟校验。怎么样引进等就不在这里赘述了,直接进入正题。

    VeeValidate是什么:

    Vue项目碰着要表单验证了啊,对自家的话表单验证是个很纠(dan)结(teng)的剧情,种种剖断凌乱到飞起。往常使用jquery的validate插件做表单验证方便呢,你也能够在Vue里引进jquery的validate插件(怎样引进jquery在自个儿上一篇博文有介绍,点击查看)。不过大家是做vue项目也,不到骨子里化解不了还是提出不用引进,因为Vue自个儿就有表单验证的插件,那便是vee-validate。

    一.必填和长度校验

    一向利用v-validate属性实行布局,不一致的校验采取‘|’ 隔断。是不是有报错依照 errors.has('userName') 进行剖断,‘userName’对应的是表单的name属性的值。

    errors.first('userName)会显得表单校验中率先个错误消息。

     <el-col :span="4" class="form-label">
            <label>用户名</label>
      </el-col>
      <el-col :span="8">
            <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
            {{ errors.first('userName') }}
      </el-col>
    

     

    结果如下:

    www.68399.com 1

    从结果大家能够看看,校验的错误音信是显得了,可是暗许都以英文的,那个可能有的时候候跟大家其实开垦的须求不是千篇一律的。那么些大家可以动用

    vee-validate的国际化去举行中文的来得。不过这里作者要介绍的是另一种方法,倘若是系统只须求协助一种语言,笔者感到用这种办法就能够。

    一向行使 errors.first('userName:required') 即 ‘字段名:校验规则’  的不二秘技张开决断进而展示对应提示音讯的格局。那些措施得以让表单在对应校验不经过时展示大家团结定义对应的本性化提示新闻。

    亮点是:配置轻易,方便完毕本性化提示。

    <el-col :span="4" class="form-label">
           <label>用户名</label>
    </el-col>
    <el-col :span="8">
           <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
           用户名为必填项
           用户名的最小长度为2
           用户名的最大长度为20
    </el-col>
    

     

    一.必填和长短校验

    VeeValidate是Vue.js的验证库,它有诸多证实规则,并扶助自定义规则。它遵照模板,由此它与HTML5验证API相似并且很精通。您能够作证HTML5输入以及自定义Vue组件。它也是以本土壤化学为基础营造的,实际上大家有大致4四种语言由优良的社区成员辅助和掩护。

    www.68399.com,自己在那并不是事无巨细讲授vee-validate的运用效用,只是迅速理解怎样在品种里选用vee-validate,做项目时哪有那么多时间让您去纯熟三个插件,确定先消除了再说,具体纯熟通晓领会请自行查阅有关资料。

     2.异步兵校园验 和延迟

    异步校验,首要就是两局地,2个是校验器的定义,3个是利用

    概念部分:

    import { Validator } from 'vee-validate';
    
    const emailsDB = [
        'abcd@cc.com'
    ];
    const isUnique = value => new Promise((resolve) => {
        setTimeout(() => {
            if (emailsDB.indexOf(value) === -1) {
                return resolve({
                    valid: true
                });
            }
    
            return resolve({
                valid: false,
                data: {
                    message: `${value} 已存在.`
                }
            });
        }, 200);
    });
    
    Validator.extend('unique', {
        validate: isUnique,
        getMessage: (field, params, data) => data.message
    });
    

    使用:

     <el-col :span="4" class="form-label">
         <label>邮箱</label>
     </el-col>
     <el-col :span="8">
          <el-input name="email" v-model="email" v-validate="'unique'" data-vv-delay="1000"></el-input>
          重复
     </el-col>
    

    结果:

    www.68399.com 2 

    在那之中  data-vv-delay="一千"  正是延迟校验的运用。1000即一千皮秒

    以下是多少个例子的全体代码:

    www.68399.com 3www.68399.com 4

    <template>
        <div>
            <el-form name="myForm" novalidate>
                <el-row>
                    <el-col :span="4" class="form-label">
                        <label>邮箱</label>
                    </el-col>
                    <el-col :span="8">
                        <el-input name="email" v-model="email" v-validate="'unique'" data-vv-delay="1000"></el-input>
                        重复
                    </el-col>
    
                    <el-col :span="4" class="form-label">
                        <label>用户名</label>
                    </el-col>
                     <el-col :span="8">
                        <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
                        用户名为必填项
                        用户名的最小长度为2
                        用户名的最大长度为20
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
                        {{ errors.first('userName') }}
                    </el-col> -->
    
                </el-row>
            </el-form>
        </div>
    </template>
    <script>
    import { Validator } from 'vee-validate';
    
    const emailsDB = [
        'abcd@cc.com'
    ];
    const isUnique = value => new Promise((resolve) => {
        setTimeout(() => {
            if (emailsDB.indexOf(value) === -1) {
                return resolve({
                    valid: true
                });
            }
    
            return resolve({
                valid: false,
                data: {
                    message: `${value} 已存在.`
                }
            });
        }, 200);
    });
    
    Validator.extend('unique', {
        validate: isUnique,
        getMessage: (field, params, data) => data.message
    });
    export default {
        data() {
            return {
                email: '',
                userName: ''
            }
        }
    }
    </script>
    <style scoped>
    .form-label {
      text-align: right;
      padding-right: 10px;
    }
    .error {
      color: red;
    }
    </style>
    

    总体代码

     

    直接利用v-validate属性进行布局,分化的校验采纳 ‘|' 隔绝。是还是不是有报错依据errors.has('userName') 进行判断,‘userName'对应的是表单的name属性的值。

    本文包括VeeValidate包括以下几点应用:

    1.npm安装vee-validate:npm install vee-validate --save --registry=https://registry.npm.taobao.org --verbose

    errors.first('userName)会展现表单校验中第2个错误音信。

    壹、基本安装使用

    二.安装成功后在main.js中引进:

     <el-col :span="4" class="form-label">
      <label>用户名</label>
     </el-col>
     <el-col :span="8">
      <el-input name="userName" v-model="userName" v-validate="'required|min:2|max:20'"></el-input>
      {{ errors.first('userName') }}
     </el-col>
    

    二、本地化援救

    www.68399.com 5

    结果如下:

    3、自定义规则和不当消息

    三.在您要举办表单验证的input标签进入相关的代码:

    www.68399.com 6

    肆、验证HTML伍输入和自定义Vue组件

    www.68399.com 7

    从结果大家能够观望,校验的错误音讯是展示了,可是私下认可都以英文的,那么些也可以有的时候候跟大家实际支出的急需不是平等的。这几个大家得以运用

    5、统壹交由按键管理

    注意:

    vee-validate的国际化去举办中文的来得。不过此间小编要介绍的是另一种格局,倘使是系统只须求支持一种语言,笔者感到用这种措施就足以。

    先看看页面效果:

    (一)errors打字与印刷出来是如此的:{ "item": [ { "id": "_9e6hk2qh2", "field": "email", "msg": "email 是必须的", "rule": "email", "scope": null } ] },span标签通过errors的多少个艺术来打开始展览示隐藏和提醒错误,这里列出多少个常用的errors方法: errors.first('田野(field)'):当前田野同志的首先个错误新闻,字符串 errors.collect('田野同志'):当前田野(field)的持有错误新闻,数组列表 errors.has('田野同志'):当前filed是不是有荒唐,布尔值 errors.all():当前表单全体错误,数组列表 errors.any():当前表单是不是有其它错误,布尔值

    一贯利用 errors.first('userName:required')即 ‘字段名:校验规则'  的办法张开判断进而体现对应提醒消息的点子。那么些艺术能够让表单在相应校验不经过时显得我们本人定义对应的性子化提醒新闻。

    www.68399.com 8

    (2)v-validate="'required | email'"有多个表明,八个是为空验证,三个是输入错误验证,你想要多少种表明就在这里写。举例你要界定字数,那就加多少个max,即v-validate="'required | email | max:玖'"。

    优点是:配置轻便,方便实现性子化提醒。

    假设要看gif效果的能够在本身的github(

    (三)name属性一定要写,span标签是显示错误提醒的。其实此时1度主导实现表单验证了,只是出现的唤醒是插件提供的私下认可提示,比如email的荒谬提醒如下图所示,那早晚不是大家想要的,我们要求定义一下。

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:vue中vee validate表单校验的几种为主采用

    关键词: 68399皇家赌场