时间戳

首页 > 解决方案 > 自定义有效性输入框html

html - 自定义有效性输入框html

问题描述

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

我的代码如下：

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

标签： htmlvalidationinputrequiredrequiredfieldvalidator

解决方案

您需要添加客户端代码来支持您想要使用 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("");
    };
}

推荐阅读