Element-UI 表单校验：友好提示且定位到元素位置

2024-01-18 13:03:34

Element UI 表单校验概述

Element UI 是一个用于构建 Web界面的开源组件库，它提供了丰富的组件，包括表单组件。Element UI 的表单组件支持丰富的校验规则，可以帮助开发者快速构建具有良好用户体验的表单。

表单校验友好提示

当用户提交表单时，如果表单数据不符合校验规则，Element UI 会自动弹出错误提示。这些错误提示通常是红色的文本，显示在表单元素的下方。

<el-form :model="form" label-width="80px">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="form.password" type="password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

import { Form, FormItem, Input, Button } from 'element-ui';

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，可以提交表单
        } else {
          // 表单验证失败，给出提示
          console.log('表单验证失败');
        }
      });
    },
  },
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
    [Button.name]: Button,
  },
};

定位错误元素

除了提供错误提示外，Element UI 还支持定位错误元素。当用户提交表单时，如果表单数据不符合校验规则，Element UI 会自动将错误元素滚动到可视区域，并聚焦到错误元素上。

<el-form :model="form" label-width="80px">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input v-model="form.password" type="password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
  </el-form-item>
</el-form>

import { Form, FormItem, Input, Button } from 'element-ui';

export default {
  data() {
    return {
      form: {
        username: '',
        password: '',
      },
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          // 表单验证通过，可以提交表单
        } else {
          // 表单验证失败，给出提示并定位到错误元素
          this.$refs.form.scrollToError();
        }
      });
    },
  },
  components: {
    [Form.name]: Form,
    [FormItem.name]: FormItem,
    [Input.name]: Input,
    [Button.name]: Button,
  },
};