表单校验未通过时让光标移动到第一个校验未通过的input

表单校验未通过时让光标移动到第一个校验未通过的input

vue2.0 + ElementUI 2.13.2

// html
<el-form class="form_one" ref="formOne" :rules="formOneRuls">
 // 省略 表单内容部分 
<el-form/>

// javascript
export default {
	data(){
		formOneRuls:{
			XX : [{required:true, message:'XX不能为空',trigger:'blur'}]
		}
	},
	methods:{
		submit(){
			// 表单提交
			this.$refs.formOne.validate( valid=>{
				if(valid){
					// 提交
				}else{
					// 校验不通过移动光标到第一个未通过的input
					setTimeout( ()=>{
						let error = document.getElementsByClassName('is-error');
						error[0].querySelector('input').focus()
					},100)
					return false
				}
			})
		}
	}
}

版权声明:本文为socaicaicaicai原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。