HTML5 自定義模式驗證

Question

我正在嘗試為字符串開頭的 3 個字母、然后是逗號、空格和一些單詞的輸入創建驗證。

例如：Coz，你是天才

我為此目的使用此模式， pattern="^[a-zA-Z]{3}[,]{1}[a-zA-Z]{30}"也嘗試了此模式^[a-zA-Z]{3}[, ][a-zA-Z\s]

下面是我的 javascript 用於自定義驗證。

    var data = document.getElementById('sentence');
        data.addEventListener('invalid', function (e) {
            //console.log(data.validity);
            if (data.validity.patternMismatch) {
                e.target.setCustomValidity("Please choose from dropdown");
            } else if (!data.validity.valid) {
                e.target.setCustomValidity("This is not a valid sentence");
            }
            data.addEventListener('input', function (e) {
                e.target.setCustomValidity('');
            });
        }, false);

我想我在逗號和空格之后缺少空格模式。

Answer 1

我不認為瀏覽器的模式屬性完全支持正則表達式，但你的正則表達式應該更接近^[A-Za-z]{3},\s(\w+\s?)+ 。

下面的鏈接很好地解釋了正則表達式，但這里有一個細分。

^[A-Za-z]{3}以 3 個字符開頭

,\s后跟一個逗號和一個空格

(\w+\s?)+后跟一組單詞，然后是一個可選空格。 +僅表示單詞空間組必須出現一次或多次。

例如

regex101.com/r/HOURbf/1