vue+elementUI完整登陆表单验证点击按钮触发

1.基本逻辑

elementUI表单触发方式有两种:blur和change.但是在正常的一个登录界面校验逻辑(参考百度注册校验),在没有输入内容的情况下,光标移入和移除,是不会触发必填校验.在点击登陆按钮的时候,触发必填校验.在输入框有输入内容的时候,光标移除触发正常的校验.

2.代码

这是一个确认投资dialog.包含支付密码输入,图形验证码输入和一个单选框.详细的样式和方法就不写了

<template>
	<div>
		<el-form :model="buyConfirmData" :rules="rules" ref="buyConfirmData">
			<div>
			   <el-form-item 
			   		prop="payPassword"
			   		>
			       <span>支付密码 : &nbsp;</span>
			       <el-input 
			       		@focus="commonFocus('buyConfirmData','payPassword')" 
			       		@blur="commonBlur('buyConfirmData',buyConfirmData.payPassword,'payPassword','isStatus')" 
			       		show-password 
			       		placeholder="请输入支付密码" 
			       		v-model="buyConfirmData.payPassword" 
			       		clearable
			       		>
		       		</el-input>
		           <router-link 
		           		target="_blank" 
		           		:to="{ path: '',query:{}}"
		           		>
		           		找回支付密码
	           		</router-link>                    
		        </el-form-item>
		        <el-form-item 
			        prop="countResult">                                 
		            <span>计算答案 : &nbsp;</span>
		            <el-input  
	            		@focus="commonFocus('buyConfirmData','countResult')" 
	            		@blur="commonBlur('buyConfirmData',buyConfirmData.countResult,'countResult','isStatus')" 
	            		placeholder="计算结果" 
	            		v-model="buyConfirmData.countResult" 
	            		clearable
	            		>
            		</el-input>
		           	<div>
		                <el-image></el-image>
		            </div>
		        </el-form-item>
		    </div>
		</el-form>
		<div>
			<el-checkbox v-model="checked">我已阅读并同意</el-checkbox>
		</div>
		<div>{{errorText}}</div>
		<el-button 
			type="primary" 
			size="mini"
			@click="imSure('buyConfirmData','isStatus')"
			>
			确认投资
		</el-button>
	</div>
</template>
<script>
export default {
	data(){
		var validatePassword = (rule, value, callback) =>{
			if (this.comStatus.payPassword||this.isStatus) {
				if(value){
					var reg=/^\d{6}$/; 
					if (!reg.test(value)) {
						callback(new Error('请输入6位数字支付密码'));
					} else {
    					callback()
					}
				}else{
					callback(new Error('支付密码不能为空'));
				}          
			}else{
				callback()
			}        
		};
        var validateCountResult = (rule, value, callback) =>{
            if (this.comStatus.payPassword||this.isStatus) {
                if(value){
                    callback()
                }else{
                    callback(new Error('计算结果不能为空'));
                }          
            }else{
                callback()
            }        
        };
		return{
			buyConfirmData:{
	            payPassword:'',
	            countResult:'',
	        },
	        rules:{
	            payPassword:[
	                {validator: validatePassword, trigger: 'blur' },
	            ],
	            countResult:[
	                {validator: validateCountResult,trigger:'blur'},
	            ],
	        },
	        checked: false,//单选框是否选中
	        errorText:'',//单选框错误提示 
	        isStatus:false,
            comStatus:{
                payPassword: false,
                countResult:false
            }, 
		};
	},
	methods: {
		// 光标移入时
		commonFocus(formName,name){//form名、当前值的名
           this.comStatus[name]=false;
           this.$refs[formName].clearValidate(name);
        },
        // 光标移除时
        commonBlur(formName,value,name,curValue){//form名、当前值、当前值的名、提交验证名
           this[curValue]=false;
           if(value!=''){
               this.comStatus[name]=true;
           }
        },
        // dialog的确认投资按钮
       	imSure(buyConfirmData,status) {
           this[status] = true;
           this.$refs[buyConfirmData].validate( (valid)=>{
               // 如果单选框没有选中
               if(!this.checked){
                   this.errorText = "请勾选我已阅读并同意条款";
                   return false;
               }else{
                   this.$confirm('确认投资？')
               　　.then(_ => {
                       //调用 认购订单确认 接口
                       //this.buyConfirm();
                       this.errorText = '';
                   })
                   .catch(_ => { });                     
               }                 
           }                      
       )},
	},
}
</script>

3.详解:

在自定义验证中,这两个值有一个为true时,就触发校验.否则就不触发.
comStatus为控制光标移入移出.isStatus为控制是否点击提交按钮

if (this.comStatus.payPassword||this.isStatus) {

光标移入时 默认 this.comStatus[name]=false; 当前移入的为false.并移除校验

commonFocus(formName,name){//form名、当前值的名
    this.comStatus[name]=false;
    this.$refs[formName].clearValidate(name);// 移入时,移除上一次的校验
},

在光标移出的时候判断:
1,因为没有点击提交按钮,所以 this[curValue]=false;
2,如果表单里有值不为空,那么就让this.comStatus[name]=true; 触发校验

commonBlur(formName,value,name,curValue){//form名、当前值、当前值的名、提交验证名
   this[curValue]=false;
    if(value!=''){
        this.comStatus[name]=true;
    }
},

点击提交按钮时,this[status] = true; 当comStatus为true时,校验所有表单.
单选框就不说了吧,比较简单.单独写的校验和显示方式

imSure(buyConfirmData,status) {
  this[status] = true;
  this.$refs[buyConfirmData].validate( (valid)=>{
      // 如果单选框没有选中
      if(!this.checked){
          this.errorText = "请勾选我已阅读并同意条款";
          return false;
      }else{
          this.$confirm('确认投资？')
      　　.then(_ => {
              //调用 认购订单确认 接口
              //this.buyConfirm();
              this.errorText = '';
          })
          .catch(_ => { });                     
		}  
	}                      
)}, 

就这样.有问题可以评论.