uni-app中对输入框的判断与提示（密码格式为6-12位，必须有大小写字母和数字组成）

如图：

 

 

 vue

<view class="input-item">
                    <view class="old">
                        <view class="icon">
                            <image src="../../static/icons/new-password.png" mode=""></image>
                        </view>
                        <view class="input">
                            <input type="password" v-if="isShow2" :placeholder="i18n.newPassword" placeholder-style="color:#c2c2c2" data-type="0"
                             @blur="hideNewPass" :value="newPassword" maxlength="16" />
                            <input type="text" v-else :placeholder="i18n.newPassword" placeholder-style="color:#c2c2c2" data-type="0" @blur="newPass"
                             :value="newPassword" maxlength="16" />
                        </view>
                        <view class="see">
                            <image :src="isShow2?'../../static/icons/not-show.png':'../../static/icons/show-words.png'" @tap="showNewPsd"
                             mode="aspectFit" style="40rpx;height:40rpx"></image>
                        </view>
                    </view>
                    <!-- 错误提示 -->
                    <view class="error" v-if="errorTips==1">
                        <text class="error-icon">!</text>
                        <text class="error-text">{{i18n.newPasswordTips}}</text>
                    </view>
                </view>

data() {
            return {

                isShow2: true,
                inputType2: "password",
                newPassword: "",
                
                errorTips: 0,
                
            };
        },

methods: {

            //输入新密码
            newPass(e) {
                this.newPassword = e.detail.value;
                
                // 密码格式为6-12位，必须有大小写字母和数字组成 
                var newPass = this.newPassword;
                var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;

                if (!reg.test(newPass) || newPass.length < 6 || newPass.length > 12) {
                    this.setData({
                        errorTips: 1,
                        // newPassword: "",
                    })
                    // this.newPassword = ""
                } else {
                    this.setData({
                        errorTips: 0,
                        // newPassword: newPass,
                    })
                    // this.newPassword = newPass
                    // 赋值为空失败
                }
                // this.$apply();
            },
            
            //输入新密码
            hideNewPass(e) {
                this.newPassword = e.detail.value;
                var newPass = this.newPassword;
                var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,12}$/;
                
                if (!reg.test(newPass) || newPass.length < 6 || newPass.length > 12) {
                    this.setData({
                        errorTips: 1,
                    })
                    // this.newPassword = ""
                } else {
                    this.setData({
                        errorTips: 0,
                        // newPassword: newPass,
                    })
                    // this.newPassword = newPass
                }
                // this.$apply();
            },
            // 点击小眼睛图标切换
            showNewPsd() {
                if (this.isShow2) {
                    this.isShow2 = false;
                    this.inputType2 = "text";
                    // this.$apply();
                } else {
                    this.isShow2 = true;
                    this.inputType2 = "password";
                    // this.$apply();
                }
            },
            }

css

/* 错误提示区 */
.error{
    font-size: 28rpx;
    padding-left: 40rpx;
    padding-top: 10rpx;
}
.error .error-icon{
    display: inline-block;
     30rpx;
    height: 30rpx;
    line-height: 30rpx;
    text-align: center;
    border-radius: 20rpx;
    background-color: #fe3535;
    color: #FFFFFF;
    margin-right: 20rpx;
}
.error .error-text{
    color: #E43130;
}