输入模式，至少1个非空格字符。

Question

我想将以下内容重写为HTML模式：

if (/\S/.test(myString)) {
    // string is not empty and not just whitespace
}

因此

<input pattern="\S" required">

if ($('form :invalid'))
    console.log('empty');
else
    console.log('has non-whitespace char');

我的问题是我的模式与测试字符串不一样。我想检查是否至少有1个非空格字符。

- ditto

---

那么，正确的字符串是至少有一个非空格字符的字符串吗？ - Wiktor Stribiżew

Answer 1

pattern属性需要完整的字符串匹配，并且模式会自动锚定（无需使用^和$）。因此，要求至少1个非空格，请使用

pattern="[\s\S]*\S[\s\S]*"

由于您正在验证多行文本（即包含换行符的文本），因此需要使用[\s\S]或[^]结构来匹配它们。

pattern属性仅适用于<input>元素。

要验证textarea字段，可以创建自定义的pattern属性验证：

$('#test').keyup(validateTextarea);

function validateTextarea() {
        var errorMsg = "Please match the format requested.";
        var textarea = this;
        var pattern = new RegExp('^' + $(textarea).attr('pattern') + '$');
        var hasError = !$(this).val().match(pattern); // check if the line matches the pattern
         if (typeof textarea.setCustomValidity === 'function') {
            textarea.setCustomValidity(hasError ? errorMsg : '');
         } else { // Not supported by the browser, fallback to manual error display
            $(textarea).toggleClass('error', !!hasError);
            $(textarea).toggleClass('ok', !hasError);
            if (hasError) {
                $(textarea).attr('title', errorMsg);
             } else {
                $(textarea).removeAttr('title');
             }
         }
         return !hasError;
    }

:valid, .ok {
    background:white;
    color: green;
}
:invalid, .error {
    background:yellow;
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
    <textarea name="test" pattern="[\S\s]*\S[\S\s]*" id="test"></textarea>
    <input type="submit" />
</form>

- Wiktor Stribiżew

---

http://jsfiddle.net/4ckz29Lr/1/ 这似乎没有正常工作。如果文本区域只是空格，则应该失败。 - ditto

如果您输入空格和其他非空格字符，则应该失败。目前，即使只有一个空格，文本区域也会被视为有效。 :( - ditto

HTML5的textarea元素不支持pattern属性。因此，这应该使用JQuery来完成。你只问了关于<input>元素的问题，所以我发布了对<input>有效的内容... - Wiktor Stribiżew