el-input 链接校验

你可以使用 Vue.js 的自定义指令来实现输入框链接校验。以下是一个简单的例子：

首先，在你的 Vue 模板中，给输入框添加 v-link-validator 指令：

<el-input v-link-validator></el-input>

然后，在你的 Vue 组件中，注册这个指令：

Vue.directive('link-validator', {
  bind: function (el, binding, vnode) {
    el.addEventListener('blur', function (event) {
      // 获取输入框的值
      var link = el.value.trim();

      // 正则表达式校验链接格式
      var regex = /^((http|https):\/\/)?([\w-]+\.)+[\w-]+(\/[\w-.\/?%&=]*)?$/;
      if (!regex.test(link)) {
        // 如果链接格式不正确，弹出提示
        alert('请输入正确的链接格式！');
        el.value = '';
      }
    });
  }
});

这个指令会在输入框失去焦点时进行链接校验。如果链接格式不正确，会弹出一个提示，并清空输入框的值。你可以根据需求，修改校验逻辑和提示信息。

相关问题

表单 el-form 中el-input 链接校验

要在表单中使用 el-input 进行链接校验，需要使用 el-form 中的自定义校验规则（custom validator）功能。

首先，在 el-form 中定义一个自定义校验规则，在该规则中使用正则表达式对输入值进行校验。例如，以下代码将校验输入的值是否为链接：

<el-form :model="form" :rules="rules">
  <el-form-item label="链接">
    <el-input v-model="form.link"></el-input>
  </el-form-item>
</el-form>

data() {
  return {
    form: {
      link: ''
    },
    rules: {
      link: [
        { required: true, message: '请输入链接', trigger: 'blur' },
        {
          validator: (rule, value, callback) => {
            const pattern = /^https?:\/\/[\w\-]+(\.[\w\-]+)+[/#?]?.*$/;
            if (value && !pattern.test(value)) {
              callback(new Error('请输入有效的链接'));
            } else {
              callback();
            }
          },
          trigger: 'blur'
        }
      ]
    }
  };
}

在上述代码中，自定义校验规则使用 validator 函数进行校验。该函数接受三个参数：rule、value 和 callback。其中，rule 是当前校验规则的配置对象，value 是当前输入框的值，callback 是校验结果的回调函数。在 validator 函数中，使用正则表达式对输入值进行校验，如果校验失败，则调用 callback 函数返回一个 Error 对象，否则调用 callback 函数不带参数即可。在 el-form-item 中设置 trigger 属性为 'blur'，表示在输入框失去焦点时触发校验。

这样，当用户在输入框中输入链接时，如果链接不符合正则表达式的规则，表单会提示用户输入有效的链接。

我的问题是关于 Element Plus 的 el-input 组件的校验功能。具体来说，我想知道如何在用户点击确认按钮时，显示 el-input 的校验功能，而在 el-input 隐藏时不进行校验。

好的，针对你的问题，Element Plus 的 el-input 组件提供了 validate 方法，可以手动触发校验。你可以在确认按钮的点击事件中，先判断 el-input 是否显示，若显示则调用 validate 方法进行校验，若隐藏则不进行校验。

具体的代码实现可以参考以下示例：

<template>
  <div>
    <el-input v-model="inputValue" ref="input" :rules="rules" />
    <el-button @click="handleSubmit">确认</el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: '',
      rules: [
        { required: true, message: '请输入内容', trigger: 'blur' }
      ]
    }
  },
  methods: {
    handleSubmit() {
      // 判断 el-input 是否显示
      if (this.$refs.input.visible) {
        // 显示则进行校验
        this.$refs.input.validate(valid => {
          if (valid) {
            // 校验通过，执行提交操作
            this.submitData()
          }
        })
      } else {
        // 隐藏则直接执行提交操作
        this.submitData()
      }
    },
    submitData() {
      // 执行提交操作
      // ...
    }
  }
}
</script>

在上述示例中，我们通过 ref 属性获取 el-input 组件的实例，并在点击确认按钮时调用 validate 方法进行校验。同时，在 el-input 隐藏时，我们直接执行提交操作，不进行校验。