Element-UI中的表单验证

    
    
  
 
  rules: { // 表单验证规则
    name: [
      { required: true, message: '请输入活动名称' }, // 'blur'是鼠标失去焦点的时候会触发验证
      { min: 3, max: 5, message: '长度在 3 到 5 个字符' }
    ]
  }

    
  
 
  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)
      }
    },

    
      
        
      
    
    -
    
      
        
      
    
  
 
  date1: [
    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
  ],
  date2: [
    { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
  ]

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

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

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