自定义有效性输入框html

Question

我正在尝试使用带有两个条件的输入类型文本框来创建表单。1）验证空白字段。2）不允许使用空格。我已经添加了模式，当空框时，一切正常，它显示请填写空白字段，当用户在用户名中放置空格时，它显示请匹配所要求的格式，但是问题是我正在尝试用不允许使用空格替换默认的请匹配请求的格式。但是我无法在任何地方找到任何解决方案。

我的代码在下面列出：

<form method="post">
<input type="text" name="username" pattern="\S+" required >
</form>

Answer 1

您需要添加客户端代码来支持您想要对setCustomValidity进行的操作，并对其找到的值进行检查。像这样：

    var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
    elements[i].oninvalid = function(e) {

        e.target.setCustomValidity("");
        if (!e.target.validity.valid) {
                if ( e.target.value.match(/[\s\t]+/i) ) {
                e.target.setCustomValidity("White space not allowed");
            } else {
                e.target.setCustomValidity("This field cannot be left blank");
            }

        }
    };
    elements[i].oninput = function(e) {
        e.target.setCustomValidity("");
    };
}