526互联

element-ui表单校验|标红提示

发布时间 2023-12-12 15:37:01作者: 朝颜浅语

elementUI表单校验

1.表单上加rules {object}（常用）

增加普通校验规则

<el-form :model="form" :rules="rules" ref="form">
  <el-form-item label="姓名：" :label-width="formLabelWidth" prop="uname">
    <el-input v-model="form.uname" placeholder="请输入姓名" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="性别：" :label-width="formLabelWidth" prop="usex">
    <el-radio v-model="form.usex" label="男">男</el-radio>
    <el-radio v-model="form.usex" label="女">女</el-radio>
  </el-form-item>
  <el-form-item label="班级：" v-if="!form.power" :label-width="formLabelWidth" prop="class">
    <el-select v-model="form.uclass" placeholder="请选择班级">
      <el-option label="一班" value="一班"></el-option>
      <el-option label="二班" value="二班"></el-option>
      <el-option label="三班" value="三班"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="密码：" :label-width="formLabelWidth" prop="upassword">
    <el-input type="password" v-model="form.upassword" placeholder="请输入密码" autocomplete="off"></el-input>
  </el-form-item>
  <el-form-item label="确认密码：" :label-width="formLabelWidth" prop="upassword1">
    <el-input type="password" v-model="form.upassword1" placeholder="再次输入密码" autocomplete="off"></el-input>
   </el-form-item>
</el-form>

这种方式需要在data()中写入rule{},对于需要校验字段prop中的如uname写上验证规则，如下：

  data() {
    return {
      // 表单规则
      rules: {
        uid: [{ required: true, message: '请输入学号', trigger: 'change' }],
        uname: [
            { required: true, message: '请输入姓名', trigger: 'change' },
            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        usex: [{ required: true, message: '请输入性别', trigger: 'change' }],
        uclass: [
          { required: true, message: '请输入班级', trigger: 'change' },
          // { validator: compareTime, trigger: "change" },
        ],
        upassword: [{ required: true, message: '请输入密码', trigger: 'change' }],
        upassword1: [{ required: true, message: '请再次输入密码', trigger: 'change' }],
      },
    }
  }

增加详细校验规则

如：

data() {
      var checkAge = (rule, value, callback) => {
        if (!value) {
          return callback(new Error('年龄不能为空'));
        }
       // 比较结束时间是否满足条件
      var compareTime = (rule, value, callback) => {
        if (this.form.endTime > this.time && this.form.endTime > this.form.startTime) {
            callback()
		 } else {
          callback(new Error('结束时间应晚于当前或开始时间'))
       	 }
      },
      };
      return {
        ruleForm: {
          pass: '',
          checkPass: '',
          age: ''
        },
        rules: {
          pass: [
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { validator: validatePass2, trigger: 'blur' }
          ],
          age: [
            { validator: checkAge, trigger: 'blur' }
          ]
        }
      };
    },

2.在el-form-item单个添加

<el-form-item label="电话号码" class="el-form-item--small has-error" :prop="phoneNum" :rules="[{ required: true, message: '请输入电话号码', trigger: 'blur' }]">
    <el-input v-model="v.phoneNum" :maxlength="11" placeholder clearable></el-input>
</el-form-item>

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