Element-UI中el-form 表单如何校验

Posted 2021-06-26 liyunlonggg

Element-UI

Element-UI官方

表单 简单验证

<el-form >
  <el-form-item>
    <el-input type="age" v-model.number="numberValidateForm.age" autocomplete="off"></el-input>
  </el-form-item>
</el-form>

第一种：在el-form-item单个添加验证

这种方式适用于需要个别检验的字段，或者表单字段有变动的校验；

下面举个例子（验证用户名 不能为空）

<el-form-item label="用户名"  :prop="userName" :rules="[{ required: true, message: '请输入用户名', trigger: 'blur' }]">
    <el-input v-model="userName" :maxlength="16" placeholder clearable></el-input>
</el-form-item>

第二种：在表单上加多个验证

这种方式适用于表单全部字段校验或需要校验字段类型比较简单的数据类型

做法：需要在el-form-item标签中加入 :rules=’'rules ‘’ ，然后在data()中写入rule{添加每个表单的验证}

下面举个例子（验证用户名和密码 不能为空）

<el-form   :model="formData" :rules="dateRule" ref="form">
    <el-form-item label="用户名" prop="userName">
        <el-input v-model="formData.userName"  type="password" placeholder="请输入用户名" clearable></el-input>
    </el-form-item>
    <el-form-item label="密码" prop="userPass">
       <el-input v-model="formData.userPass" :maxlength="18" placeholder="请输入密码" clearable></el-input>
    </el-form-item>
</el-form>

data中

 rule: {
           userName:  loginName: [
          { required: true, message: "用户名不能为空", trigger: "blur" }
        ],
        userPass: [
          { required: true, message: "密码不能为空", trigger: "blur" }
        ]
      }

rules 表单验证规则

required true 必填项
message 提示语
trigger 在失去焦点时触发
maxLength 字符串的最大长度
min 和 max 必须同时给 min < max
type 类型