如何阻止多个空格清除表单验证

How can I stop multiple spaces from clearing form validation?

本文关键字：清除 表单 验证 空格 何阻止      更新时间：2023-09-26

我正在研究一个简单的表单和javascript验证函数。我遇到的唯一问题是，多个空格将被读取为有效条目。我需要确保表单实际上是填写的，而不是有人只是在每个字段中放置两个空格并提交表单。我怎样才能阻止这一切的发生?如果第一个字符是空格，是否有某种方法返回false，或者读取任意数量的没有其他字符的空格为false?

使用字符串修剪函数在验证之前修剪字符串。它应该修剪前后空格。我在下面包含了一个示例，您可以在Mozilla Developer Network

中看到更多关于trim文档的文档。

var demoInput = document.getElementById('multipleSpaces');
var demoText = demoInput.value;
var output = document.getElementById('output');
alert('Initial text length: ' + demoText.length + ' 'n trimmed length ' + demoText.trim().length);
<input type='text' value='  ' id='multipleSpaces'/>
<div id='output'></div>

你好，正如Joel提到的，如果你想删除尾随空格，你可以使用.trim()。如果您想将字符串规范化为只有1个空格，可以使用下面的代码片段:

var str = "this     is sparta   ";
    str = str.trim()
    str = str.split(/[ ]{2,}/).join(' ')
//output: "this is sparta"

Regex /[ ]{2,}/查找超过1个空格并拆分字符串，然后.join(' ')将拆分的元素编译成1个字符串。你可以把它缩短为:

str = str.trim().split(/[ ]{2,}/).join(' ')

假设您使用内置约束验证而不是您自己的约束验证，这似乎是<input>元素的pattern属性的一个很好的用例。结合一个required属性，这应该可以完成你想要的，而不需要任何JS:

<form>
    <input
        type="text"
        pattern=".*'S.*"
        title="Must contain non-whitespace characters"
        required>
    <input type="submit" value="Submit">
</form>

检查caniuse以确保该属性在目标环境中有效。

相关文章：