小程序制作节点一：input文本框（1）

东之浩浩乎

已于 2022-02-18 18:44:29 修改

阅读量961

点赞数 2

文章标签：小程序 html css js

于 2022-02-18 18:41:29 首次发布

本文链接：https://blog.csdn.net/weixin_66193671/article/details/122495083

版权

input文本框第一个攻克的小节点是：判断用户输入的内容长度，合格出现正确提示，不合格出现错误提示。

具体要求是，在input输入框失焦时判断是否输入了内容，手机号输入框要输入足够11位数，否则出现错误。

这里input是原生组件，所以我用原生事件处理'bindbulr'，即输入框失去焦点时触发，基本代码如下：

WXML：

<view class="body-3">
    <view class="information">
        <text class="tittle buyerinformation">购买人信息</text>
        <view class="buyerName" vx:if="{{length > 10}}">
            <input class="buyerName1" type="text" value="" bindblur="ok1" placeholder="请输入姓名"/>
            <view class="yes" wx:if="{{isShowYes1}}">✔</view>
            <view class="no"wx:if="{{isShowNo1}}">✖</view>
        </view>
        <view class="buyerPhone">
            <input class="buyerPhone1" type="number" bindblur="ok2" placeholder="请输入手机号" maxlength="11" />
            <view class="yes" wx:if="{{isShowYes2}}">✔</view>
            <view class="no"wx:if="{{isShowNo2}}">✖</view>
        </view>
    </view>
</view>

WXSS：

.body-3 {
    height: 100%;
    padding: 66rpx 50rpx 64rpx 50rpx;
    border-bottom: 40rpx solid #ededed;
    font-size: 28rpx;
}
.buyerinformation {
    margin-bottom: 0rpx;
}
.buyerName {
    display: flex;
    align-items:flex-end;
    justify-content: space-between;
    height: 100rpx;
    font-weight: 600;
    border-bottom: 6rpx solid #8e731b;
}
.buyerPhone {
    display: flex;
    align-items:flex-end;
    justify-content: space-between;
    height: 100rpx;
    font-weight: 600;
    border-bottom: 6rpx solid #8e731b;
}
.buyerName {
    position: relative;
}
.buyerName1 {
    margin: 0 0 18rpx 16rpx;
}
.buyerPhone {
    position: relative;
}
.buyerPhone1 {
    margin: 0 0 18rpx 16rpx;
}
.yes {
    position: absolute;
    right: 0;
    margin-bottom:18rpx;
    color: #8e731b;
}
.no {
    margin-bottom:18rpx;
    color: red;
}

JS ：

Page({
  data: {
    isShowYes1: false,
    isShowNo1: false,
    isShowYes2: false,
    isShowNo2: false,
  },
  ok1(e) {
    let name = e.detail.value;
    if (name.length > 0) {
      this.setData({
        isShowYes1: true,
        isShowNo1:false
      })
      return false;
      }
    else if(name.length == 0) {
      this.setData({
        isShowNo1:true,
        isShowYes1:false
      })
      return false;
      }
  },
  ok2(e) {
    let name = e.detail.value;
    if (name.length == 11) {
      this.setData({
        isShowYes2: true,
        isShowNo2:false
      })
      return false;
      }
    else if(name.length !== 11) {
      this.setData({
        isShowNo2:true,
        isShowYes2:false
      })
      return false;
      }
  }
})

在JS 代码里 “OK”函数中“e.detail.value”这个属性是动态获取input的value值，可以在其下一行console.log输出一下name值验证。

这点玩意弄了半天才会，查了不少资料，灵感来源：input的bindblur事件验证问题 | 微信开放社区 (qq.com)

本人有点笨，希望大家不吝赐教。看到这篇文章就是缘分，可以点个赞支持下，谢谢。