iView中的input文本输入框只允许输入4位数字，格式校验后再发送请求做别的校验

iView中的input文本输入框只允许输入4位数字的校验

<template>
	<div>
		<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
			<FormItem label="工号" prop="jobNumber">
          		<Input v-model="formValidate.jobNumber" placeholder="请输入工号" maxlength="4" 		style="width: 300px" @on-blur="inputValidate" />
          		<div v-if="formValidate.jobNumberValidate" style="font-size:16px; color:red;" >
          			{{formValidate.jobNumberValidateMsg}}
          		</div>
        	</FormItem>
		</Form>
	</div>
</template>

<script>
	export default {
		name:'',
		data(){
			return {
				formValidate:{
					jobNumber:'',
					jobNumberValidate:false,
					jobNumberValidateMsg:''
				},
				ruleValidate:{
					jobNumber:[
						{ required: true, type: 'number', message: '请输入4位数字', trigger: 'blur' },
						{pattern:/^[\d]{4}$/,message: '请输入4位数字', trigger: 'blur'} 
						// required表示该项是否为必填，true为必填，在该项之前显示*，false非必填，不显示*；
						\d表示0-9之间的任意数字，{4}表示从这些数字中选4位，如果只是做格式校验，这样就可以了；如格式校验后还要做别的校验，在触发事件中先做格式校验，再做其他校验，如工号是否重复的校验，如失去焦点，校验格式，发送请求校验是否重复，详见如下校验函数，此时，校验规则对象中就不用写这个校验规则数组了。
					]
				}
			}
		},
		methods:{
			inputValidate(){
			在模板中添加提示语的包裹标签
				if(this.formValidate.jobNumber.length==0){
				//未输入工号，提示输入，必填（如不是必填，就不用写这一句），return之后不往下执行，就不会发送请求
					this.formValidate.jobNumberValidate=true;
					this.formValidate.jobNumberValidateMsg='请输入4位数字';
					return;
				}
				//4位数字的校验规则
				let myReg= /^[\d]{4}$/ 
				//如输入的值不符合校验规则，提示输入，return之后不往下执行，不发送请求
				if(!myReg.test(this.formValidate.jobNumber)){
					this.formValidate.jobNumberValidate=true;
					this.formValidate.jobNumberValidateMsg='请输入4位数字';
					return;
				}
				//输入工号且符合校验规则，发送请求，校验工号是否重复，注意，如是在抽屉中校验，关闭抽屉后重置所有数据！！！！
				this.$http.get('/校验工号是否跟数据库的重复的请求地址?请求参数名='+this.formValidate.jobNumber)
				.then(res=>{
					if(res.data.returnCode===0){
						return true
					}else{
						return false
					}
				})
				.catch(error=>{
					this.$Message.error(error)
				})
			}
		}
	}
</script>