vue表单验证方式解析

使用vue做了一套后台管理系统，之前没有太重视表单验证，现在开发已经接近尾声，才发现，不得了，要是都没有验证到时用户体验不好，这个锅甩都甩不掉，所以决定花上一点时间补上这个小缺陷，

幸好用的element框架，所以有现成的验证方式，这里先记录下用法，到时别又忘了，也算是归纳总结吧

首先说下el-form里面的一些属性的功能

<el-form :model="add" :rules="rules" ref="add" class="form-inline" >
</el-form>

其中：model="add"，add是自己定义的一个属性，属性值是对象，后面会用到

:rules是用于验证的，ref嘛，必须加，还得和model一样

然后就是里面的el-form-item了

<el-form-item prop="parkNo" label="编号">
                                      <!-- <label for=""><span style="color:red">*</span> 编号</label> -->
                                      <el-input v-model="add.parkNo"></el-input>    
                                  </el-form-item>

 rules: {
        parkNo: [
          { required: true, message: "请输入停车场编号", trigger: "blur" }
        ],}

这里el-form-item 里面的prop就是rules里面对应的名称的验证内容，

而验证的就是v-model里面的值存不存在

最后在点击保存按钮时进行验证

 @click="savePark('add')

savePark(formName) {
      this.$refs[formName].validate(valid => {
        if (!valid) {
          console.log("error submit!!");
          return false;
        } else {
console.log(" submit!!");
         }
          
    },