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

最新推荐文章于 2024-02-25 19:28:15 发布

曲帅369

最新推荐文章于 2024-02-25 19:28:15 发布

阅读量2k

点赞数

文章标签： servlet java 前端

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

版权

身份证号输入验证前端开发 Vue组件自定义验证

关键词由CSDN通过智能技术生成

该段代码展示了在前端UI中实现身份证号输入的组件，包括使用`u-input`和`u-keyboard`组件，以及自定义身份证号的验证规则。在用户输入时实时触发验证，并提供了退格键的处理逻辑，确保输入的身份证号格式正确。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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