uniapp input只输入一个字符就自动失去焦点

下面一段代码在每次输入后自动失去焦点,这是因为绑定的:key是动态的,输入改变后都需要重新刷新渲染,这是造成input只能输入一次就自动失去焦点的原因。

<view class="" v-for="(item, index) in phoneList" :key="item.phone">
  <uni-forms-item  label="手机号">
    <view class="" style="display: flex;">
      <view class="" style="flex: 1;">
        <input type="text" placeholder="请输入手机号" v-model="item.phone" />
      </view>
    </view>
  </uni-forms-item>
</view>

解决方法:
可以使用index作为key绑定或者如果item有id的话用item的id绑定即可解决

### 实现身份证号码的输入验证和格式化 #### 使用 WxValidate 类进行身份证号验证 为了确保用户输入有效的身份证号码,在 UniApp 中可以利用 `WxValidate` 进行验证。通过设置特定规则来检查输入字符串是否符合中国公民身份号码的标准[^1]。 ```javascript // 创建 WxValidate 验证对象并配置身份证校验规则 import WxValidate from '@/utils/WxValidate.js' const validate = new WxValidate({ idCard: { rules: [ { required: true, message: '请输入身份证号码' }, { pattern: /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/, message: '身份证号码不合法'} ] } }, {}) ``` 此代码片段展示了如何定义一个名为 `idCard` 的字段及其对应的两条验证规则:一是必填项;二是模式匹配,用来确认输入的是有效长度为 15 或者 18 位数字符合规定格式的身份证明编号。 #### 自动格式化显示身份证号码 除了基本的有效性检验外,还可以进一步优化用户体验——当用户完成输入后即时按照标准格式展示身份证号码: ```html <template> <!-- 绑定 v-model 到 data 属性 --> <input type="text" placeholder="请输入您的身份证号码..." :value="formattedIdNumber" @blur="handleBlur"/> </template> <script> export default { data() { return { rawIdNumber: '' }; }, computed: { formattedIdNumber(){ let value = this.rawIdNumber; // 如果是18位,则隐藏中间四位作为保护隐私措施 if (value.length === 18){ return `${value.slice(0,6)} **** ${value.slice(-4)}`; }else{ return value; } } }, methods:{ handleBlur(event){ const inputValue = event.detail.value.trim(); this.rawIdNumber = inputValue; // 此处可调用之前提到过的 WxValidate 方法来进行合法性判断... } } } </script> ``` 上述模板实现了两个主要功能:其一是在失去焦点时保存原始输入值至 `rawIdNumber`; 其二则是计算属性 `formattedIdNumber`, 它会依据实际需求决定要不要遮掩部分数字以保障个人信息安全。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值