document.activeELement和antdesign-useForm

有时需要获取页面焦点在哪个元素上，通过焦点可以判断用户是否在操作页面等信息。以前不太方便，要自己记录，html5增加了document.activeElement属性可以获取到当前激活的焦点。

1、默认焦点在body

console.log(document.activeElement);

// 控制台打印：

//    body
1
2
3
4
5

2、文本框手动获取焦点

获取焦点，最常见的就是表单元素了，这里以文本框为例：

<input type="text" id="name" />
1

当把光标放到文本框内时，在控制台查看document.activeElement对象。

document.activeElement：
就是上面获取焦点的文本框。

3、通过focus获取焦点

<input type="text" id="name" />

<script type="text/javascript">

    // 文本框获取角度

    document.querySelector("#name").focus();

    console.log(document.activeElement);

    // 火狐浏览器控制台打印：

    //    

</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

定义一个响应式的数据和表单域规则：

// 数据
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',    },  ],});
1
2
3
4

分别作为 useForm 的第一和第二参数，返回值中将包含响应式的校验结果信息以及其它的辅助方法：

const {  resetFields,  validate,  validateInfos,  mergeValidateInfo} = useForm(modelRef, rulesRef);
1

你可以将校验结果绑定到任意 a-form-item上，如:

<a-form-item v-bind="validateInfos.name">a-form-item>
1

你不需要关心 validateInfos.name 里面都有什么值，当然如果你想做更加自定义化的UI，例如，你想将错误信息通过弹窗的形式展示：

if(validateInfos.name.validateStatus === 'error') {  alert(validateInfos.name.message);}
1