circulation_ancientCoins_new/components/inputBox.vue

<template>
  <view class="input-com">
	<view :class="'input-wrapper'+(errormsg?' error':'')">
		<view class="left">
			<text :class="!required?'hide-start':''"><img :src="cssUrl+'hua.svg'" class="hua"></text>
			<view>{{label}}：</view>
		</view>
		<view class="right">
			<textarea v-if="autoHeight" :auto-height="true" :value="value" :placeholder="holder" @blur="handleBlur" @input="handleInput"></textarea>
			<input v-else :value="value" :placeholder="holder" @blur="handleBlur" @input="handleInput"></input>
		</view>
	</view>
	<view class="errmsg" v-if="errormsg">*{{errormsg}}</view>
  </view>
</template>

<script>
export default {
  name: "inputBox",
  props: {
	value: {
		type: String,
		default: ""
	},
	autoHeight: {
		type: Boolean,
		default: false
	},
	label: {
		type: String,
		default: ""
	},
    holder: {
      type: String,
      default: ''
    },
	rule: {
	  type: String,
	  default: ''
	},
	required: {
	  type: Boolean,
	  default: true
	}
  },
  data() {
    return {
		errormsg:'',
		cssUrl:this.cssUrl
    }
  },
  methods: {
    handleBlur(e) {
		var value = e.detail.value
		var res = this.check(value);
		if(!res){
			this.$emit('blurEvent', value, false)
			return
		}
		this.$emit('blurEvent', value, true)
    },
	handleInput(e){
		if(!this.errormsg) return;
		var value = e.detail.value
		var res = this.check(value);
		if(!res){
			this.$emit('blurEvent', value, false)
			return
		}
		this.$emit('blurEvent', value, true)
	},
	check(value){
		var noEmptyVal = this.$trim.trim(value)
		if(this.required && noEmptyVal.length<=0){
			this.errormsg = this.label+'不能为空'
			return false
		}
		
		if(this.rule == 'phone' && !/^1[3-9]\d{9}$/.test(noEmptyVal)){
			this.errormsg = '手机号格式不正确'
			return false
		}
		
		if(this.rule == 'idcardext' && (!/[a-z0-9A-Z]{4}/.test(noEmptyVal) || noEmptyVal.length!=4)){
			this.errormsg = this.label+'格式不正确'
			return false
		}
		if(this.rule == 'idcard' && !this.validateChineseIDCard(noEmptyVal)){
			this.errormsg = this.label+'格式不正确'
			return false
		}
		this.errormsg = ''
		return true
	},
	validateChineseIDCard(idCard) {
		const pattern = /^[1-9]\d{5}(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/;

		if (!pattern.test(idCard)) {
			return false;
		}

		const modWeight = [7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2];
		const modCheckDigit = [1, 0, 'X', 9, 8, 7, 6, 5, 4, 3, 2];

		const idArray = idCard.split('');
		let sum = 0;
		for (let i = 0; i < 17; i++) {
			sum += parseInt(idArray[i]) * modWeight[i];
		}

		const mod = sum % 11;
		const checkDigit = modCheckDigit[mod];

		return idArray[17] === checkDigit.toString();
	}
  }
};
</script>

<style lang="scss" scoped>
	.input-com{
		.input-wrapper{
			display: flex;
			width: 666rpx;
			min-height: 100rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			border: 2rpx solid #DDDDDD;
			padding: 27.5rpx 14rpx;
			box-sizing: border-box;
			margin: 0 auto;
			font-size: 32rpx;
			letter-spacing: 1rpx;
			&.error{
				border: 1rpx solid #FAB0B0;
			}
			.left{
				display: flex;
				min-width: 133rpx;
				max-width: 238rpx;
				text{
					color: #F55555;
					margin-right: 16rpx;
				}
				view{
					color: #949699;
				}
				.hide-start{
					opacity: 0;
				}
			}
			.right{
				flex-grow: 1;
				color: #242833;
				text-align: right;
				padding-left: 10rpx;
				box-sizing: border-box;
				textarea{
					width: 100%;
					height: 45rpx;
				}
			}
		}
		.errmsg{
			min-height: 25rpx;
			line-height: 30rpx;
			font-size: 30rpx;
			color: #FD0000;
			width: 666rpx;
			margin: 16rpx auto 0rpx;
		}
		.hua{
			width: 20rpx;
			height: 20rpx;
		}
	}
</style>