element-ui使用form表单校验

Posted 2021-07-08 fengshaopu

elemeng-ui 中el-form 表单如何校验：

在el-form 上main可以用model，rules，
model用于双向绑定，**rules（瑞ve死）**用于校验

     <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
      </el-form>

然后el-form-item上有 prop属性用于在data中定义的校验名字放到这里

     <el-form-item label="账号" prop="username">
       <el-input v-model="ruleForm.username"></el-input>
     </el-form-item>
     data(){
      ruleForm: {
        username: "",
        password: ""
      },
        rules: {
        username: [
          { required: true, message: "请输入账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "change" }]
      }
     }

校验有几个属性：

required（瑞快额的）用来是否填写，
message（买涩子）表单验证不通过时给于提示，
trigger（吹格）是用于在什么时候触发
min最小值，max最大值