<template>
|
<view class="example">
|
<u-form :model="valiFormData" ref="uForm" label-width="180" label-align="right">
|
<u-form-item label="WCSIP:" prop="WCSIP">
|
<u-input v-model="valiFormData.WCSIP" />
|
</u-form-item>
|
<u-form-item label="创智正极IP:" prop="CZZJip">
|
<u-input v-model="valiFormData.CZZJip" />
|
</u-form-item>
|
<u-form-item label="创智负极IP:" prop="CZFJiP">
|
<u-input v-model="valiFormData.CZFJiP" />
|
</u-form-item>
|
</u-form>
|
<u-button @click="submit" type="success">提交</u-button>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
// 校验表单数据
|
valiFormData: {},
|
rules: {
|
WCSIP: [{
|
required: true,
|
message: '请输入WCSIP',
|
// 可以单个或者同时写两个触发验证方式
|
trigger: ['change', 'blur'],
|
}, {
|
// 自定义URL校验函数
|
validator: (rule, value, callback) => {
|
// 简单的URL正则表达式，可根据需求调整
|
const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/;
|
if (value && !urlPattern.test(value)) {
|
callback(new Error('请输入有效的URL地址'));
|
} else {
|
callback();
|
}
|
},
|
trigger: ['change', 'blur']
|
}],
|
CZZJip: [{
|
required: true,
|
message: '请输入创智正极IP',
|
// 可以单个或者同时写两个触发验证方式
|
trigger: ['change', 'blur'],
|
}, {
|
// 自定义URL校验函数
|
validator: (rule, value, callback) => {
|
// 简单的URL正则表达式，可根据需求调整
|
const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/;
|
if (value && !urlPattern.test(value)) {
|
callback(new Error('请输入有效的URL地址'));
|
} else {
|
callback();
|
}
|
},
|
trigger: ['change', 'blur']
|
}],
|
CZFJiP: [{
|
required: true,
|
message: '请输入创智负极IP',
|
// 可以单个或者同时写两个触发验证方式
|
trigger: ['change', 'blur'],
|
}, {
|
// 自定义URL校验函数
|
validator: (rule, value, callback) => {
|
// 简单的URL正则表达式，可根据需求调整
|
const urlPattern = /^(https?|ftp):\/\/[^\s/$.?#].[^\s]*$/;
|
if (value && !urlPattern.test(value)) {
|
callback(new Error('请输入有效的URL地址'));
|
} else {
|
callback();
|
}
|
},
|
trigger: ['change', 'blur']
|
}]
|
}
|
};
|
},
|
methods: {
|
submit() {
|
this.$refs.uForm.validate().then(res => {
|
debugger;
|
if (!res) {
|
this.$t.message.toast('验证不通过');
|
return false;
|
}
|
const ipAddress = {
|
WCSIP: this.valiFormData.WCSIP,
|
CZZJip: this.valiFormData.CZZJip,
|
CZFJiP: this.valiFormData.CZFJiP,
|
}
|
uni.setStorage({
|
key: 'storage_key_ipAddress',
|
data: ipAddress,
|
success: (res) => {
|
// 在需要刷新页面的地方调用
|
location.reload();
|
this.$t.message.toast('保存成功');
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
});
|
}).catch(errors => {
|
console.log('校验失败', errors)
|
})
|
},
|
setModel() {
|
uni.getStorage({
|
key: 'storage_key_ipAddress',
|
success: (res) => {
|
console.log(res.data.WCSIP);
|
this.valiFormData.WCSIP = res.data.WCSIP
|
this.valiFormData.CZZJip = res.data.CZZJip
|
this.valiFormData.CZFJiP = res.data.CZFJiP
|
this.valiFormData = res.data
|
},
|
fail: (err) => {
|
console.log("没有找到存储的IP地址,请重新输入")
|
},
|
});
|
}
|
},
|
// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
|
onReady() {
|
this.$refs.uForm.setRules(this.rules);
|
this.setModel();
|
},
|
}
|
</script>
|
|
<style lang="scss">
|
.example {
|
padding: 15px;
|
background-color: #fff;
|
}
|
</style>
|
