标签：el vue elementui rules 表单 ruleForm callback trigger blur

<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输入框下面，警告语句可以根据需要进行位置和长度的调整

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

标签：el,vue,elementui,rules,表单,ruleForm,callback,trigger,blur
来源： https://blog.csdn.net/qq_33960741/article/details/114028034

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。