不允许使用Javascript验证的空白空间

Not Allowing Whitespace With Javascript Validation

本文关键字：空白 空间 验证 Javascript 不允许      更新时间：2023-09-26

我正在处理一个必须在提交时进行验证的web表单。我有一个名字字段，在验证时必须遵循两条规则，名字必须至少有3个字母，并且任何字符之间都不能有空格。我已经让它在名称太短时显示错误消息，但我不知道如何不允许空白。

我如何验证这一点，以便使用javascript在任何字符之间都没有空格？

这是我到目前为止的代码：

<html>
    <head>
        <title>Project 5</title>
    </head>
    <body>
        <form name="myForm" id="myForm" onsubmit="return validateForm()">
            First Name: <input type="text" id="name"> <br>
            Age: <input type="text" id="age"> <br>
            Street Address: <input type="text" id="address"> <br>
            State: <select>
                <option value="la">LA</option>
                <option value="tx">TX</option>
                <option value="ok">OK</option>
                <option value="mi">MI</option>
                <option value="az">AZ</option>
            </select> <br>
            Login Password: <input type="password" id="password"> <br>
            <input type="submit" value="Submit"> <br>
        </form>
        <script type="text/javascript">
            function validateForm() {
                return checkName();
            }
            function checkName() {
                var x = document.myForm;
                var input = x.name.value;
                if(input.length < 3) {
                    alert("Please enter a name with at least 3 letters");
                    return false;
                }
                else if(input.length >= 3) {
                }
            }
        </script>
    </body>
</html>

有一个选项，只需使用Javascript中的一行代码就可以删除所有文本的空白。

text=text.split(' ').join('');  // this will remove all the white space in your text.

我建议使用正则表达式进行表单输入验证。检查以下示例：

shouldFailTooShort  = 'ts';
shouldFailSpace  = 'has space';
shouldPass  = 'no-spaces';
validationRule = /^'S{3,}$/;
validationRule.test(shouldFailTooShort) === false;
validationRule.test(shouldFailSpace) === false;
validationRule.test(shouldPass) === true;

使用正则表达式，可以在一次正则表达式检查中对字段执行所有验证，如上所述。然而，对于可用性，我建议每个验证需求都有一条规则。然后，不同的验证规则可以产生不同的消息，用户不会因为必须阅读一条始终相同的消息而感到困惑。

看看我最喜欢的正则表达式引用。

编辑：根据评论要求，我在此提出部署该解决方案的建议。我建议在生产中不要使用alert函数，而是在页面本身显示消息，例如在span元素中。

HTML:

<form name="myForm" id="myForm" onsubmit="return validateForm();">
    First Name: <input type="text" id="name" /> <br />
    <span id="nameErrMsg" class="error"></span> <br />
    <!-- ... all your other stuff ... -->
</form>
<button id="validateTestButton" value="Validate now" onclick="validateForm();">Validate now</button>

JavaScript:

validateForm = function () {
    return checkName();
}
function checkName() {
    var x = document.myForm;
    var input = x.name.value;
    var errMsgHolder = document.getElementById('nameErrMsg');
    if (input.length < 3) {
        errMsgHolder.innerHTML =
            'Please enter a name with at least 3 letters';
        return false;
    } else if (!(/^'S{3,}$/.test(input))) {
        errMsgHolder.innerHTML =
            'Name cannot contain whitespace';
        return false;
    } else {
        errMsgHolder.innerHTML = '';
        return undefined;
    }
}

查看jsfiddle中的实际示例。

for (var i=0, len = string.length; i<len; ++i) {
    if (string.charAt(i) === ' ') {
        alert('Name cannot have spaces!');
        break;
    }
}
相关文章：