详解 vue + element-ui form表单validate验证

定义form名称为myform，校验规则用myrules 先记住这两个名字

使用ref="myform"来指定表单名
使用:rules="myrules"指定校验规则
这两个属性一定放在el-form中。

      <el-form ref="myform" :model="form" :rules="myrules" label-width="100px">
            .......
      </el-form-item>

在el-form中定义需要校验的表单项myformitem

使用prop定义el-form-item的名称，注意一定不要把标签放到input 上。

        <el-form-item label="表单项" prop="myformitem">
          <el-input v-model="ruleForm.phone"  maxlength="11" />
        </el-form-item>

综上所述，表单代码如下：

      <el-form ref="myform" :model="form" :rules="myrules" label-width="100px">
        <el-form-item label="表单项" prop="myformitem">
          <el-input v-model="ruleForm.phone"  maxlength="11" />
        </el-form-item>
      </el-form-item>

在data中定义校验规则，校验规则要针对每一个上节定义好formitem进行校验，可以有required 也可以有正则表达式。

        myrules: {
          myformitem: [
            {
              required: true,
              message: "手机号码不能为空",
              trigger: "blur"
            },
            {
              pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
              message: "请输入正确的手机号码",
              trigger: "blur"
            }
          ],

触发myform提交的代码这样写

this.$refs["myform"].validate(valid => {
     if (valid) {
       console.log("submit here!")
     } 
});

如果多个按钮的校验方式不同，比如发送短信码+登录页面，短信码只要校验 手机号字段，登录要校验手机号和验证码两个字段怎么办？答案是：点击的时候给rules赋不同值就可以了。