表单 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'，表示在输入框失去焦点时触发校验。

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