html表单检查未填项并定位,vue 项目 element表单校验定位到未录入的第一个必录项...

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

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

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");

isError[0].querySelector('input').focus();

},100);