表单验证插件的基本使用

序言:在市场上有许多表单验证插件,他们的工作方式不尽相同,在这里来介绍比较流行的  vee-validate

第一步 创建新的js文件  validate.js ,并在 main.js中引用

//引用表单验证 插件
import "@/units/validate"

  第二步 插件的安装

cnpm i vee-validate@2 -save  安装的插件安装2版本的

 第三步 进行引入插件 和vue ,且引用中文版 并进行挂载

 //引用vue
 import Vue from 'vue'
 //引用插件
 import VeeValidate from 'vee-validate'
 // // 引入中文 message 这样提示就是 中文的提示信息
 import zh_CN from 'vee-validate/dist/locale/zh_CN'
 Vue.use(VeeValidate, {
         //失却焦点进行表单验证
         events: 'blur'
     })

第四步 提示信息

 VeeValidate.Validator.localize('zh_CN', {
         messages: {
             ...zh_CN.messages,
             is: (field) => `${field}必须与密码相同` // 修改内置规则的 message,让确认密码和密码相同
         },
         attributes: { // 给校验的 field 属性名映射中文名称
             phone: '手机号',
             code: '验证码',
             password: '密码',
             repassword: '确认密码',
             isCheck: '协议'
         }
     })

第五步 基本使用

   <div class="content">
        <label>手机号:</label>
        <!-- 
           验证规则,里面书写正则
          v-validate="{ required: true, regex: /^1\d{10}$/ }"
         
          里面动态添加类名,将英文与中文进行替换

           :class="{ invalid: errors.has('phone') }"
         -->
        <input
          type="text"
          placeholder="请输入你的手机号"
          v-model="phone"
          name="phone"
          v-validate="{
            required: true,
            regex:
              /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/,
          }"
          :class="{ invalid: errors.has('phone') }"
        />
        <!-- 验证提示的信息 -->
        <span class="error-msg">{{ errors.first("phone") }}</span>
      </div>

剩下的诸如此类书写

但会碰到,要求确认密码的情况  

 <div class="content">
        <label>确认密码:</label>
        <input
          type="text"
          placeholder="请输入确认密码"
          v-model="repassword"
          name="repassword"
          v-validate="{ required: true, is: password }"
          :class="{ invalid: errors.has('password') }"
        />
     <!-- is:password 的意思就是 要与password输入的值相同 -->
        <span class="error-msg">{{ errors.first("repassword") }}</span>
      </div>

在所有情况验证完成时,我们要判断用户所输入的值是否都符合条件,如果都符合条才进行下一步

//全部表单验证 全部验证成功时才返回为真
//await 返回成功的结果,必须搭配  async 使用
const success = await this.$validator.validateAll(); 

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值