vue +element-ui实现表单验证

<el-form ref="form" :model="form" label-width="100px" :rules="rules" label-position="left">
      <el-form-item label="气表读数" prop="gasl">
        <el-input v-model="form.gasl" placeholder=""></el-input>
      </el-form-item>
    </el-form>
重点代码：
如下几点在el-form上绑定
 ref="form"
:model="form" form是在return中定义过的
:rules="rules" rules也是在return中定义过的规则
如下在el-form-item上绑定
prop="gasl" gasl和return中定义过的form中的对用
   data() {
    //数字验证
    var number = (rule, value, callback) => {
      let reg=/^(([^0][0-9]+|0)\.([0-9]{1,2})$)|^(([^0][0-9]+|0)$)|^(([1-9]+)\.([0-9]{1,2})$)|^(([1-9]+)$)/
      if (!value) {
        return callback(new Error('不能为空')); 
       }else{
        if (!reg.test(value)) {
          callback(new Error('请输入数字'));
        } else {  
          callback();
        }   
       }   
    };
-------------重点---------------------------------
正则验证在data内，return上面定义
    return{
        form: {
        gasl:'',
      },
      rules: {
          gasl: [{
            required: true,
            validator: number,
            trigger: 'blur'
          }]
        }
      }
    }复制代码