Vue表单校验面试题（高频真题+接地气答案）.docxVIP

Vue表单校验面试题（高频真题+接地气答案）

一、基础必问（初级前端必背）

1.Element表单校验的底层原理是什么？平时怎么配置基础校验规则？

参考答案：

Element表单本身是封装了async-validator这个第三方校验库，我们写的rules规则最终都会交给这个库去做字段校验。

日常基础配置分三步：

form标签绑定model，关联表单数据源；绑定rules，挂载全局校验规则

form-item标签绑定prop，prop值必须和form里面的字段名完全一致，不然校验不生效

输入框不用额外绑定校验，v-model正常绑定表单字段即可

基础规则一般配置：是否必填、最小/最大长度、正则匹配、提示文案、触发方式。触发方式常用两种：blur失去焦点校验，change内容改变实时校验。

2.表单校验trigger两种触发方式区别？什么时候用blur，什么时候用change？

参考答案：

blur：输入框失去焦点才触发校验。适合大部分常规输入项，比如用户名、手机号，减少页面高频校验，性能更好，用户体验也更舒服，不会一边打字一边报错

change：输入内容每一次变更都会实时校验。适合下拉选择框、单选框、复选框这类非手动输入的组件，下拉切换选项就需要立刻校验

补充：开发里我几乎不会给输入框用change，用户打字过程中一直弹错误提示，体验很差。

3.this.$refs.fo