vue3+setup+validator验证两次输入密码是否一致（土法）

数据源：

const regForm = ref({name: '',email: '',password: '',passwordCheck: ''
})

定义两个validator验证规则：

这里的第一个，也就是validatepass2的if在vue2中可以是：

if (this.regForm.passwordcheck !== '') {this.$refs.regForm.validateField('passwordcheck');}

但是在vue3改this.$refs很麻烦，所以直接按以下这样写了：

const validatePass2 = () => {return (rule, value, callback) => {if (value !== regForm.value.password && regForm.value.password !== '') {callback(new Error('两次输入密码不一致!'))} else {callback()}}
}
const validatePass1 = () => {return (rule, value, callback) => {if (value !== regForm.value.passwordCheck &&regForm.value.passwordCheck !== '') {callback(new Error('两次输入密码不一致!'))} else {callback()}}
}

用的时候：

password: [{min: 6,max: 16,message: '密码长度在 6 到 16 个字符',trigger: 'blur'},{ validator: validatePass1(), trigger: 'blur'}],passwordCheck: [{trigger: 'blur',message: '请确认密码'},{ min: 6, max: 16, message: '密码长度在 6 到 16 个字符', trigger: 'blur' },{trigger: 'blur',validator: validatePass2()}]

有个坑，把validatePass1和2抽离出来到rules.js，再导入会报错regForm undifined或者regForm的.vale读取不到，放到一个文件才生效，原因暂时不知道。

vue3+setup+validator验证两次输入密码是否一致（土法）相关推荐

js验证两次输入密码一致
一 html代码 <div class="zhuce_body"><div class="zhuce_kong"><div cla ...
vue 表单验证两次密码是否一致
template: <template><div class="logon_home"><div class="logon_bg" ...
vue表单验证rules以及validator验证器的使用
为防止用户犯错,尽可能更早地发现并纠正错误. Element中Form (表单)组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设 ...
Struts Validator验证器使用指南
作者: David Winterfeldt大卫 James Turner詹姆斯 Rob Leland罗伯特翻译: 侯思超验证器: 从0.5版,验证器在一些form中就已经实现了,他最初包含在开发人 ...
laravel的validator验证
1.引入对应的类 use Illuminate\Support\Facades\Validator; 2.自定义规则,写在模型,控制器,中间件都可以 $rules = ['password' => ...
jquery. Validator验证框架ajax返回json数据
今天在使用jquery. Validator验证框架的过程中遇到了一个这个的问题: 我需要动态的去验证注册邮箱是否已经存在了,所以需要用到ajax请求来解决该问题.但在使用该验证框架的ajax异步请求 ...
vue3.2+ 滑动验证组件，pc/手机通用，即插即用
vue3.2+ 滑动验证组件,pc/手机通用,即插即用一.前言二.成果展示三.组件使用四.vue3.2+ 滑动验证组件源码五.最后,点个赞一.前言 vue已经更新到3.2+,使用了scr ...
Vue3 setup的使用
setup 的执行时机比beforeCreate还要早并且setup里面的this是undefined beforeCreate(){console.log('---beforeCreate---' ...
Vue3 setup语法糖勾子函数使用简易教程（上）
Vue3 setup语法糖勾子函数使用简易教程(上) 前几天一个月薪35k的兄弟,给我推了一个人工智能学习网站,看了一段时间挺有意思的.包括语音识别.机器翻译等从基础到实战都有,很详细,分享给大家. ...

vue3+setup+validator验证两次输入密码是否一致（土法）

数据源：

定义两个validator验证规则：

vue3+setup+validator验证两次输入密码是否一致（土法）相关推荐

最新文章

热门文章