uview表单，身份证，键盘，实时验证

最新推荐文章于 2024-07-19 16:53:25 发布

曲帅369

最新推荐文章于 2024-07-19 16:53:25 发布

阅读量1.8k

点赞数

文章标签：身份证号输入验证前端开发 Vue组件自定义验证

本文链接：https://blog.csdn.net/weixin_41112414/article/details/125825303

版权

<u-form-item label="身份证号" prop="card" ref="card">
	<u-input v-model="form.card" placeholder="请输入身份证号" @click="keyCardShow = true" />
	<u-keyboard ref="uKeyboardCard" mode="card" v-model="keyCardShow" @change="valChangeCard" @backspace="backspaceCard" :mask="false">
    </u-keyboard>
</u-form-item>

        	rules: {
					card: [{
							required: true,
							message: '请输入身份证',
							trigger: ['blur','change'],
						},
						{
							// 自定义验证函数
							validator: (rule, value, callback) => {
								// 返回true表示校验通过，返回false表示不通过
								return this.$u.test.idCard(value)
							},
							message: '身份证不正确',
							// 触发器可以同时用blur和change
							trigger: ['blur','change'],
						}
					],
				}
            valChangeCard(val) {
				// 将每次按键的值拼接到value变量中，注意+=写法
				this.form.card += val;
				this.triggerSingleFieldValidate("card")
			
			},
			// 退格键被点击
			backspaceCard() {
				// 删除value的最后一个字符
				if (this.form.card.length) this.form.card = this.form.card.substr(0, this.form.card.length - 1);
				this.triggerSingleFieldValidate("card")
			},
			//验证
			triggerSingleFieldValidate(refName) {
				setTimeout(()=>{
					this.$refs[refName].onFieldChange()
				},200)
			}