如何在Razor页面中使用标签输入组件，实现车牌格式多值输入及验证？

一、基础标签输入组件实现 #

可以结合HTML、JavaScript和Razor语法快速实现支持多车牌输入的标签组件，以下是轻量可行方案：

1. Razor页面前端代码 #

<div class="tag-container">
    <!-- 存放已添加的车牌标签 -->
    <div id="tags" class="d-flex flex-wrap gap-2 mb-2"></div>
    <input type="text" id="plateInput" class="form-control" placeholder="输入车牌（如12A123-22），回车添加" />
</div>

<script>
    const tagsContainer = document.getElementById('tags');
    const plateInput = document.getElementById('plateInput');
    const plateList = []; // 存储已添加的车牌，用于表单提交

    // 回车触发添加标签
    plateInput.addEventListener('keydown', function(e) {
        if (e.key === 'Enter' && this.value.trim()) {
            const plate = this.value.trim();
            if (validatePlate(plate)) {
                addTag(plate);
                this.value = '';
            } else {
                alert('请输入正确的车牌格式（示例：12A123-22）');
            }
        }
    });

    // 添加车牌标签
    function addTag(plateNumber) {
        // 避免重复添加
        if (plateList.includes(plateNumber)) {
            alert('该车牌已添加');
            return;
        }
        plateList.push(plateNumber);
        
        // 创建标签元素
        const tagElement = document.createElement('div');
        tagElement.className = 'badge bg-primary d-flex align-items-center gap-1';
        tagElement.innerHTML = `${plateNumber} <button type="button" class="btn-close btn-close-white btn-sm" onclick="removeTag('${plateNumber}')"></button>`;
        tagsContainer.appendChild(tagElement);
        
        // 添加隐藏输入框，用于表单提交时传递数据到后端
        const hiddenInput = document.createElement('input');
        hiddenInput.type = 'hidden';
        hiddenInput.name = 'PlateNumbers';
        hiddenInput.value = plateNumber;
        tagsContainer.appendChild(hiddenInput);
    }

    // 删除车牌标签
    function removeTag(plateNumber) {
        const index = plateList.indexOf(plateNumber);
        if (index !== -1) plateList.splice(index, 1);
        
        // 删除对应标签和隐藏输入
        const elements = tagsContainer.querySelectorAll(`div.badge:contains('${plateNumber}'), input[value='${plateNumber}']`);
        elements.forEach(el => el.remove());
    }
</script>

2. 后端接收处理 #

在Razor页面的.cs文件中，绑定并接收前端提交的车牌列表：

[BindProperty]
public List<string> PlateNumbers { get; set; } = new List<string>();

public async Task<IActionResult> OnPostAsync()
{
    if (!ModelState.IsValid)
    {
        return Page();
    }
    // 这里编写处理车牌列表的业务逻辑
    return RedirectToPage("./Success");
}

二、车牌格式验证实现 #

你的车牌格式为12A123-22，需自定义正则验证规则，完全不适合使用电话格式验证规则（电话验证逻辑与车牌格式匹配度极低）。

1. 前端验证函数 #

在上述JS代码中添加格式验证函数：

function validatePlate(plate) {
    // 正则规则：2位数字 + 1位大小写字母 + 3位数字 + 连字符 + 2位数字
    const regex = /^\d{2}[A-Za-z]\d{3}-\d{2}$/;
    return regex.test(plate);
}

2. 后端Model验证 #

在后端可以通过正则表达式二次验证，确保数据合法性：

using System.Text.RegularExpressions;

public async Task<IActionResult> OnPostAsync()
{
    var plateRegex = new Regex(@"^\d{2}[A-Za-z]\d{3}-\d{2}$");
    foreach (var plate in PlateNumbers)
    {
        if (!plateRegex.IsMatch(plate))
        {
            ModelState.AddModelError("PlateNumbers", $"车牌「{plate}」格式不正确，需符合12A123-22样式");
            return Page();
        }
    }
    // 后续业务逻辑处理
    return RedirectToPage("./Success");
}

三、关于电话格式验证规则的说明 #

电话格式验证规则主要针对数字、加号、括号等组合，和你需要的「数字+字母+数字-数字」车牌格式完全不匹配，必须使用自定义正则表达式来实现精准验证。

内容的提问来源于stack exchange，提问作者MK-asp.netCoreDeveloper