脱离form表单校验input(校验单个input输入框)提交时边框变红

脱离form表单校验input(校验单个input输入框)提交时边框变红_第1张图片

 把需要自定义校验的数据放在一个对象中,方便以后多个字段校验

 customVerifyInps:{
    communityInp2:"",
    asPathInp:"",
  },

在输入框中绑定id


在你提交事件中加上校验方法(根据场景加对应的的方法,我这里是点击事件后出发),通过document获取到目标元素改变他的边框

UpdateAllClick(){
        // 校验
        let type=false
        for (let i in this.customVerifyInps){
          if (this.customVerifyInps[i]==''){
            document.querySelector('#'+i).style.borderColor='red'
            type=true
          }
        }
        if (type){
              return this.$message({
              message: '检查表单是否填写完整。',
              type: 'error'
            });
        }
    },

当输入内容是需要红色边框,加个input事件内容改变就还原边框颜色

 
// 输入框输入事件
    inputEnv(name){
        document.querySelector('#'+name).style.borderColor=''
     
    }

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