有时需要获取页面焦点在哪个元素上,通过焦点可以判断用户是否在操作页面等信息。以前不太方便,要自己记录,html5增加了document.activeElement属性可以获取到当前激活的焦点。
1、默认焦点在body
console.log(document.activeElement);
// 控制台打印:
// body
2、文本框手动获取焦点
获取焦点,最常见的就是表单元素了,这里以文本框为例:
<input type="text" id="name" />
当把光标放到文本框内时,在控制台查看document.activeElement对象。
document.activeElement:
就是上面获取焦点的文本框。
3、通过focus获取焦点
<input type="text" id="name" />
<script type="text/javascript">
// 文本框获取角度
document.querySelector("#name").focus();
console.log(document.activeElement);
// 火狐浏览器控制台打印:
// <input id="name" type="text">
</script>
定义一个响应式的数据和表单域规则:
// 数据
const modelRef = reactive({ name: '', region: undefined, type: [],});
// 表单域规则
const rulesRef = reactive({ name: [ { required: true, message: 'Please input name', }, ], region: [ { required: true, message: 'Please select region', }, ], type: [ { required: true, message: 'Please select type', type: 'array', }, ],});
分别作为 useForm 的第一和第二参数,返回值中将包含响应式的校验结果信息以及其它的辅助方法:
const { resetFields, validate, validateInfos, mergeValidateInfo} = useForm(modelRef, rulesRef);
你可以将校验结果绑定到任意 a-form-item上,如:
<a-form-item v-bind="validateInfos.name">a-form-item>
你不需要关心 validateInfos.name 里面都有什么值,当然如果你想做更加自定义化的UI,例如,你想将错误信息通过弹窗的形式展示:
if(validateInfos.name.validateStatus === 'error') { alert(validateInfos.name.message);}