elementui弹框的输入框校验;element输入框必填

在使用ElementUI框架时，经常会遇到需要在弹框中对输入框进行校验的情况，特别是当输入框是必填项时。本文将介绍如何在ElementUI的弹框中实现输入框的必填校验，并提供多种解决方案。

1. 使用Form表单校验

ElementUI 提供了强大的表单校验功能，通过 el-form 和 el-form-item 组件可以轻松实现输入框的必填校验。

1.1 基本示例

首先，我们需要定义一个表单模型和校验规则：

html

  
    
      
        
      
    
    <span class="dialog-footer">
      取 消
      确 定
    </span>
  
</p>


export default {
  data() {
    return {
      dialogVisible: false,
      form: {
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入姓名', trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
          this.dialogVisible = false;
        } else {
          console.log('校验失败!');
          return false;
        }
      });
    }
  }
};


<p>

1.2 解释

el-dialog 组件用于创建弹框。
el-form 组件用于包裹表单项，并定义表单模型和校验规则。
el-form-item 组件用于定义具体的表单项，prop 属性用于指定校验规则。
el-input 组件用于创建输入框，v-model 绑定表单模型。
submitForm 方法用于提交表单并触发校验，如果校验通过则关闭弹框，否则提示校验失败。

2. 使用自定义校验函数

除了使用内置的校验规则，我们还可以通过自定义校验函数来实现更复杂的校验逻辑。

2.1 自定义校验示例

html

  
    
      
        
      
    
    <span class="dialog-footer">
      取 消
      确 定
    </span>
  
</p>


export default {
  data() {
    const validateName = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入姓名'));
      } else {
        callback();
      }
    };
    return {
      dialogVisible: false,
      form: {
        name: ''
      },
      rules: {
        name: [
          { validator: validateName, trigger: 'blur' }
        ]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('提交成功!');
          this.dialogVisible = false;
        } else {
          console.log('校验失败!');
          return false;
        }
      });
    }
  }
};


<p>

2.2 解释

validateName 是自定义的校验函数，接收三个参数：rule（当前规则）、value（当前值）和callback（回调函数）。
如果 value 为空，则调用 callback(new Error('请输入姓名')) 触发校验错误。
否则，调用 callback() 表示校验通过。

3. 使用外部库进行校验

如果项目中已经引入了其他校验库（如 Vuelidate 或者 VeeValidate），也可以利用这些库来实现输入框的校验。

3.1 使用Vuelidate示例

假设已经安装了 Vuelidate：

bash npm install vuelidate

然后在组件中使用：

html

  
    
      
        
        <p class="error">{{ errors.first('name') }}</p>
      
    
    <span class="dialog-footer">
      取 消
      确 定
    </span>
  
</p>


import { validationMixin } from 'vuelidate';
import { required } from 'vuelidate/lib/validators';

export default {
  mixins: [validationMixin],
  data() {
    return {
      dialogVisible: false,
      form: {
        name: ''
      }
    };
  },
  validations: {
    form: {
      name: { required }
    }
  },
  methods: {
    submitForm() {
      this.$v.$touch();
      if (!this.$v.$invalid) {
        alert('提交成功!');
        this.dialogVisible = false;
      } else {
        console.log('校验失败!');
      }
    }
  }
};



.error {
  color: red;
}


<p>