【Vue中给输入框加入js验证_blur失去焦点进行校验】

【Vue中给输入框加入js验证_blur失去焦点进行校验】
通俗一点就是给输入框加个光标离开当前文本输入框时,然后对当前文本框内容进行校验判断
具体如下:
1.先给文本框加属性 @blur=“validatePhoneNumber”


{{ errorText }}



2.在data中对需要值进行默认赋值,或者称之为自定义
【Vue中给输入框加入js验证_blur失去焦点进行校验】_第1张图片

telephone:‘’,
phoneNumber: ‘’,
isValid: true,
errorText: ‘请输入正确的手机号码’ ,
isPhoneValid: true,
3.在method中自定义校验的方法
【Vue中给输入框加入js验证_blur失去焦点进行校验】_第2张图片

 validatePhoneNumber() {  
  const resg1=/^1[3456789]\d{9}$/;
  this.isValid = resg1.test(this.entity.telephone);  
  if (!this.isValid) {  
    alert(this.errorText);  
  }  
} 

你可能感兴趣的:(vue,前端开发,javascript,vue.js,开发语言,vue)