<template>
<div class="page-box">
<div style="margin:.4rem;">
<p class="second-title">请输入身份证上的姓名:</p>
<van-field v-model="card-name" clearable ref="cardName"></van-field>
</div>
<div style="margin:.4rem;">
<p class="second-title">请输入本人身份证号:</p>
<van-field v-model="card-number" clearable ref="cardNumber" maxlength="18"></van-field>
</div>
</div>
</template>
<script>
export default {
data() {
return {
cardName:'',
cardNumber:''
};
},
methods: {
//提交前的数据校验
valid() {
let that=this
var regIdName = /^(([a-zA-Z+\.?\·?a-zA-Z+\s]{2,30}$)|([\u4e00-\u9fa5+\·?\u4e00-\u9fa5+]{2,30}$))/; // 包括新疆身份证姓名含·并且英文支持空格
if(!regIdName.test(that.cardName)){
that.$toast({
message: '请输入正确的姓名',
duration: 2000
});
that.$refs.cardName.focus();
return false;
}
var regIdNo = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if(!regIdNo.test(that.cardNumber)){
that.$toast({
message: '身份证号填写错误',
duration: 2000
});
that.$refs.cardNumber.focus();
return false;
}
return true
}
}
}
};
</script>
<style lang="scss" scoped>
.page-box {
width: 100%;
display: flex;
flex-direction: column;
.second-title {
font-size: 0.14rem;
}
.card-name {
font-size: 0.14rem;
width: 3.5rem;
}
.card-number {
font-size: 0.14rem;
width: 3.5rem;
}
}
<style>