vue---表单验证

1. 安装vee-validate : npm i vee-validate --save

2. 创建表单验证插件 validate.js

//vee-validate插件：表单验证区
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}必须与密码相同`
    },
    attributes:{
        phone:'手机号',
        code:'验证码',
        password:'密码',
        password1:'确认密码',
        agree:'协议'
    }
})
//自定义校验规则
VeeValidate.Validator.extend('agree', {
    validate: (value) => {
        return value
    },
    getMessage: (field) => field + '必须同意'
})

3. 在main.js中引入表单验证插件

// 引入表单验证插件
import '@/plugins/validate'

 4.在组件中使用

<!--手机号-->
<div class="content">
  <label>手机号:</label>
  <input type="text" placeholder="请输入你的手机号" v-model="phone" name="phone"
    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="phone" name="code"
    v-validate="{required:true,regex:/^\d{6}$/}"
    :class="{invalid:errors.has('code')}"/>
  <span class="error-msg">{{ errors.first('code') }}</span>
</div>

<!--密码-->
<div class="content">
  <label>确认密码:</label>
  <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')}"/>
  <span class="error-msg">{{ errors.first('password') }}</span>
</div>

<!--确认密码-->
<div class="content">
  <label>确认密码:</label>
  <input type="password1" placeholder="请再次输入你的密码" v-model="password1" name="password"
    v-validate="{required:true,is:password}}"
    :class="{invalid:errors.has('password1')}"/>
  <span class="error-msg">{{ errors.first('password1') }}</span>
</div>

<!--协议-->
<div class="content">
  <label>协议:</label>
  <input type="checkbox" v-model="agree" name="agree"
    v-validate="{required:true,'agree':true}"
    :class="{invalid:errors.has('agree')}"/>
  <span class="error-msg">{{ errors.first('agree') }}</span>
</div>

5. 发请求

<script>
export default {
  methods: {
        //用户注册
        async userRegister() {
            const success = await this.$validator.validateAll()
            // console.log(success)
            //如果全部表单验证成功，在向服务器发送请求
            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);
                }
            }
   
     },
}
</script>