内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

首页 > Vue >

elementUI的rules表单自定义验证validator方法如何传递其他更多参数

发布:2020-10-19 浏览: 评论(

用elementUI自带的rules验证form表单时,自定义验证方法validator中只能传递原来的三个参数(rule,value,callback),但有时我们需要传递更多参数用来做验证,而且rules验证方法也不是直接就写在当前页面,大多数是统一在一个公共的验证js文件里面写验证方法,这样就需要将当前页面的$refs.form对象传递到验证方法,比如在做验证两次输入密码是否一致时就遇到这个问题,解决问题的办法很简单,直接上代码:

data(){
		return {
			msgForm:{
				password:"",
				passwordOnce:'',
				passwordTwice:'',
			},
			rules:{
				passwordOnce:[{
					validator:(rule,value,callback)=>{
						this.$verify.passwordOnce(rule,value,callback,this.msgForm,this.$refs.userMsgForm)
					},
					trigger:"change"
				}],
				passwordTwice:[{
					validator:(rule,value,callback)=>{
						this.$verify.passwordTwice(rule,value,callback,this.msgForm,this.$refs.userMsgForm)
					},
					trigger:"change"
				}]
			}
		}
	}

其实就是将validator在当前页面写成function形式,再在这个function里面接收原来的参数以及加入自己想要的参数,这里的$verify是小编自己项目自定义的vue验证插件,改成你自己的就好了
ok,传参问题已经解决,没其他问题的同学可以关闭页面了,下面顺便解答下两次输入密码不一致验证如何来做,也是很多朋友问到的问题:


HTML部分:


	<el-form :model="msgForm" :rules="rules" label-width="150px" ref="userMsgForm">

	    <el-form-item label="密码" prop="passwordOnce">

	      <el-input auto-complete="new-password" clearable="" placeholder="请输入密码" type="password" v-model="msgForm.passwordOnce"></el-input>

	   </el-form-item>

	   <el-form-item label="确认密码" prop="passwordTwice">

	      <el-input auto-complete="new-password" clearable="" placeholder="请再次输入密码" type="password" v-model="msgForm.passwordTwice"></el-input>

	   </el-form-item>

	</el-form>

js部分:

//template页面部分:
export default {
	data(){
		return {
			msgForm:{
				password:"",
				passwordOnce:'',
				passwordTwice:'',
			},
			rules:{
				passwordOnce:[{
					validator:(rule,value,callback)=>{
						this.$verify.passwordOnce(value,callback,this.msgForm,this.$refs.userMsgForm)
					},
					trigger:"change"
				}],
				passwordTwice:[{
					validator:(rule,value,callback)=>{
						this.$verify.passwordTwice(value,callback,this.msgForm,this.$refs.userMsgForm)
					},
					trigger:"change"
				}]
			}
		}
	},
	props:['msgData'],
	mounted(){
		this.msgForm=JSON.parse(JSON.stringify(this.msgData));//避免双绑
		this.$set(this.msgForm,'passwordOnce',this.msgData.password);//未声明变量需要这样写才可编辑
		this.$set(this.msgForm,'passwordTwice',this.msgData.password)
	}
}

//验证js文件部分:
import Vue from 'vue'
const customValiate={
	install(Vue){
		Vue.prototype.$verify={
			passwordOnce:(value,callback,$msgForm,$userMsgForm)=>{
				if(value){
					value = value.trim();
					if(value.length < 6 || value.length > 20){
						return callback(new Error("请输入密码,6-20位"));
					}else if($msgForm.passwordTwice!=$msgForm.passwordOnce){
						$userMsgForm.validateField('passwordTwice')
					}else{
						return callback();
					}
				}else{
					return callback(new Error("请输入密码,6-20位"));
				}
				
				
			},
			passwordTwice:(value,callback,$msgForm,$userMsgForm)=>{
				if(value){
					value = value.trim();
					if(value.length < 6 || value.length > 20){
						return callback(new Error("请输入密码,6-20位"));
					}else if($msgForm.passwordTwice!=$msgForm.passwordOnce){
						return callback(new Error("两次输入密码不一致"));
					}else{
						return callback();
					}
				}else{
					return callback(new Error("请输入密码,6-20位"));
				}
			}
		}
	}
}
Vue.use(customValiate)

有了上面传参问题的解决,两个密码验证方法就能都拿到passwordOnce和passwordTwice的值,可以随时进行比较进行报错,还有一句很关键的代码:


$userMsgForm.validateField('passwordTwice')
这句代码意思是单个执行form的passwordTwice值的验证方法,这样做的好处就是不用两个密码输入框都是提示“两次输入密码不一致”,只在第二个输入框提示,使得提示简洁有条理。

还有一个问题就是在给form赋值回填的时候,如果是直接给form表对应的对象赋值this.msgForm=this.msgData;而请求回来的msgData对象中没有passwordOnce和passwordTwice两个参数的话会 导致报错undifined,并且如果直接给passwordOnce和passwordTwice赋值:

	this.msgForm.passwordOnce = this.msgData.password;
        this.msgForm.passwordTwice= this.msgData.password;

这样赋值会导致input输入框无法修改、输入、编辑,因为vue中挂载完还未声明的变量是没有getter/setter的,要这么写:

	this.$set(this.msgForm,'passwordOnce',this.msgData.password);
	this.$set(this.msgForm,'passwordTwice',this.msgData.password);

好了,传参、两次密码一致问题都解决了

前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2019 seozhijia.net 版权所有-粤ICP备13087626号-4