uni-app input 组件报Bug

开发环境	版本号	项目创建方式
Windows	Microsoft Windows [版本 10.0.18362.1016]	HBuilderX

示例代码：

<view style="height: 100%;">
    <view class="main-page" style="display: flex; flex-direction: column; justify-content: space-between; padding-bottom: 6%">
        <!-- 新版登陆 -->
        <view class="login-main" style="flex: 1;" v-show="showNewLogin">
            <view class="login-header">
                <view class="image">
                    <image mode="aspectFit" src="/static/images/logo.png" />
                </view>
                <view>
                    <text>{{i18n.login.welcome}}</text>
                </view>
            </view>
            <view style="padding: 8% 0 2% 0; font-weight: bold; font-size: 60rpx;">
                <text>{{i18n.login.header}}</text>
            </view>
            <view style="padding-bottom: 6%; text-align: right; color: blue;">
                <i class="fa fa-refresh baseFontColor" aria-hidden="true" style="margin-right: 10px;"></i>
                <text v-show="loginType === 1" @click="changeLoginType(2)">{{i18n.login.useEmail}}</text>
                <text v-show="loginType === 2" @click="changeLoginType(1)">{{i18n.login.usePhone}}</text>
            </view>
            <view class="item">
                <view class="content">
                    <!-- 账号 -->
                    <view v-show="loginType === 1" class="phonenumber">
                        <view @click="chooseAreaCode">
                            <text>{{ location }}</text>
                            <image src="/static/images/areaCodeSelection.png"></image>
                        </view>
                        <input v-model="phonenumber" type="number" :placeholder="i18n.login.enterPhoneNum" placeholder-style="color: #c7c7c7" @blur="autoRemoveZero"/>
                    </view>
                    <view v-show="loginType === 2" class="phonenumber">
                        <input v-model="phonenumber" :placeholder="i18n.login.enterEmail" placeholder-style="color: #c7c7c7" style="text-indent: 0rpx;" />
                    </view>
                    <!-- 验证码 -->
                    <view class="password">
                        <input :focus="getVcodeFocus" maxlength="6" v-model="corCode" type="number" :placeholder="i18n.forgot.enterCode" placeholder-style="color: #c7c7c7"/>
                        <button :disabled="corDisabled" @click="getVerificationCode" size="mini" type="primary">
                            <text>{{i18n.forgot.vcodeBtn}}</text>
                            <text v-show="showTimer">({{ timer }}s)</text>
                        </button>
                    </view>
                    <view class="button">
                        <button @click="loginByCode" type="primary">{{i18n.login.logInBtn}}</button>
                        <view class="other">
                            <text @click="changeLoginPage(false)">{{i18n.login.passwordLogin}}</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- 老版登陆 -->
        <view class="login-main" style="flex: 1;" v-show="!showNewLogin">
            <view class="login-header">
                <view class="image">
                    <image mode="aspectFit" src="/static/images/logo.png" />
                </view>
                <view>
                    <text>{{i18n.login.welcome}}</text>
                </view>
            </view>
            <view class="item">
                <view class="title" style="padding-bottom: 2%;">
                    <text>{{i18n.login.header}}</text>
                </view>
                <view style="padding-bottom: 6%; text-align: right; color: blue;">
                    <i class="fa fa-refresh baseFontColor" aria-hidden="true" style="margin-right: 10px;"></i>
                    <text v-show="loginType === 1" @click="changeLoginType(2)">{{i18n.login.useEmail}}</text>
                    <text v-show="loginType === 2" @click="changeLoginType(1)">{{i18n.login.usePhone}}</text>
                </view>
                <view class="content">
                    <view v-show="loginType === 1" class="phonenumber">
                        <view @click="chooseAreaCode">
                            <text>{{ location }}</text>
                            <image src="/static/images/areaCodeSelection.png"></image>
                        </view>
                        <input v-model="phonenumber" type="number" :placeholder="i18n.login.enterPhoneNum" placeholder-style="color: #c7c7c7" @blur="autoRemoveZero"/>
                    </view>
                    <view v-show="loginType === 2" class="phonenumber">
                        <input v-model="phonenumber" type="email" :placeholder="i18n.login.enterEmail" placeholder-style="color: #c7c7c7" style="text-indent: 0rpx;" />
                    </view>
                    <view class="password">
                        <input @confirm="loginApp" v-model="password" :password="!showPwd" :placeholder="i18n.login.enterPassword" placeholder-style="color: #c7c7c7"/>
                        <i @click="showPassword" v-show="!showPwd" class="fa fa-eye-slash" style="font-size: 20px;" aria-hidden="true"></i>
                        <i @click="hidePassword" v-show="showPwd" class="fa fa-eye" style="font-size: 20px;" aria-hidden="true"></i>
                    </view>
                    <view style="padding-top: 2%;" v-show="showMsg">
                        <text style="color: red;">* {{ showMsgText }}</text>
                    </view>
                </view>
                <view class="button">
                    <button @click="loginApp" type="primary">{{i18n.login.logInBtn}}</button>
                    <view class="other">
                        <text @click="changeLoginPage(true)">{{i18n.login.codeLogin}}</text>
                        <view>
                            <text @click="register">{{i18n.common.register}}</text>
                            <text style="padding: 0 2px;">|</text>
                            <text @click="forgotPwd">{{i18n.login.forgotPwd}}?</text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <view style="display: flex; justify-content: center;">
            <a style="border-bottom: 1px solid #c7c7c7; color: #c7c7c7; text-decoration: none; font-size: 24rpx;" href="mailto:service@roamwifi.com">{{i18n.login.contactUs}}: service@roamwifi.com</a>
        </view>
    </view>
    <cus-popup ref="loginPopup"></cus-popup>
</view>

操作步骤：

点击登陆页面的邮箱登陆切换到邮箱账号登陆，在第一行文本框中输入邮箱地址，输入“12345678910”还没有问题，等我输入"@"就会出现"The specified value “12345678910@” cannot be parsed, or is out of range. at view.umd.min.js:6"这句话，输入完完整的邮箱地址后会出现“The specified value “12345678910@163.com” cannot be parsed, or is out of range. at view.umd.min.js:6”，如果我点击了第二行文本框的获取验证码，会出现一直打印这句话“The specified value “12345678910@163.com” cannot be parsed, or is out of range. at view.umd.min.js:6”。

预期结果：

控制台不应该出现“The specified value “12345678910@163.com” cannot be parsed, or is out of range. at view.umd.min.js:6”这句话。

实际结果：

频繁出现这句话“The specified value “12345678910@163.com” cannot be parsed, or is out of range. at view.umd.min.js:6”。

bug描述：

今天在调试使用邮箱登陆时输入邮箱地址，发现hbuilderx一直在打印这句话“The specified value “12345678910@163.com” cannot be parsed, or is out of range. at view.umd.min.js:6”，其中下图的登陆页面对应的代码是新版登陆的代码。

更多关于uni-app input 组件报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

gougou168 1楼

<input v-model=“phonenumber” type=“number” :placeholder=“i18n.login.enterPhoneNum” placeholder-style=“color: #c7c7c7” @blur=“autoRemoveZero”/>
type="number"改为 type=“text”

更多关于uni-app input 组件报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

htzhanglong 2楼

新版登陆哪里，有两个input用来接收输入的账号，上边哪个带着type=“number”的input是用来接收电话号码输入的文本框，紧接着下边还有个input，没有设置任何type，输入电子邮箱地址就会出现这个问题，我重新编译后也会这样子，但是我如果运行到内置浏览器上再次测试就不会出现这个问题。

htzhanglong 3楼

这两个input我是用loginType来控制那个显示的，一个上边的input用来接收电话号码，下边那个用来接收电子邮箱，只是两个账号都放到一个变量里了

phonegap100 4楼作者

回复 1***@qq.com: 不建议共用一个变量。

zlyuanteng 5楼

新版的邮箱输入框是因为什么原因而不再设置type为email呢？设置type为email试过吗？还有为啥两个账号要用一个变量啊？

eggper 6楼

设置过type=email，还是同样的效果，用一个变量是因为这两个都属于账号，用手机号登陆就不能用邮箱登陆，用邮箱登陆就不能用手机号登陆，存到一个变量里没有问题的，这个在3.1.22之前没有遇见过这个问题，自从为了解决uni-app在ios 14.6版本上键盘延迟出现的问题才升级到3.1.22的hbuilderx，升级之后才出现这额问题的

eggper 7楼

我刚才又拿了ios 14.6、华为的android机、华为的鸿蒙机进行了测试，发现只在小米 miui 12.5.4上出现了这个问题，其他机子没有出现这个问题

vueper 8楼

刚刚又试了其他型号的小米手机，同样的问题，也是报这个错误

yibo5220 9楼

HarmonyOS2：未出现该问题 IOS 14.6：未出现该问题红米 miui 12.5.4：出现该问题小米 miui 12.5.5：出现该问题 mumu模拟器 android 6.0.1：未出现该问题

ionicwang 10楼

这个错误是由于在邮箱登录模式下，input组件设置了type="number"导致的。当输入包含"@"符号的邮箱地址时，number类型的输入框无法解析非数字字符，因此触发了浏览器的值解析错误。

在你的代码中，新版登录部分的邮箱输入框存在两个问题：

邮箱输入框缺少type属性声明（应该设置为type="text"或type="email"）
实际上在代码审查中发现，新版登录的邮箱输入框没有明确设置type，但可能继承了某些默认行为

解决方案：

将新版登录部分的邮箱输入框修改为：

<input v-model="phonenumber" type="email" :placeholder="i18n.login.enterEmail" placeholder-style="color: #c7c7c7" style="text-indent: 0rpx;" />