界面表单参数验证概述

  • 1.ElementPlus 的表单验证器引用的组件：https://github.com/yiminghe/async-validator ，完整语法可以查看独立的官方文档。
  • 2.我们将最常用的验证语法列举在这里，满足最常用需求。


    表单验证需要满足的 2 个条件：

    1.定义表单 el-form-item 的属性 prop，与表单字段保持一致, 例如： username：
    2.CurdFormData.user_name 为表单字段名变量，需要事先定义好.
  1. // 1.文本类型的表单
  2. <el-form-item label="用户名" prop="user_name">
  3.   <el-input clearable v-model="propCreateEdit.curdFormData.user_name"/>
  4. </el-form-item>
  7. //2.数字类型的表单，必须使用 v-model.number  设置，否则验证器语法一致提示不通过
  8. <el-form-item label="用户名" prop="age">
  9.   <el-input clearable v-model.number="propCreateEdit.curdFormData.age"/>
  10. </el-form-item>
  12. //3.日期时间类型
  13. <el-form-item label="用户名" prop="birthday">
  14.   <el-input clearable v-model.number="propCreateEdit.curdFormData.birthday"/>
  15. </el-form-item>
  • 2.将 username、age、birthday属性变量放置在验证规则中进行验证：
  2.        rules: {
  3.         user_name: [{type: 'string', required: true, message: '账户不能为空', trigger: 'blur'}],
  4.         age: [{type: 'number', required: true, min:1,max:150,message: '年龄不能为空', trigger: 'blur'}],
  5.         birthday: [
  6.         // patter 支持正则表达式模式，可以自定义。
  7.         // 由于不同的系统使用的时间格式(UTC、GMT 、TIMESTAMP、YYYY-MM-DD HH:MM:SS)不同，前端可以按照后端需求设置日期时间格式，自定义验证规则。。
  8.            {type: 'string', required: true, message: '出生日期为必填', trigger: 'blur', patter: /.+/}
  9.         ]
  10.       },