element-ui 表单验证注意事项

1. :rules 是否写错
2. prop、v-model的位置要注意写正确
3. 在data填写规则时也要注意 required是否书写正确
<!-- 编辑角色按钮 -->
      <el-form
        :model="addRolesInfo"
        ref="editRoleForm"
        label-width="70px"
        :rules="editRolesRules"
      >
        <el-form-item label="角色名" prop="roleName">
          <el-input v-model="addRolesInfo.roleName" ></el-input>
        </el-form-item>
        <el-form-item label="角色描述" prop="roleDesc">
          <el-input v-model="addRolesInfo.roleDesc" ></el-input>
        </el-form-item>
      </el-form>
// 编辑表单验证
      editRolesRules: {
        roleName: [
          { required: true, message: "请输入角色名", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "用户名在2 到 10个字符之间",
            trigger: "blur",
          },
        ],

        roleDesc: [
          { required: true, message: "请输入描述", trigger: "blur" },
          {
            min: 2,
            max: 10,
            message: "描述在2 到 15个字符之间",
            trigger: "blur",
          },
        ],
      },
posted @ 2020-10-26 09:58  HF10  阅读(325)  评论(0)    收藏  举报