有时候一个页面过长,上面的必录表达没填,底下保存时不能正常用户会懵逼不知道啥情况,弹框提示的话还得不停的点击弹框而且若未填项比较多不停出现弹框也比较烦,这时候如果直接定位到未填项用户很容易明白保存失败原因且不用用户自己一个个找具体的未填项,以下代码便可实现具体表单未填项在校验时直接定位

//获取当前必录的校验词并弹框提示输入具体必录项

if(document.getElementsByClassName('el-form-item__error').length>0){
	          this.$notify.error({ 
	            title: '提示',  
	            message: document.getElementsByClassName('el-form-item__error')[0].innerText
	          }); 
	        }

//获取未录入的第一个必录项的输入框并定位到此处(需要给同一个表单的每个必录项单独加类名称便于区分不同表单的不同项,同一个表单不同输入框取同一个类名称即可)
          setTimeout(()=>{
            //console.log(document.getElementsByClassName('is-error xunjia'))
            var isError= document.getElementsByClassName("is-error xunjia");//此处的xunjia为自定义的类名称,可根据项目实际写或者不写
            isError[0].querySelector('input').focus();
          },100);

 

 

 

 

Logo

前往低代码交流专区

更多推荐