IsNullOrEmpty属性

Question

在HTML中存在

必填项

属性，该属性强制用户在提交之前输入某些日期。但是用户只能输入空格。是否有检查类型的属性，内容是回发前的空白。在需要的态度，它的工作类似于string.IsNullOrWhitespace在c#。

Answer 1

我花了一段时间才使Regex正确，但是下面的规则只在没有空格的情况下创建选择规则：

<input type="text" pattern=".\S*" />

正如@Paul S.所指出的，这并不是检查第一个字符，因此下面将这样做：

<input type="text" pattern="^.\S*" />

而且，这确实只适用于HTML5浏览器，但是由于这个问题包含了required，我想如果有一些后遗症的话。

Answer 2

使用模式属性，您可以使它只接受空格。

​

<form action="?" method="post"> <!-- required for snippet -->
  <input type="text" required pattern="\s*"/>
</form>

​

但是，请注意，required阻止提交空输入(即"null")，因此为了允许删除所需的内容，该模式正在进行需求检查。

​

<form action="?" method="post"> <!-- required for snippet -->
  <input type="text" pattern="\s*"/>
</form>

​

最后，仍然在服务器上执行验证，因为您永远不能假设客户端是安全的源，或者相反，始终假定客户端试图攻击您。

如果不能假定HTML5支持，则可以使用JavaScript对行为进行调整，这将在必要的情况下看起来如下所示

if(!('required' in document.createElement('input'))) {
    window.addEventListener('submit', function (e) {
        var form = e.target, 
            inputs = form.getElementsByTagName('input'),
            i;
        for (i = 0; i < inputs.length; ++i)
            if (inputs[i].getAttribute('required'))
                if (!inputs[i].value)
                    e.preventDefault(); // + warn?
    });
}

和模式

if(!('pattern' in document.createElement('input'))) {
    window.addEventListener('submit', function (e) {
        var form = e.target, 
            inputs = form.getElementsByTagName('input'),
            i,
            re;
        for (i = 0; i < inputs.length; ++i)
            if (re = inputs[i].getAttribute('pattern')) {
                re = new RegExp('^' + re + '$');
                if (!re.test(inputs[i].value))
                    e.preventDefault(); // + warn?
            }
    });
}

还可以将useCapture设置为true，以便侦听器跳过处理程序队列中的处理程序队列，在提交被阻止的情况下，可以防止事件到达其他处理程序。

Answer 3

​

<

<form onsubmit="alert('Submitted.');return false;">		          <input type="text" required="" pattern="(?:19|20)[0-9]{2}-(?:(?:0[1-9]|1[0-2])-(?:0[1-9]|1[0-9]|2[0-9])|(?:(?!02)(?:0[1-9]|1[0-2])-(?:30))|(?:(?:0[13578]|1[02])-31))" value="" name="dates_pattern2" id="dates_pattern2" list="dates_pattern2_datalist" placeholder="Try it out." autocomplete="off">		          <input type="submit" value="»">		          <datalist id="dates_pattern2_datalist">		          </datalist>		        </form>

​