需求实战四

效果展示

代码展示

<template>
    <div>
        <div style="display: flex;">
            <div style="display: flex; justify-content: center; align-items: center;">
                <label for="nameInput" style="font-family: Arial; font-size: 20px; font-weight: bold;">姓名:</label>
            </div>
            &nbsp
            &nbsp
            &nbsp
            <div style="display: flex;">
                <a-input id="nameInput" v-model:value="name" placeholder="请输入姓名" class="custom-input" :show-word-limit="true" />
                &nbsp
                &nbsp
                &nbsp
                <a-alert v-if="name === ''" type="error" message="姓名为必须输入选项" show-icon />
                <a-alert v-if="name !== '' && !isValidName" type="error" message="姓名不允许输入数字和特殊符号" show-icon />
            </div>
        </div>
        <br>
        <br>
        <div style="display: flex;">
            <div style="display: flex; justify-content: center; align-items: center;">
                <label for="ageInput" style="font-family: Arial; font-size: 20px; font-weight: bold;">年龄:</label>
            </div>
            &nbsp
            &nbsp
            &nbsp
            <div style="display: flex;">
                <a-input id="ageInput" v-model:value="age" placeholder="请输入年龄" class="custom-input" :show-word-limit="true" />
                &nbsp
                &nbsp
                &nbsp
                <a-alert v-show="age === ''" type="error" message="年龄为必须输入选项" show-icon />
                <a-alert v-show="age !== '' && !isValidAge" type="error" message="年龄只允许输入数字" show-icon />
            </div>
        </div>
        <br>
        <br>
        <div>
            <div style="display: flex; justify-content: center; align-items: center;">
                <a-button type="primary" @click="submit">确认</a-button>
                <a-modal v-model:visible="visible" title="输入不符合要求" @ok="close">
                    <p>您的输入不符合要求</p>
                    <p>请确认姓名不允许输入数字和特殊符号</p>
                    <p>请确认年龄只允许输入数字</p>
                </a-modal>
                &nbsp
                &nbsp
                &nbsp
                <a-button type="primary" @click="clear">清空</a-button>
            </div>
        </div>
        <br>
        <br>
        <br>
        <br>
        <div v-show="judge" >
            <div style="justify-content: center; align-items: center;text-align:center">
                姓名：{{name}}
            </div>
            <br>
            <div style="justify-content: center; align-items: center;text-align:center">
                年龄：{{age}}
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
const name = ref<string>('');
const age = ref<string>('');
const judge = ref<boolean>(false);
const visible = ref<boolean>(false);

const isValidName = computed(() => {
    const regex = /^[^\d\W]+$/;
    return regex.test(name.value);
});

const isValidAge = computed(() => {
    const regex = /^\d+$/;
    return regex.test(age.value);
});

const close =()=>{
    visible.value=false;
}
const submit = () => {
    if (!isValidName.value || !isValidAge.value) {
        visible.value = true;
    } else {
        visible.value = false;
        judge.value = true;
    }
}

const clear = () => {
    judge.value = false;
    age.value = '';
    name.value = '';
}
</script>
<style scoped>
:deep(.custom-input) {
    border: 1px solid gray;
    width: 250px;
    border-radius: 10px;
    padding: 8px;
}
:deep(label) {
    margin-right: 10px;
}
</style>

代码解释