【小程序】输入框检验姓名、身份证（正则表达式）并提交

karshey

已于 2023-05-11 18:04:53 修改

阅读量1.2k

点赞数 1

分类专栏：小程序文章标签：正则表达式小程序 javascript

于 2023-05-06 10:31:49 首次发布

本文链接：https://blog.csdn.net/karshey/article/details/130521484

版权

小程序专栏收录该内容

8 篇文章 1 订阅

订阅专栏

该文描述了如何使用VantWeapp库在微信小程序中创建一个表单，用户输入姓名和身份证号后进行校验。姓名需为中文，身份证号通过正则表达式验证格式。校验通过后，数据会被存储到状态管理器中。点击提交按钮时，若无错误则显示“绑定成功”，反之则显示“绑定失败”提示。

摘要由CSDN通过智能技术生成

目标

输入绑定姓名、身份证号并进行校验
若未填或校验不通过则显示绑定失败的轻提示
若通过校验并提交则显示绑定成功

在这里插入图片描述

使用Vant Weapp (gitee.io)库。

思路与代码

html：

wx:model绑定输入框输入的值
data-key是一个属性，在js中的e.currentTarget.dataset.key可以得到
onChange、check分别是修改事件和失去焦点的事件
错误提示统一配置，会用到上面的data-key

<view class="withdraw">
  <van-field
    wx:model="{{ username}}"
    data-key="username"
    bind:change="onChange"
    bind:blur="check"
    label="姓名"
    placeholder="请输入姓名"
    required
    error-message="{{ errmsg.username }}"
  />
  <van-field
    wx:model="{{ idcard }}"
    data-key="idcard"
    bind:change="onChange"
    bind:blur="check"
    label="身份证号"
    placeholder="请输入身份证号"
    required
    type="idcard"
    error-message="{{ errmsg.idcard }}"
  />
</view>

<view class="btn">
  <van-button block round color="#3975C6" bind:click="submit">确认</van-button>
</view>
<van-toast id="van-toast" />

js：

onChange 修改输入的值时，将输入的值赋值
check 失去焦点时，检验输入是否符合，正则表达式见代码
注意：
校验通过后对数据进行的操作因项目需求而异，这里是将数据存在状态管理store中
由于data-key的值与e.currentTarget.dataset.key的值是相同的，可以通过data-key批量配置errmsg。errmsg 的属性也与data-key相同。
submit 点击确认按钮提交数据时，检验是否有错误输入，若有则“绑定失败”，否则“绑定成功”

createPage({
   setup() {
     let username =ref('')
     let idcard = ref('')
     let errmsg = reactive({
       username: ' ',
       idcard: ' '
     }) //错误提示信息

     const onChange = (e) => {
       let type = e.currentTarget.dataset.key
       if (type === 'username') username.value = e.detail
       if (type === 'idcard') idcard.value = e.detail
     }

     const check = (e) => {
       let type = e.currentTarget.dataset.key
       if (type === 'username') {
         let reg = /^(?:[\u4e00-\u9fa5·]{2,16})$/
         if (!reg.test(e.detail.value)) {
           errmsg[type] = '请输入正确的中文名字'
         } else {
           errmsg[type] = ''
           //存在store状态管理中,这里因项目而异
           store.setWxUserInfo(Object.assign(store.getWxUserInfo, { username }))
         }
       }
       if (type === 'idcard') {
         let reg =
           /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/

         if (!reg.test(e.detail.value)) {
           errmsg[type] = '身份证格式不正确'
         } else {
           errmsg[type] = ''
           store.setWxUserInfo(Object.assign(store.getWxUserInfo, { idcard }))
         }
       }
     }

     const submit = () => {
       if (errmsg['username'] === '' && errmsg['idcard'] === '') {
         store.setWxUserInfo(store.getWxUserInfo)
         Toast('绑定成功！')
       } else {
         Toast('绑定失败！')
       }
     }

     return {
       username,
       idcard,
       check,
       errmsg,
       onChange,
       submit
     }
   }
 })