Vue2电商实战项目(七)收尾补充-JZTXT

表单验证: `vee-validate`插件

安装

- npm i vee-validate@2 --save // 安装'2'版本的

插件 模块化

### plugins.validate.js
    import Vue from 'vue'
    import VeeValidate from 'vee-validate'

    console.log('表单验证',VeeValidate) // 测试
    Vue.use(VeeValidate)
    
### main.js
	......
	import "@/plugins/validate" // 加载插件

配置字段

### plugins.validate.js

import Vue from 'vue'
import VeeValidate from 'vee-validate'
import zh_CN from 'vee-validate/dist/locale/zh_CN'

Vue.use(VeeValidate)

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

// 自定义校验规则:用户必须同意协议
VeeValidate.Validator.extend('tongyi', {
    validate: value => value,
    getMessage: field => field + '必须同意'
})

使用: 在注册页面补充表单验证的逻辑

### Register.index.vue

<div class="content">
	<label>手机号:</label>
	<input type="text" placeholder="手机号" v-model="phone" name="phone"
	<!--v-validate传入配置项required和'正则'-->       <!--配置错误消息提示-->
	v-validate="{ required:true,regex:/^1\d{10}$/ }" :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="code" name="code"
	<!--逻辑同上,只不过正则匹配不同-->
	v-validate="{ required:true,regex:/^\d{6}$/ }" :class="{ invalid:errors.has('code') }">
	<span class="error-msg">{{ errors.first("code") }}</span>
	<button style="width: 100px;height: 38px;" @click="getCode">获取验证码</button>
  </div>
  <div class="content">
	<label>登录密码:</label>
	<input placeholder="请输入你的密码" v-model="password" name="password" type="password"
			<!--正则:允许8~20位数字+密码-->
		   v-validate="{ required: true, regex: /^[0-9A-Za-z]{8,20}$/ }"
		   :class="{ invalid: errors.has('password') }"/>
	<span class="error-msg">{{ errors.first("password") }}</span>
  </div>
  <div class="content">
	<label>确认密码:</label>
	<!--保证和password一致即可-->
	<input placeholder="请再次输入你的密码" v-model="password1" name="password1" type="password"
		   v-validate="{ required: true, is: password}" :class="{ invalid: errors.has('password1') }"/>
	<span class="error-msg">{{ errors.first("password1") }}</span>
  </div>

  <div class="controls">
	<!--使用了'自定义校验'-->
	<input type="checkbox" v-model="agree" name="agree" v-validate="{ required: true, tongyi: true}"
		   :class="{ invalid: errors.has('agree') }"/>
	<span>同意协议并注册《尚品汇用户协议》</span>
	<span class="error-msg">{{ errors.first("agree") }}</span>
  </div>
  ......
  methods:{
	async getCode(){
		......
	},
	async userRegister(){
		// 确保所有的字段通过校验,再进行后续的逻辑
		const success = await this.$validator.validateAll()
		if(success){
			try{
				const {phone,code ,password,password1} = this;
				phone && code && password && password1 && (await this.$store.dispatch('userRegister',{phone,code,password}))
				this.$router.push('/login')
			}catch(error){
				alert(error.message)
			}
		}
	}
}

路由懒加载

引入场景

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就会更加高效

### router.routes.js
......
{
	path: "/home",
	// component: Home,
	// 访问该路由的时候,才加载该组件,节省性能的开销
	component: ()=>import('@/pages/Home'),
	meta: {
		show: true
	}
},

打包上线

命令如下:

- npm run build

项目打包后,代码都是经过压缩加密的,如果运行时报错,输出的错误信息无法准确得知是哪里的代码报错
有了map就可以像未加密的代码一样,准确输出哪一个行代码有错(该文件如果项目不需要,可以除去)

### vue.config.js配置
......
productionSourceMap:false

JZTXT

Vue2电商实战项目(七)收尾补充

表单验证: vee-validate插件

路由懒加载

打包上线

表单验证: `vee-validate`插件