uniapp如何进行手机验证并实现输入第一个字时下方按钮开始变样式

运行结果

运行代码

<template>
    <view class="qqq">
        <view class="aa">
            <view>+86</view>
            <view class="hr"></view>
            <input type="number" v-model="usertel" placeholder="请输入" @input="onInputChange">
        </view>
        <button @click="login()" :style="buttonStyle">下一步</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                inputValue: '', 
                usertel:"",
                buttonStyle: { // 按钮的样式
                        backgroundColor: '#BABEC4',
                     },
                     
                rules:{
                    usertel:{
                        rule:/^1[23456789]\d{9}$/,    //正则表达式
                        mag:'请输入11号手机号'
                    }
                    
                }
            }
        },
        methods: {
            onInputChange(event) {
                  this.inputValue = event.target.value; // 获取输入框的值
            
                  if (!this.inputValue || isNaN(this.inputValue)) {
                    // 如果输入框的值为空或者非数字，将按钮的样式设置为原来的样式
                    this.buttonStyle = {
                      backgroundColor: '#BABEC4',
                      color: 'white'
                    };
                  } else {
                    // 如果输入框的值为数字，则将按钮的样式修改为变色的样式
                    this.buttonStyle = {
                      backgroundColor: '#55aaff',
                      color: 'white'
                    };
                  }
                },

            login(){
                if(!this.validate('usertel')) return;   
                uni.navigateTo({
                    url:'/pages/index/yishenpi'
                })
            },
            validate(key){
                let bool=true;       //赋值
                if(!this.rules[key].rule.test(this[key])){     //判断验证是否符合要求，合法性校验

                    uni.showToast({  //提示信息
                        title:this.rules[key].mag,
                    });
                    bool=false;     //取反
                    return false;
                }
                return bool;
            }
        }
    }
</script>

<style>
    .qqq{
        width: 750rpx;
        height: 1624rpx;
        background: #ffaa7f;
    }
.aa{
    display: flex;
    align-items: center;
    padding:22rpx ;
    box-sizing: border-box;
    width: 688rpx;
    height: 88rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    border: 2rpx solid #DEE1E3;
    overflow: hidden;
}
.hr{
    width: 2rpx;
    height: 46rpx;
    border: 2rpx solid #DEE0E3;
    background: #ffaa7f;
    margin:0 23rpx;
}
button{
    margin: 0;
    width: 688rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 88rpx;
    border-radius: 12rpx;
}
</style>