vue+elementui表单验证规则举例

<template>

<div>

<el-form

            ref="ruleForm"

            :model="ruleForm"

            label-width="117px"

            :rules="rules"

>

<div class="company-name">

                <el-form-item label="公司名称" prop="companyName">

                  <el-input v-model="ruleForm.companyName"></el-input>

                </el-form-item>

              </div>

</el-form>

</div>

</template>

<script>

export default {

  data() {

    var validateCompanyName = (rule, value, callback) => {

      if (value === "") {

        callback(new Error("请输入公司名称"));

      }

    };

return {

ruleForm: {

        companyName: "",

},

rules: {

        companyName: [

          {

            min: 3,

            max: 10,

            message: "长度在 3 到 10 个字符",

            trigger: "blur",

          },

          { validator: validateCompanyName, trigger: "blur" },

        ],

}

}

</script>

trigger: "blur"表示在失去焦点时进行验证el-input中的数据是否符合rules中的条件

callback(new Error("请输入公司名称"));表示错误回调函数，如果检查数据不符合规则则会以红色字体显示在el-input输入框下面，警告语句可以根据需要进行位置和长度的调整

提示：以上代码不能直接复制粘贴