常见输入框的验证及点击清空输入框

青旅半醒 2022-02-14 04:53 644阅读 0赞

# 效果图 #

![在这里插入图片描述][20190425193835157.png]  
input框内输入内容后显示删除图标，并实现点击图标清空input内容  
![在这里插入图片描述][20190425193949494.png]

# 代码 #

<template>
    	<view class="info-main">
            <view class="info-item">
              <view class="item-title">车牌种类</view>
              <view @click="toCarType" class="content">
                <input
                  :value="optionText"
                  type="text"
                  disabled
                  placeholder="请选择车牌种类"
                  placeholder-class="placeholder-class"
                >
                <image
                  class='arrow-right'
                  mode='widthFix'
                  src='/static/image/arrow_right_grey.png'
                ></image>
              </view>
            </view>
    
            <view class="info-item">
              <view class="item-title">车牌号码</view>
              <view class="content">
                <view @click="choosePro">
                  <text>{
       {proName}}</text>
                  <image
                    class='arrow-down'
                    src="/static/image/rectangle%20@2x.png"
                  ></image>
                </view>
    
                <input
                  class='input-class'
                  v-model="vehicle"
                  @input="checkUpcase"
                  type="text"
                  maxlength="7"
                  placeholder="请输入车牌号码"
                  placeholder-class="placeholder-class"
                >
                <image
                  v-if="vehicle"
                  @click="clearInput('vehicle')"
                  mode='widthFix'
                  class="clear"
                  src="/static/image/icon_close@3x.png"
                ></image>
              </view>
            </view>
    
            <view class="info-item">
              <view class="item-title">联系电话</view>
              <view class="content">
                <input
                  v-model="phone"
                  @input="phone = onlyNo(phone)"
                  maxlength="11"
                  :disabled="onlyRead"
                  type="number"
                  placeholder="请输入手机号码"
                  placeholder-class="placeholder-class"
                >
    
                <image
                  v-if="phone"
                  @click="clearInput('phone')"
                  class="clear"
                  mode='widthFix'
                  src="/static/image/icon_close@3x.png"
                ></image>
              </view>
            </view>
          </view>
    </template>

没有贴完整代码，思路在下面

# 重点 #

根据v-if判断input内容是否为空，不为空时显示删除图标

clearInput(val) {
        
          console.log("clearIn");
          this[val] = "";
        },

点击删除图标执行clearInput函数，清空input中内容

# 常见input内容验证 #

validate() {
        
          let self = this;
          
          let plateNumRegNewEng = /^([A-Z]{1}(([0-9]{5}[DF])|([DF]([A-HJ-NP-Z0-9])[0-9]{4})))/;
          let plateNumReg = /^([A-Z]{1}[A-HJ-NP-Z0-9]{4}[A-HJ-NP-Z0-9挂学警港澳]{1})$/;
          console.log(
            self.vehicle.length == 7 && !plateNumRegNewEng.test(self.vehicle),
            self.vehicle.length == 6 && !plateNumReg.test(self.vehicle)
          );
          
          let cellPhoneReg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/;
          
          if (
            self.optionText === "" ||
            self.optionText === undefined ||
            self.optionText === null
          ) {
        
            uni.showToast({
        
              title: "请选择号牌种类",
              icon: "none",
              duration: 2000,
              mask: true
            });
    
            return false;
          }
          //车牌号码
          if (
            !(
              (self.vehicle.length == 7 && !plateNumRegNewEng.test(self.vehicle)) ||
              (self.vehicle.length == 6 && !plateNumReg.test(self.vehicle))
            )
          ) {
        
            uni.showToast({
        
              title: "请输入正确的车牌号码",
              icon: "none",
              duration: 2000,
              mask: true
            });
    
            return false;
          }
          //手机号
          if (!cellPhoneReg.test(self.phone)) {
        
            uni.showToast({
        
              title: "请输入正确的手机号码",
              icon: "none",
              duration: 2000,
              mask: true
            });
    
            return false;
          }
          return true;
        },

供自己学习记录，代码上传不完整见谅

[20190425193835157.png]: /images/20220214/4b5d91a7f3c64e1099c73043147c1ef3.png
[20190425193949494.png]: /images/20220214/df36dffed81c430fbc9f4b8703b47233.png