Vue项目常见问题(62)vee-validate表单验证使用

目录

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

vee-validate

1.安装vee-validate

2.引入使用vee-validate

3.完成注册页面的表单验证 

手机号验证

 验证码验证

 密码验证

 确认密码验证

同意复选框开关的验证

---

gitee仓库地址:https://gitee.com/CMD-UROOT/sph-project/commits/master

大家根据上传历史进行查找你需要的代码

vee-validate

网址:  vee-validate - npm

1.安装vee-validate

npm i vee-validate@2 --save

2.引入使用vee-validate

在plugins文件下新建一个validate.js文件:

在src/plugins/validate.js中:

 在main.js中:引入validate.js文件

3.完成注册页面的表单验证 

 

我们看到上图其实有5个地方是需要我们去验证的

在src/plugins/validate.js中:

1.  
   //vee-validate插件;表单验证区域
2.  
   import Vue from "vue";
3.  
   import VeeValidate from "vee-validate";
4.  
   //引入进来的是vee-valadiate提供信息提示【中文的】
5.  
   import zh_CN from 'vee-validate/dist/locale/zh_CN'
6.  
   Vue.use(VeeValidate)
7.  
    
8.  
   //表单的验证
9.  
   VeeValidate.Validator.localize('zh_CN', {
10.  
    messages: {
11.  
    ...zh_CN.messages,//给VeeValidate插件提供【中文提示功能】
12.  
    is: (field) => `${field}必须与密码相同` // 修改内置规则的 message，让确认密码和密码相同
13.  
    },
14.  
    //注册：有五个字段：phone、code、password、password1、agree【将来用中文显示，别用英文】
15.  
    attributes: { // 给校验的 field 属性名映射中文名称
16.  
    phone: '手机号',
17.  
    code: '验证码',
18.  
    password: '密码',
19.  
    password1: '确认密码',
20.  
    agree: '协议'
21.  
    }
22.  
    })

在pages/Register/index.vue中:

手机号验证

先找到手机号的结构:

 替换为:

1.  
   <div class="content">
2.  
   <label>手机号:</label>
3.  
   <!--
4.  
   name:给每一个表单元素添加一个名字，需要让vee-valadite区分验证的是哪一个表单元素
5.  
   v-validate=验证规则
6.  
   -->
7.  
   <input type="text" placeholder="请输入你的手机号" v-model="phone" name="phone" v-validate="{ required: true, regex: /^1\d{10}$/ }" :class="{ invalid: errors.has('phone') }">
8.  
   <!-- 表单验证失败：提示错误信息 -->
9.  
   <span class="error-msg">{{ errors.first("phone") }}</span>
10.  
    </div>

 验证码验证

 先找到验证码的结构:

 替换为:

1.  
   <!-- 验证码 -->
2.  
   <div class="content">
3.  
   <label>验证码:</label>
4.  
   <input type="text" placeholder="请输入你的验证码" v-model="code" name="code" v-validate="{ required: true, regex: /^\d{6}$/ }" :class="{ invalid: errors.has('phone') }">
5.  
   <button style="width: 100px;height:38px;" @click="getCode">获取验证码</button>
6.  
   <span class="error-msg">{{ errors.first("code") }}</span>
7.  
   </div>

 密码验证

 先找到密码的结构:

 替换为:

1.  
   <!-- 登录密码 -->
2.  
   <div class="content">
3.  
   <label>登录密码:</label>
4.  
   <input type="password" placeholder="请输入你的登录密码" v-model="password" name="password" v-validate="{ required: true, regex: /^[0-9a-zA-Z]{8,20}$/ }" :class="{ invalid: errors.has('password') }">
5.  
   <span class="error-msg">{{ errors.first("password") }}</span>
6.  
   </div>

 确认密码验证

 先找到确认密码的结构:

 替换为:

1.  
   <!-- 确认登录密码 -->
2.  
   <div class="content">
3.  
   <label>确认密码:</label>
4.  
   <!-- is:紧随的判断是否相等规则 -->
5.  
   <input type="password" placeholder="请输入你的确认密码" v-model="password1" name="password1" v-validate="{ required: true, is:password}" :class="{ invalid: errors.has('password1') }">
6.  
   <span class="error-msg">{{ errors.first("password1") }}</span>
7.  
   </div>

同意复选框开关的验证

在src/plugins/validate.js中:添加自定义校验规则验证同意复选框开关

勾上了就不显示,没勾上就会一直显示必须同意

 在pages/Register/index.vue中:

 先找到协议的结构:

替换为:

1.  
   <!-- 协议 -->
2.  
   <div class="controls">
3.  
   <input type="checkbox" v-model="agree" name="agree" v-validate="{ required: true,'agree':true}" :class="{ invalid: errors.has('agree') }">
4.  
   <span>同意协议并注册《尚品汇用户协议》</span>
5.  
   <span class="error-msg">{{ errors.first("agree") }}</span>
6.  
   </div>
7.  
   <div class="btn">
8.  
   <button @click="userRegister">完成注册</button>
9.  
   </div>
10.  
    </div>

为了验证完这5条信息之后,点击注册才能发请求,我们需要在

 在pages/Register/index.vue中:

 测试:

  在pages/Register/index.vue中:

 业务完成

这篇好文章是转载于：学新通技术网