element ui 自定义表单校验 校验IP地址与端口号 VUE

Element UI 提供了一套强大的表单组件，其中可以自定义校验规则来满足特定需求，例如验证 IP 地址和端口号。在 Vue 中，你可以使用 Element UI 的 `validate` 和 `rules` 属性结合自定义的正则表达式或者 JavaScript 函数来实现。

首先，在你的 Vue 组件中，你需要在表单字段上设置验证规则：

<el-form-item label="IP Address" prop="ipAddress">
  <el-input v-model="formData.ipAddress"></el-input>
  <el-form-item-explain slot="custom-message" :message="customValidator('ipAddress') ? '' : '请输入正确的IP地址格式(如：192.168.0.1)'"></el-form-item-explain>
</el-form-item>

<el-form-item label="Port" prop="port">
  <el-input type="number" v-model="formData.port"></el-input>
  <el-form-item-explain slot="custom-message" :message="customValidator('port') ? '' : '请输入合法的端口号(1-65535)'></el-form-item-explain>
</el-form-item>

<script>
export default {
  data() {
    return {
      formData: {
        ipAddress: '',
        port: ''
      },
      // 自定义验证函数
      customValidator(field) {
        const regexIp = /^(\d{1,3}\.){3}\d{1,3}$/; // 正则表达式匹配IPv4地址
        const regexPort = /^(?:[1-9]?\d|1\d\d|2[0-4]\d|25[0-5])$/; // 正则表达式匹配端口

        if (field === 'ipAddress') {
          return regexIp.test(this.formData[field]);
        } else if (field === 'port') {
          return regexPort.test(String(this.formData[field])); // 将可能的字符串转为数字检查
        }
        return true;
      }
    };
  }
};
</script>

在上面的例子中，我们定义了一个名为 `customValidator` 的函数，它接受字段名作为参数并返回一个布尔值。如果输入符合正则表达式的条件，则返回 `true`，反之显示错误消息。记得在 `<el-form-item-explain>` 元素中引用这个自定义验证信息。