el-form-item不显示报错$option;label和input不是行内样式显示;el-form表单校验不生效;el-form表单校验正则


     
         
     
     
         
     
     
         提交
     

1.el-form-item不显示报错$option

原本想着是使用一下组件库的排版。只使用了el-form-item,外层没有使用el-form结果报错$option。不要偷懒还是要一起使用。

2.label和input不是同行显示 行内显示

设置一下label-width;想要几个el-form-item并排显示 可以给el-form设置:inline="true"

3.el-form表单校验不生效

检查是否在el-form 上添加了该属性:rules="rules"

4.el-form表单校验正则pattern(简单的正则可以直接使用pattern)

 rules: {
        longitude: [
          { required: true, message: '请输入经度', trigger: 'blur' },
          { pattern: /^[\-\+]?(0?\d{1,2}(\.\d{1,6})*|1[0-7]?\d{1}(\.\d{1,6})*|180(\.0{1,6})*)$/, message: '请输入正确的经度数据', trigger: 'blur' }
        ],
        latitude: [
          { required: true, message: '请输入纬度', trigger: 'blur' },
          { pattern: /^[\-\+]?([0-8]?\d{1}(\.\d{1,6})*|90(\.0{1,6})*)$/, message: '请输入正确的纬度数据', trigger: 'blur' }
        ]
      }

这个本来是最常用的组件,时间久了不写,还是有点遗忘这些细节,记录一下

你可能感兴趣的:(element,vue.js,elementui,javascript)