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>