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 label="表单项" prop="menuName">
          <el-input v-model="form.menuName"  maxlength="11" />
        </el-form-item>
      </el-form-item>

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

const form = ref({

    menuId: undefined,

    parentId: 0,

    menuName: undefined,

  })

const   myrules=ref({
          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赋不同值就可以了。