本文主要是介绍实现登录页面同意隐私协议登录功能,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
使用组件: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的值为falsecheckoutSecret:false,//表单数据中checkoutSecret的值为falsemodelForm:{checkoutSecret:false},//定义表单验证规则rules:{checkoutSecret:[{required:true,message:'请勾选隐私协议',trigger:'change'}]}}}
}
在登录函数触发时进行验证:
submitLogin() {this.modelForm.checkoutSecret = !this.modelForm.checkoutSecret ? null : this.modelForm.checkoutSecret//validate:对整个表单进行校验的方法,参数为一个回调函数。该回调函数会在校验结束后被调用,并传入两个参数:是否校验成功和未通过校验的字段。若不传入回调函数,则会返回一个 promisethis.$refs.ruleForm.validate((v) => {console.log(v);}); //勾选用户隐私政策if (!this.modelForm.checkoutSecret) {return false;}
实现效果:
这篇关于实现登录页面同意隐私协议登录功能的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!