运行结果
运行代码
<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>