circulation_ancientCoins_new/components/inputBox.vue

<template>
  <view class="input-com">
	<view :class="'input-wrapper'+(errormsg?' error':'')" :style="inputstyle">

		<view class="top-wrapper flex">
			<view class="left PfScMedium">
				<view class="PfScMedium">{{label}}</view>
				<image  v-if="required" class="required" :src="cssUrl + 'required.svg'" />
			</view>
			<view class="right">
				<textarea class="textarea" v-if="autoHeight" :auto-height="true" :value="value" :placeholder="holder" @blur="handleBlur" @input="handleInput"></textarea>
				<input class="input" v-else :value="value" :placeholder="holder" @blur="handleBlur" @input="handleInput"></input>
			</view>
		</view>

		<view class="bottom-wrapper" v-if="errormsg">
			<view class="errmsg" >*{{errormsg}}</view>
		</view>

	</view>
  </view>
</template>

<script>
export default {
  name: "inputBox",
  props: {
	value: {
		type: String,
		default: ""
	},
	autoHeight: {
		type: Boolean,
		default: false
	},
	label: {
		type: String,
		default: ""
	},
	inputstyle: {
		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{
			min-height: 100rpx;
			background: #FFFFFF;
			border-radius: 12rpx;
			margin: 0 auto;
			width: calc(100% - 48rpx);
			border-bottom: 2rpx solid rgba(151, 151, 151, 0.1457);
			box-sizing: border-box;
			margin: 0 auto;
			font-size: 32rpx;
			line-height: 32rpx;
			letter-spacing: 1rpx;
			padding: 36rpx 0;
			.top-wrapper{
				display: flex;
				background: #FFFFFF;
				box-sizing: border-box;
				width:100%;
				margin: 0 auto;
				font-size: 32rpx;
				line-height: 32rpx;
				letter-spacing: 1rpx;
				margin: 0;
			}
			&.error{
				padding-bottom: 16rpx !important;

			}
			.left{
				display: flex;
				align-items: center;
				min-width: 158rpx;
				max-width: 238rpx;
				text{
					color: #F55555;
					margin-right: 16rpx;
				}
				view{
					color: #000000;
					letter-spacing: 2rpx;
					font-size: 32rpx;
					line-height: 44rpx;
					color: #000000;
				}
				.hide-start{
					opacity: 0;
				}
			}
			.right{
				flex-grow: 1;
				color: #242833;
				text-align: right;
				padding-left: 10rpx;
				box-sizing: border-box;
				position: relative;
				.input{
					color: #222222;
					height: 100%;
					font-size: 32rpx;

					&::placeholder{
						font-size: 32rpx;
						font-weight: normal;
						line-height: 44rpx;
						text-align: right;
						letter-spacing: 0.24rpx;
						color: #999999;
					}
				}
				.textarea{
					width: 100%;
					height: 45rpx;
					color: #222222;
					&::placeholder{
						font-size: 32rpx;
						font-weight: normal;
						line-height: 44rpx;
						text-align: right;
						letter-spacing: 0.24rpx;
						color: #999999;
					}
				}
			}
		}
		.required {
			margin-left: 8rpx;
			color: #f56c6c;
			font-size: 12px;
			width: 16rpx;
			height: 16rpx;
		}
		.errmsg{
			margin: 0 auto;
			width: 100%;
			display: flex;
			justify-content: flex-end;
			flex-wrap: wrap;
			font-size: 24rpx;
			font-weight: normal;
			line-height: 44rpx;
			letter-spacing: 0.24rpx;
			color: #FF0000;
		}
		.hua{
			width: 20rpx;
			height: 20rpx;
		}
	}
</style>