1

wankeda

2025-04-10 e692b8c296bae952a810688f700b659ae8240a5c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<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 => {
                    const ipAddress = {
                        WCSIP: this.valiFormData.WCSIP,
                        CZZJip: this.valiFormData.CZZJip,
                        CZFJiP: this.valiFormData.CZFJiP,
                    }
                    uni.setStorage({
                        key: 'storage_key_ipAddress',
                        data: ipAddress,
                        success: (res) => {
                            this.$t.message.toast('保存成功');
                            uni.switchTab({
                                url: '/pages/index/index'
                            })
                        }
                    });
                }).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>