[Vue2]实现登录页面同意隐私协议登录功能

使用组件:elementUI中的checkbox

html部分:

<el-form :model="modelForm" :rules="rules" ref="ruleForm">
          <el-form-item prop="checkoutSecret">
            <el-checkbox v-model="modelForm.checkoutSecret" name="checkoutSecret">已阅读并同意<a class="abc" @click="clickButton">《用户隐私政策》</a></el-checkbox>
          </el-form-item>
</el-form>

css部分:

.el-checkbox__inner{
    //将checkbox的边框变圆
    border-radius: 50%;
    }
.abc{
    color:blue;
}

data声明部分:

export default{
  data(){
    return{
      //定义checkoutSecret的值为false
      checkoutSecret:false,
      //表单数据中checkoutSecret的值为false
      modelForm:{checkoutSecret:false},
      //定义表单验证规则
      rules:{
        checkoutSecret:[{
          required:true,
          message:'请勾选隐私协议',
          trigger:'change'
        }]
      }
    }
  }
}

在登录函数触发时进行验证:

submitLogin() {
      this.modelForm.checkoutSecret = !this.modelForm.checkoutSecret ? null : this.modelForm.checkoutSecret
      //validate:对整个表单进行校验的方法，参数为一个回调函数。该回调函数会在校验结束后被调用，并传入两个参数：是否校验成功和未通过校验的字段。若不传入回调函数，则会返回一个 promise
      this.$refs.ruleForm.validate((v) => {
        console.log(v);
      });     
      //勾选用户隐私政策
      if (!this.modelForm.checkoutSecret) {
        return false;
      }

实现效果: