el-input输入框怎么限制输入ip

### 实现Element UI `el-input` 输入框仅允许输入 IP 地址

为了确保用户只能在 Element UI 的 `el-input` 组件中输入有效的 IPv4 地址，可以利用正则表达式来进行验证。通过设置 `el-input` 的 `v-model` 和 `:rules` 属性来实现这一功能。

下面是一个完整的解决方案：

#### 使用正则表达式进行 IP 验证

IPv4 地址由四个十进制数构成，每个数值范围为 0 到 255，并且用圆点分隔开。因此，可以通过如下所示的正则表达式模式匹配合法的 IP 地址[^1]：

const ipv4Pattern = /^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;

此正则表达式的含义是：
- `(?:...)` 表示非捕获组；
- `[0-9]` 匹配任意一位数字；
- `{3}` 指定前面的内容重复三次；
- `\.` 转义字符`.`表示实际的小数点；

#### 将其应用于 `el-input`

接下来，在 Vue.js 中定义表单规则并将其绑定到 `el-form-item` 上：

<template>
  <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm">
    <el-form-item label="IP Address" prop="ipAddress">
      <el-input v-model="ruleForm.ipAddress"></el-input>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  data() {
    var validateIp = (rule, value, callback) => {
      if (!ipv4Pattern.test(value)) {
        return callback(new Error('Please enter a valid IP address'));
      }
      callback();
    };
    
    return {
      ruleForm: {
        ipAddress: ''
      },
      rules: {
        ipAddress: [
          { validator: validateIp, trigger: 'blur' }
        ]
      }
    };
  }
};
</script>

上述代码片段展示了如何创建一个带有自定义校验器 `validateIp` 的表单项，该函数会在失去焦点(`trigger:'blur'`)时触发验证逻辑。