Element-UI
表单组件

表单（Form）校验

# Element-UI 表单校验

在使用 Element-UI 进行表单验证时，主要涉及到表单的 rules 属性和 el-form-item 组件的 prop 属性。通过这些配置，我们可以实现复杂的表单验证逻辑。本文将从最基础的语法讲起，并最终总结所有常用的校验规则。

提示

表单（Form）组件官方文档：https://element.eleme.cn/#/zh-CN/component/form (opens new window)

# 1. 基础语法

# 1. `el-form` 组件

el-form 是表单的容器组件，提供表单验证、布局等功能。要启用表单验证，需要在 el-form 组件上绑定 rules 属性，该属性是一个对象，定义了每个表单项的验证规则。

<el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="formData.username" placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="formData.password" placeholder="请输入密码"></el-input>
  </el-form-item>
</el-form>

1
2
3
4
5
6
7
8

model：绑定的数据对象，用于存储表单的输入值。
rules：验证规则对象，每个表单项的验证规则都在这个对象中定义。
ref：用于引用表单实例，以便后续调用验证方法。
label-width：设置标签的宽度。
prop：el-form-item 组件的 prop 属性，用于指定表单项对应的数据字段名。

# 2. `rules` 对象

rules 是一个对象，记录了每个表单项的校验规则。对象的每个属性对应一个表单项，属性名即为表单项的 prop 值，属性值为一个数组，数组中的每个元素代表一条校验规则。

data() {
  return {
    formData: {
      username: '',  // 用户名
      password: ''   // 密码
    },
    rules: {
      username: [  // 用户名的校验规则
        { required: true, message: '请输入用户名', trigger: 'blur' },  // 必填校验
        { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }  // 长度校验
      ],
      password: [  // 密码的校验规则
        { required: true, message: '请输入密码', trigger: 'blur' },  // 必填校验
        { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }  // 长度校验
      ]
    }
  };
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

required：指定字段是否为必填项。
message：校验失败时显示的提示信息。
trigger：指定触发校验的事件类型（blur 或 change）。
- blur 事件：在表单项失去焦点时触发，适合在用户完成输入并离开输入框时触发校验。
- change 事件：在表单项的内容发生变化时触发，适合在用户输入内容时实时触发校验。

# 2. 表单验证方法

Element-UI 提供了多个用于表单验证的方法，常见的有 validate、validateField、resetFields 和 clearValidate。

# 1. `validate` 方法

validate 用于对整个表单进行校验。该方法接收一个回调函数作为参数，在校验完成后调用。回调函数接收两个参数：第一个参数是布尔值，表示校验是否通过；第二个参数是一个对象，包含未通过校验的字段及其错误信息。如果不传回调函数，该方法将返回一个 Promise。

this.$refs.loginForm.validate((valid, fields) => {
  // valid: 布尔值，表示表单校验是否通过
  // fields: 对象，包含未通过校验的字段及其错误信息
  if (valid) {
    console.log('表单验证通过');
    // 在表单验证通过后执行提交操作
  } else {
    console.log('表单验证失败', fields);
    // 处理校验失败的情况
  }
});

1
2
3
4
5
6
7
8
9
10
11

valid：布尔值，表示表单校验是否通过。
fields：对象，包含未通过校验的字段及其错误信息。

使用场景

当用户提交表单时，需要对表单的所有字段进行校验。如果所有字段都通过校验，则可以提交表单数据；如果某些字段未通过校验，则显示相应的错误信息。

# 2. `validateField` 方法

validateField 用于对部分表单字段进行校验。该方法接收两个参数：第一个参数是字段名或字段名组成的数组，第二个参数是回调函数，在校验完成后调用。

this.$refs.loginForm.validateField('username', (message) => {
  // message: 字符串，表示字段的校验错误信息。如果字段通过校验，该参数为 null
  if (message) {
    console.log('用户名校验失败:', message);
  } else {
    console.log('用户名校验通过');
  }
});

1
2
3
4
5
6
7
8

message：字符串，表示字段的校验错误信息。如果字段通过校验，该参数为 null。

使用场景

当用户仅修改某个字段时，只需要对该字段进行校验，而不必校验整个表单。

# 3. `resetFields` 方法

resetFields 用于重置整个表单，将所有字段的值重置为初始值，并移除校验结果。

this.$refs.loginForm.resetFields();

调用后，表单所有字段的值会被重置，且移除所有校验结果。

使用场景

当用户点击“重置”按钮时，需要清空表单的所有输入内容，并恢复初始状态。

# 4. `clearValidate` 方法

clearValidate 用于移除表单项的校验结果。该方法接收一个字段名或字段名组成的数组作为参数。如果不传参数，则移除整个表单的校验结果。

this.$refs.loginForm.clearValidate(['username', 'password']);

调用后，指定字段的校验结果将被移除。

使用场景

当用户在表单输入过程中，需要临时清除某些字段的校验结果，以便重新输入或修改内容。

# 5. 自定义校验方法

适用场景：当内置的校验规则无法满足业务需求时，可以使用自定义校验函数。例如，确保两次输入的密码一致。

自定义校验函数通常会接收三个参数：

rule: 当前校验规则对象，包含了该校验规则的相关配置。
value: 需要校验的字段的当前值。
callback: 校验结束后必须调用的回调函数，用于传递校验结果。

自定义校验密码一致的示例：

有两个密码输入框：password 和 confirmPassword，我们需要确保用户在 confirmPassword 中输入的内容与 password 一致。

rules: {
  confirmPassword: [
    { required: true, message: '请确认密码', trigger: 'blur' },  // 必填校验
    { validator: this.validatePasswordMatch, trigger: 'blur' }  // 自定义校验函数，校验两次输入的密码是否一致
  ]
}

methods: {
  /**
   * 自定义校验函数，用于校验两次输入的密码是否一致
   * @param {Object} rule - 当前校验规则对象
   * @param {string} value - 当前表单项的值，即确认密码的值
   * @param {Function} callback - 校验完成后的回调函数
   */
  validatePasswordMatch(rule, value, callback) {
    if (!value) {
      callback(new Error('请确认密码'));  // 如果确认密码为空，提示错误
    } else if (value !== this.loginForm.password) {
      callback(new Error('两次输入的密码不一致'));  // 如果确认密码与第一次输入的密码不一致，提示错误
    } else {
      callback();  // 校验通过，调用 callback
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

# 3. 常见校验规则总结

# 1. 用户名校验

要求：

必填项
长度在 3 到 15 个字符之间
只能包含字母和数字

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="用户名" prop="username">
      <!-- 用户名输入框，带有用户图标的前缀 -->
      <el-input v-model="formData.username" placeholder="请输入用户名" prefix-icon="el-icon-user"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: '' // 用户名输入框绑定的值
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }, // 必填项校验
          { min: 3, max: 15, message: '用户名长度应在 3 到 15 个字符之间', trigger: 'blur' }, // 长度校验
          { pattern: /^[a-zA-Z0-9]+$/, message: '用户名只能包含字母和数字', trigger: 'blur' } // 正则表达式校验
        ]
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 2. 密码校验

要求：

必填项
长度不小于 6 个字符
必须包含至少一个大写字母、一个小写字母和一个数字

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="密码" prop="password">
      <!-- 密码输入框，带有锁图标的前缀 -->
      <el-input type="password" v-model="formData.password" placeholder="请输入密码" prefix-icon="el-icon-lock" show-password></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        password: '' // 密码输入框绑定的值
      },
      rules: {
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }, // 必填项校验
          { min: 6, message: '密码长度不能少于 6 个字符', trigger: 'blur' }, // 长度校验
          { pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[a-zA-Z\d]{6,}$/, message: '密码必须包含至少一个大写字母、一个小写字母和一个数字', trigger: 'blur' } // 正则表达式校验
        ]
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 3. 邮箱校验

要求：

必填项
必须是有效的邮箱格式

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="邮箱" prop="email">
      <!-- 邮箱输入框，带有邮件图标的前缀 -->
      <el-input v-model="formData.email" placeholder="请输入邮箱" prefix-icon="el-icon-message"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        email: '' // 邮箱输入框绑定的值
      },
      rules: {
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' }, // 必填项校验
          { type: 'email', message: '请输入有效的邮箱地址', trigger: 'blur' } // 邮箱格式校验
        ]
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 4. 手机号码校验

要求：

必填项
必须是有效的手机号码格式（11 位数字，中国大陆）

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="手机号码" prop="phone">
      <!-- 手机号码输入框，带有手机图标的前缀 -->
      <el-input v-model="formData.phone" placeholder="请输入手机号码" prefix-icon="el-icon-mobile"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        phone: '' // 手机号码输入框绑定的值
      },
      rules: {
        phone: [
          { required: true, message: '请输入手机号码', trigger: 'blur' }, // 必填项校验
          { pattern: /^1[3-9]\d{9}$/, message: '请输入有效的手机号码', trigger: 'blur' } // 正则表达式校验
        ]
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 5. URL 校验

要求：

必填项
必须是有效的网址

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="网址" prop="website">
      <!-- 网址输入框，带有链接图标的前缀 -->
      <el-input v-model="formData.website" placeholder="请输入网址" prefix-icon="el-icon-link"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        website: '' // 网址输入框绑定的值
      },
      rules: {
        website: [
          { required: true, message: '请输入网址', trigger: 'blur' }, // 必填项校验
          { type: 'url', message: '请输入有效的网址', trigger: 'blur' } // URL 格式校验
        ]
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 6. 数字范围校验

要求：

必填项
必须是数字，且范围在 1 到 100 之间

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="年龄" prop="age">
      <!-- 数字输入框，带有数字图标的前缀 -->
      <el-input v-model="formData.age" placeholder="请输入年龄" prefix-icon="el-icon-edit"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        age: '' // 年龄输入框绑定的值
      },
      rules: {
        age: [
          { required: true, message: '请输入年龄', trigger: 'blur' }, // 必填项校验
          { type: 'number', message: '年龄必须是数字', trigger: 'blur' }, // 数字类型校验
          { min: 1, max: 100, message: '年龄必须在 1 到 100 之间', trigger: 'blur' } // 数字范围校验
        ]
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

# 7. 日期校验

要求：

必填项
必须选择有效的日期

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="日期" prop="date">
      <!-- 日期选择框，带有日历图标的前缀 -->
      <el-date-picker v-model="formData.date" type="date" placeholder="选择日期" prefix-icon="el-icon-date"></el-date-picker>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        date: '' // 日期选择框绑定的值
      },
      rules: {
        date: [
          { required: true, message: '请选择日期', trigger: 'change' }, // 必填项校验
          { type: 'date', message: '请选择有效的日期', trigger: 'change' } // 日期类型校验
        ]
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 8. 确认密码校验

要求：

必填项
必须与第一次输入的密码一致

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="密码" prop="password">
      <el-input type="password" prefix-icon="el-icon-lock" v-model="formData.password" placeholder="请输入密码" show-password></el-input>
    </el-form-item>
    <el-form-item label="确认密码" prop="confirmPassword">
      <!-- 确认密码输入框，带有锁图标的前缀 -->
      <el-input type="password" v-model="formData.confirmPassword" placeholder="请确认密码" prefix-icon="el-icon-lock"
        show-password></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        confirmPassword: '', // 确认密码输入框绑定的值
        password: '' // 密码输入框绑定的值，用于验证确认密码
      },
      rules: {
        confirmPassword: [
          { required: true, message: '请确认密码', trigger: 'blur' }, // 必填项校验
          { validator: this.validatePasswordMatch, trigger: 'blur' } // 自定义校验函数
        ]
      }
    };
  },
  methods: {
    validatePasswordMatch(rule, value, callback) {
      // 校验两次输入的密码是否一致
      if (value !== this.formData.password) {
        callback(new Error('两次输入的密码不一致'));
      } else {
        callback();
      }
    }
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# 9. 复选框数组校验

要求：

必填项
必须至少选择一个选项

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="爱好" prop="hobbies">
      <!-- 复选框组 -->
      <el-checkbox-group v-model="formData.hobbies">
        <el-checkbox label="阅读"></el-checkbox>
        <el-checkbox label="运动"></el-checkbox>
        <el-checkbox label="音乐"></el-checkbox>
      </el-checkbox-group>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        hobbies: [] // 爱好复选框组绑定的值
      },
      rules: {
        hobbies: [
          { type: 'array', required: true, message: '请至少选择一个爱好', trigger: 'change' }, // 必填项校验
          { min: 1, message: '请选择至少一个爱好', trigger: 'change' } // 数组长度校验
        ]
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

# 10. 布尔值校验

要求：

必填项
必须选中复选框（如同意条款）

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item prop="agreeToTerms">
      <!-- 复选框 -->
      <el-checkbox v-model="formData.agreeToTerms">我已阅读并同意条款</el-checkbox>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        agreeToTerms: false // 同意条款复选框绑定的值
      },
      rules: {
        agreeToTerms: [
          { type: 'boolean', required: true, message: '请同意条款', trigger: 'change' } // 布尔值校验
        ]
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

# 11. 身份证号码校验

要求：

必填项
必须是有效的身份证号码（中国大陆）

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="身份证号码" prop="idCard">
      <!-- 身份证号码输入框，带有身份证图标的前缀 -->
      <el-input v-model="formData.idCard" placeholder="请输入身份证号码" prefix-icon="el-icon-s-custom"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        idCard: '' // 身份证号码输入框绑定的值
      },
      rules: {
        idCard: [
          { required: true, message: '请输入身份证号码', trigger: 'blur' }, // 必填项校验
          { pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/, message: '请输入有效的身份证号码', trigger: 'blur' } // 正则表达式校验
        ]
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

# 12. IP 地址校验

要求：

必填项
必须是有效的 IP 地址

<template>
  <el-form :model="formData" :rules="rules" ref="loginForm" label-width="100px">
    <el-form-item label="IP 地址" prop="ipAddress">
      <!-- IP 地址输入框，带有网络图标的前缀 -->
      <el-input v-model="formData.ipAddress" placeholder="请输入 IP 地址" prefix-icon="el-icon-s-network"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        ipAddress: '' // IP 地址输入框绑定的值
      },
      rules: {
        ipAddress: [
          { required: true, message: '请输入 IP 地址', trigger: 'blur' }, // 必填项校验
          { pattern: /^(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)\.(25[0-5]|2[0-4]\d|[01]?\d\d?)$/, message: '请输入有效的 IP 地址', trigger: 'blur' } // 正则表达式校验
        ]
      }
    };
  }
};
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

编辑此页

上次更新: 2024/12/28, 18:32:08

← 表单（Form）表格（Table）→

表单（Form）校验

# Element-UI 表单校验

# 1. 基础语法

# 1. el-form 组件

# 2. rules 对象

# 2. 表单验证方法

# 1. validate 方法

# 2. validateField 方法

# 3. resetFields 方法

# 4. clearValidate 方法

# 5. 自定义校验方法

# 3. 常见校验规则总结

# 1. 用户名校验

# 2. 密码校验

# 3. 邮箱校验

# 4. 手机号码校验

# 5. URL 校验

# 6. 数字范围校验

# 7. 日期校验

# 8. 确认密码校验

# 9. 复选框数组校验

# 10. 布尔值校验

# 11. 身份证号码校验

# 12. IP 地址校验

# 1. `el-form` 组件

# 2. `rules` 对象

# 1. `validate` 方法

# 2. `validateField` 方法

# 3. `resetFields` 方法

# 4. `clearValidate` 方法