Element Plus 组件库 - Form 表单针对数值类型的表单校验观察

Form 表单针对数值类型的表单校验观察

测试代码

<el-form :model="myConfigParams" :rules="myConfigRules" label-width="100px" style="width: 300px">
    <el-form-item label="IP" prop="ip">
        <el-input v-model="myConfigParams.ip" type="text" />
    </el-form-item>
    <el-form-item label="端口" prop="port">
        <el-input v-model.number="myConfigParams.port" type="number" />
    </el-form-item>
</el-form>

const myConfigParams = reactive({
    ip: "",
    port: null,
});

const myConfigRules = reactive({
    port: [
        {
            required: true,
            trigger: "blur",
            validator: (rule, value, callBack) => {
                console.log("当前值：" + value);
                console.log("当前值类型：" + typeof value);
                console.log("是否为 null：" + (value === null));
                console.log("是否为 undefined：" + (value === undefined));
                console.log("是否为空字符串：" + (value === ""));
            },
        },
    ],
});

1-1-1、type="text" + 初始值为 null

<el-input v-model="myConfigParams.port" type="text" />

const myConfigParams = reactive({
    ...
    port: null,
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：null
当前值类型：object
是否为 null：true
是否为 undefined：false
是否为空字符串：false

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123a
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字可以输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
index.vue:30 当前值类型：string
index.vue:31 是否为 null：false
index.vue:32 是否为 undefined：false
index.vue:33 是否为空字符串：true

1-1-2、type="text" + 初始值为 undefined

<el-input v-model="myConfigParams.port" type="text" />

const myConfigParams = reactive({
    ...
    port: undefined,
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：undefined
当前值类型：undefined
是否为 null：false
是否为 undefined：true
是否为空字符串：false

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123a
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字可以输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

1-1-3、type="text" + 初始值为 ""

<el-input v-model="myConfigParams.port" type="text" />

const myConfigParams = reactive({
    ...
    port: "",
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123a
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字可以输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

1-2-1、type="text" + v-model.number + 初始值为 null

<el-input v-model.number="myConfigParams.port" type="text" />

const myConfigParams = reactive({
    ...
    port: null,
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：null
当前值类型：object
是否为 null：true
是否为 undefined：false
是否为空字符串：false

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字无法输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

1-2-2、type="text" + v-model.number + 初始值为 undefined

<el-input v-model.number="myConfigParams.port" type="text" />

const myConfigParams = reactive({
    ...
    port: undefined,
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：undefined
当前值类型：undefined
是否为 null：false
是否为 undefined：true
是否为空字符串：false

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字无法输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

1-2-3、type="text" + v-model.number + 初始值为 ""

<el-input v-model.number="myConfigParams.port" type="text" />

const myConfigParams = reactive({
   ...
    port: "",
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字无法输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

2-1-1、type="number" + 初始值为 null

<el-input v-model="myConfigParams.port" type="number" />

const myConfigParams = reactive({
    ...
    port: null,
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：null
当前值类型：object
是否为 null：true
是否为 undefined：false
是否为空字符串：false

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字无法输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

2-1-2、type="number" + 初始值为 undefined

<el-input v-model="myConfigParams.port" type="number" />

const myConfigParams = reactive({
    ...
    port: undefined,
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：undefined
当前值类型：undefined
是否为 null：false
是否为 undefined：true
是否为空字符串：false

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字无法输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

2-1-3、type="number" + 初始值为 ""

<el-input v-model="myConfigParams.port" type="number" />

const myConfigParams = reactive({
    ...
    port: "",
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字无法输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

2-2-1、type="number" + v-model.number + 初始值为 null

<el-input v-model.number="myConfigParams.port" type="number" />

const myConfigParams = reactive({
    ...
    port: null,
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：null
当前值类型：object
是否为 null：true
是否为 undefined：false
是否为空字符串：false

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字无法输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

2-2-2、type="number" + v-model.number + 初始值为 undefined

<el-input v-model.number="myConfigParams.port" type="number" />

const myConfigParams = reactive({
   ...
    port: undefined,
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：undefined
当前值类型：undefined
是否为 null：false
是否为 undefined：true
是否为空字符串：false

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字无法输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

2-2-3、type="number" + v-model.number + 初始值为 ""

<el-input v-model.number="myConfigParams.port" type="number" />

const myConfigParams = reactive({
   ...
    port: "",
});

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

2. 刷新页面，光标聚焦到输入框，输入内容 123（数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

3. 刷新页面，光标聚焦到输入框，输入内容 123a（含非数字），然后点击输入框外，失焦

# 输出结果

当前值：123
当前值类型：number
是否为 null：false
是否为 undefined：false
是否为空字符串：false

* 非数字无法输入

4. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

# 输出结果

当前值：
当前值类型：string
是否为 null：false
是否为 undefined：false
是否为空字符串：true

小结

1. 刷新页面，光标聚焦到输入框，不输入内容，然后点击输入框外，失焦

此时，得到的当前值都是初始值

2. 刷新页面，光标聚焦到输入框，输入内容，然后点击输入框外，失焦

此时，得到的当前值都是输入的内容

当使用 type="text" 时，                     得到的当前值都是 string 类型，且可以输入非数字
当使用 type="text" + v-model.number 时，    得到的当前值都是 number 类型，且无法输入非数字
当使用 type="number" 时，                   得到的当前值都是 number 类型，且无法输入非数字
当使用 type="number" + v-model.number 时，  得到的当前值都是 number 类型，且无法输入非数字

3. 刷新页面，光标聚焦到输入框，输入内容，删除内容，然后点击输入框外，失焦

此时，得到的当前值都是 ""，且都是 string 类型

数值类型的表单校验对策

1、type="number" + v-model.number + 初始值为 null

<el-input v-model.number="myConfigParams.port" type="number" />

const myConfigParams = reactive({
    ...
    port: null,
});

const myConfigRules = reactive({
    ...
    port: [
        {
            required: true,
            trigger: "blur",
            validator: (rule, value, callBack) => {
                if (value === null || value === "") {
                    callBack("端口不能为空");
                    return;
                }
                if (value < 0 || value > 65535) {
                    callBack("端口不合法");
                    return;
                }
                callBack();
            },
        },
    ],
});

2、type="number" + v-model.number + 初始值为 undefined

<el-input v-model.number="myConfigParams.port" type="number" />

const myConfigParams = reactive({
    ip: "",
    port: undefined,
});

const myConfigRules = reactive({
    port: [
        {
            required: true,
            trigger: "blur",
            validator: (rule, value, callBack) => {
                if (value === undefined || value === "") {
                    callBack("端口不能为空");
                    return;
                }
                if (value < 0 || value > 65535) {
                    callBack("端口不合法");
                    return;
                }
                callBack();
            },
        },
    ],
});

3、type="number" + v-model.number + 初始值为 ""

<el-input v-model.number="myConfigParams.port" type="number" />

const myConfigParams = reactive({
    ...
    port: "",
});

const myConfigRules = reactive({
    ...
    port: [
        {
            required: true,
            trigger: "blur",
            validator: (rule, value, callBack) => {
                if (value === "") {
                    callBack("端口不能为空");
                    return;
                }
                if (value < 0 || value > 65535) {
                    callBack("端口不合法");
                    return;
                }
                callBack();
            },
        },
    ],
});