vue+element实现表单校验功能

下面是“vue+element实现表单校验功能”的完整攻略。

一、需求

在前端开发中，表单校验是一项常见的需求。我们需要实现以下功能：

用户填写表单时，对表单数据进行即时校验，及时提示用户。
当用户提交表单数据时，对数据再次校验，确保数据填写正确后才提交。

为了实现上述两个功能，我们可以选择使用Vue框架和Element组件库提供的表单组件及表单校验功能。下面我们来一步一步实现。

二、搭建基础环境

首先，我们需要确保我们安装了Vue框架及Element组件库。如果没有安装，可以使用以下命令行进行安装：

# 安装Vue框架
npm install vue

# 安装Element组件库
npm install element-ui

三、创建基础表单，并进行基础校验

接下来，我们开始创建表单。这里将以登录表单为例，创建一个简单的登录表单。

<template>
  <el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" label-width="80px">
    <el-form-item label="用户名" prop="username">
      <el-input v-model="loginForm.username"></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="password">
      <el-input type="password" v-model="loginForm.password"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        loginFormRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            alert('校验通过');
          } else {
            alert('表单校验失败');
            return false;
          }
        });
      }
    }
  };
</script>

上述代码创建了一个登录表单，包含用户名、密码两个输入框，以及一个登录按钮。我们使用ref属性将表单组件绑定到实例上，同时使用:model和:rules属性将表单数据和表单校验规则绑定到表单组件上。

现在我们可以在浏览器中看到一个基础的表单，我们可以输入用户名和密码，并点击登录按钮进行校验。但这个表单只实现了最基础的校验功能，仅在输入框失去焦点时进行校验，而没有及时提示用户错误信息。下面我们继续完善表单校验功能。

四、实现即时校验

我们的需求中要求对输入框进行即时校验，因此我们需要在用户输入时对表单数据进行校验并及时提示用户错误信息。这里我们使用Vue提供的计算属性实现该功能。代码如下：

<template>
  <el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" label-width="80px">
    <el-form-item label="用户名" prop="username" :error="loginFormErrors.username">
      <el-input v-model="loginForm.username" @input="validateInput('username')"></el-input>
      <div v-if="loginFormErrors.username" style="color: red">{{ loginFormErrors.username }}</div>
    </el-form-item>
    <el-form-item label="密码" prop="password" :error="loginFormErrors.password">
      <el-input type="password" v-model="loginForm.password" @input="validateInput('password')"></el-input>
      <div v-if="loginFormErrors.password" style="color: red">{{ loginFormErrors.password }}</div>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
        loginForm: {
          username: '',
          password: ''
        },
        loginFormRules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 6, max: 20, message: '密码长度在6到20个字符之间', trigger: 'blur' }
          ]
        },
        loginFormErrors: {}
      };
    },
    methods: {
      submitForm() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            alert('校验通过');
          } else {
            alert('表单校验失败');
            return false;
          }
        });
      },
      validateInput(key) {
        this.$refs.loginForm.validateField(key, () => {
          this.loginFormErrors[key] = '';
        });
      }
    }
  };
</script>

我们新增了一个计算属性loginFormErrors，用于保存每个输入框相应的错误信息。我们在输入框上绑定了@input事件，在用户输入时调用validateInput()方法，以便在用户输入时进行实时校验。validateInput()方法使用validateField()方法对该输入框的数据进行校验，并将错误信息保存到loginFormErrors中，以便前端及时在页面上显示错误信息。

五、自定义校验规则

在前面的示例中，我们使用了Element组件库提供的校验规则。但是有时候我们可能需要自定义一些校验规则。那么，我们该如何自定义校验规则呢？其实很简单，只需在loginFormRules中添加一条相应的规则即可。以下是一个示例：

<template>
  <el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" label-width="80px">
    <el-form-item label="手机号" prop="mobile">
      <el-input v-model="loginForm.mobile"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submitForm">登录</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
  export default {
    data() {
      return {
        loginForm: {
          mobile: ''
        },
        loginFormRules: {
          mobile: [
            { required: true, message: '请输入手机号', trigger: 'blur' },
            {
              validator: (rule, value, callback) => {
                if (!(/^1[3456789]\d{9}$/.test(value))) {
                  callback(new Error('请输入正确的手机号'));
                } else {
                  callback();
                }
              },
              trigger: 'blur'
            }
          ]
        }
      };
    },
    methods: {
      submitForm() {
        this.$refs.loginForm.validate(valid => {
          if (valid) {
            alert('校验通过');
          } else {
            alert('表单校验失败');
            return false;
          }
        });
      }
    }
  };
</script>

在以上示例中，我们添加了一个自定义手机号校验规则，并将该规则添加到loginFormRules中。在该规则中，我们使用了正则表达式进行手机号的判断，如果不符合规定，则调用callback()方法并返回错误信息。