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

<el-form :model="form" label-width="80px" :rules="rules">
     <el-form-item label="经度" prop="longitude">
         <el-input type="number" v-model="form.longitude"></el-input>
     </el-form-item>
     <el-form-item label="纬度" prop="latitude">
         <el-input type="number" v-model="form.latitude"></el-input>
     </el-form-item>
     <el-form-item style="text-align:center">
         <el-button icon="el-icon-search" size="mini" type="primary" @click="onSubmit">提交</el-button>
     </el-form-item>
</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' }
        ]
      }

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