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

目标

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

使用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
     }
   }
 })