Element-UI中的表单验证

1. 普通输入验证

<el-form-item label="活动名称" prop="name">
    <!-- validate-event属性的作用是: 输入时不触发表单验证.提交时再验证 -->
    <el-input v-model="registData.name" :validate-event="false"></el-input>
  </el-form-item>
 
  rules: { // 表单验证规则
    name: [
      { required: true, message: 请输入活动名称 }, // blur是鼠标失去焦点的时候会触发验证
      { min: 3, max: 5, message: 长度在 3 到 5 个字符 }
    ]
  }

2. 数字类型验证

<el-form-item label="区域面积" prop="area">
    <el-input v-model="registData.area" @keyup.native="InputNumber(area)" autocomplete="off"></el-input>
  </el-form-item>
 
  area: [
      // 数字类型 number, 整数: integer, 浮点数: float
      // {type: number, message: 请输入数字类型, trigger: blur},
      // {type: integer, message: 请输入数字类型, trigger: change}, // change是表单的值改变的时候会触发验证
      {required: true, message: 请输入区域面积, trigger: blur}
    ],
 
    // 自己写的正则验证,限制用户输入数字以外的字符
    // 过滤输入的金额
    InputNumber (property) {
      this.registData[property] = this.limitInputPointNumber(this.registData[property])
    },
 
    // 验证只能输入数字
    limitInputNumber (val) {
      if (val) {
        return String(val).replace(/D/g, )
      }
      return val
    },
 
    // 限制只能输入数字(可以输入两位小数)
    limitInputPointNumber (val) {
      if (val === 0 || val === 0 || val === ) {
        return 
      } else {
        let value = null
        value = String(val).replace(/[^d.]/g, ) // 清除“数字”和“.”以外的字符
        value = value.replace(/.{2,}/g, .) // 只保留第一个. 清除多余的
        value = value.replace(., $#$).replace(/./g, ).replace($#$, .)
        value = value.replace(/^(-)*(d+).(dd).*$/, $1$2.$3) // 只能输入两个小数
        return Number(value)
      }
    },

3. 嵌套验证

<el-form-item label="活动时间" required>
    <el-col :span="11">
      <el-form-item prop="date1">
        <el-date-picker type="date" placeholder="选择日期" v-model="registData.date1" style="width: 100%;"></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col class="line" :span="2">-</el-col>
    <el-col :span="11">
      <el-form-item prop="date2">
        <el-time-picker type="fixed-time" placeholder="选择时间" v-model="registData.date2" style="width: 100%;"></el-time-picker>
      </el-form-item>
    </el-col>
  </el-form-item>
 
  date1: [
    { type: date, required: true, message: 请选择日期, trigger: change }
  ],
  date2: [
    { type: date, required: true, message: 请选择时间, trigger: change }
  ]

4.前后端日期时间差解决

使用Json反序列化创建的时间解析器和Spring日期格式化来解决前后端页面时差解决

只需要在后端实体类上标注这两个注解即可

@JsonFormat(pattern="yyyy-MM-dd", timezone="GMT+8")
@DateTimeFormat(pattern="yyyy-MM-dd")