友好的切换按钮可用与不可用状态的一种方法

写在前面

在日常开发过程中少不了对表单的操作，而表单的使用少不了对按钮控制，如何有效有简洁的控制按钮呢？我来分享一下，最近学到的一个个人觉得很好用的方法。

方案实施

需要控制按钮可用与不可用通常用在需要填写信息的表单中，接下来以注册账号为例。
html：

<template>  
 <div class="hello">  
    <van-nav-bar title="开户申请" :left-arrow="true" class="header"/>  
  
    <div class="openAccount">  
        <van-cell-group class="cellGroup">  
            <van-field v-model="aName" label="姓名" placeholder="请输入与银行账户名一致的姓名" clearable\></van-field>  
            <van-field v-model="idNum" label="身份证号" placeholder="请输入完整有效的身份证号码" clearable @blur="checkIdNum()" :error-message="errIdMsg"\></van-field>  
            <van-field v-model="bankAccount" label="银行账号" placeholder="请输入有效的银行账户" type="number" maxlength="19" clearable @blur="checkBankAccount()" :error-message="errBankMsg"\></van-field>  
            <van-field v-model="phone" type="tel" label="手机号" placeholder="请输入11位有效手机号码" clearable @blur="checkPhone()" :error-message="errPhoneMsg"\></van-field>  
        </van-cell-group>  
        <div class="accountBtn">  
            <van-button class="span" :disabled="isDisabled" @click="submitApplication"\>提交申请</van-button>  
        </div> 
     </div> 
   </div>
 </template>

script:

import {Button, Field, CellGroup, NavBar, Toast} from 'vant'  
  
export default {  
    name: 'HelloWorld',  
    components: {
        [Button.name]: Button,  
        [Field.name]: Field,  
        [CellGroup.name]: CellGroup,  
        [NavBar.name]: NavBar,  
        [Toast.name]: Toast  
    },  
    data() {  
        return {  
            aName: '',  
            phone: '',  
            errPhoneMsg: '',  
            idNum: '',  
            errIdMsg: '',  
            bankAccount: '',  
            errBankMsg: ''
         }  
    },  
    computed: {  
        isDisabled() {  
            let flag = true;  
            if (!this.aName || !this.checkPhone(true) || !this.checkIdNum(true) || !this.checkBankAccount(true)) {  
                flag = true  
            } else {  
                flag = false  
            }  
            return flag  
        },  
  },  
  methods: {  
        checkPhone(isTrue) {  
            console.log(isTrue)  
            let flag = false;  
            const reg = /^\[1\]\[3,4,5,6,7,8,9\]\[0-9\]{9}$/;  
            if (this.phone === "") {  
                this.errPhoneMsg = "手机号不能为空"  
                !isTrue;  
            } else if (!reg.test(this.phone)) {  
                this.errPhoneMsg = "手机号码格式不正确"  
                !isTrue;  
            } else {  
                this.errPhoneMsg = '';  
                isTrue;  
                flag = true;  
            }  
            return flag  
        },  
        checkIdNum(isTrue) {  
            let flag = false;  
            if (this.idNum === '') {  
                this.errIdMsg = '请输入身份证号！';  
                !isTrue;  
            } else {  
                this.errIdMsg = '';  
                isTrue;  
                flag = true  
            }  
            return flag;  
        },  
        checkBankAccount(isTrue) {  
            let flag = false;  
            if (this.bankAccount === '') {  
                this.errBankMsg = '请输入银行卡号';  
                !isTrue;  
            } else {  
                this.errBankMsg = '';  
                isTrue;  
                flag = true;  
            }  
            return flag  
        },  
        submitApplication() {}  
    },  
}

实现效果如下：

只有当表单所有项都正确添加完成后，提交按钮才会变为可用，其余时间，都将处于不可用状态。
实现原理：借助computed计算属性监听特性，根据值的变更状态进行实时变化。

这里还有一点需要注意：在标签页中写的是 @blur="checkPhone()"，与之对应的是js中 checkPhone(isTrue){...};也可以换种写法写成 @blur=checkPhone，那么js中对应的就是 checkPhone(e, isTrue)。
事件绑定中，加与不加括号的区别在于事件对象参数event的处理。不加括号时，函数的第一个参数默认为event；加了括号需要手动传入$event才能获得事件对象。
所以如果采用加括号的写法，那么method里面的事件应该有添加两个参数，对应的js代码应该改成以下形式

computed:{
    isDisabled(){
    let flag = true;
        if(!this.checkPhone(e,true) || !this.checkIdNum(e, true) || !this.checkBankAccount(true)){
            flag = true;
        }else {
            falg = false;
        }
        return flag;
    }
},
method: {
    checkPhone(e, isTrue){
        // 第一个参数对应的就是$event事件，第二个参数才是我们想要的布尔值
        // ...
    }
}