port端口号正则表达式:/^(([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))$/
vue form表单对port端口号验证,代码如下:
<template>
<div>
<el-form v-model="form" :rules="rules" ref="form">
<el-form-item label="端口号" prop="port">
<el-input type="number" v-model.trim="form.port"
placeholder="端口号"
></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="saveForm('form')">保存</el-button>
<el-button @click="cancelCreate('form')">取消</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default {
data() {
let validatePort = (rule, value, callback) => {
let reg = /^(([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-5]))$/;
if (value == '') {
return callback(new Error('请输入端口号'))
} else if (reg.test(value) == false) {
callback(new Error('请输入正确的端口号'))
} else {
callback()
}
}
return {
form: {
port: ''
},
rules: {
port: [{
required: true, validator: validatePort, trigger: ['blur']
}]
},
}
},
methods: {
// 表单提交
saveForm(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
// 调用api
}
})
},
// 取消表单
cancelCreate(formName) {
this.cancelForm(formName);
},
// 重置表单
cancelForm(formName) {
this.$refs[formName].resetFields();
},
}
}
</script>