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'
          }]
        }
      }
    }複製代碼