elementui表单校验输入的单个或多个IPv4地址、IPv4地址段是否合法
时间: 2023-08-14 20:04:40 浏览: 93
好的,以下是使用ElementUI进行表单校验输入的单个或多个IPv4地址、IPv4地址段是否合法的方法:
1. 校验单个IPv4地址:
```
<el-form-item label="IPv4地址" prop="ip">
<el-input v-model="ip" placeholder="请输入IPv4地址"></el-input>
<span slot="append">例如:192.168.0.1</span>
<span slot="prepend">IP地址</span>
<el-form-item>
<el-button type="primary" @click="checkIP">校验</el-button>
</el-form-item>
</el-form-item>
<script>
export default {
data() {
return {
ip: ''
}
},
methods: {
checkIP() {
const reg = /^((([1-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5]))$/
if (reg.test(this.ip)) {
this.$message.success('IPv4地址格式正确')
} else {
this.$message.error('IPv4地址格式错误')
}
}
}
}
</script>
```
2. 校验IPv4地址段:
```
<el-form-item label="IPv4地址段" prop="ipRange">
<el-input v-model="ipRange" placeholder="请输入IPv4地址段"></el-input>
<span slot="append">例如:192.168.0.1-192.168.0.100</span>
<span slot="prepend">IP地址段</span>
<el-form-item>
<el-button type="primary" @click="checkIPRange">校验</el-button>
</el-form-item>
</el-form-item>
<script>
export default {
data() {
return {
ipRange: ''
}
},
methods: {
checkIPRange() {
const reg = /^((([1-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5]))-((([1-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5])\.){3}([1-9]|[1-9]\d|1\d{2}|2[0-4]\d|25[0-5]))$/
if (reg.test(this.ipRange)) {
this.$message.success('IPv4地址段格式正确')
} else {
this.$message.error('IPv4地址段格式错误')
}
}
}
}
</script>
```
以上代码可以在ElementUI的表单中校验输入的单个或多个IPv4地址、IPv4地址段是否合法。
阅读全文