Question

我正在处理一个必须在提交时验证的网络表单。我有一个名字的字段，在验证时必须遵循两个规则，名称必须至少有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>

Answer 1

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

shouldFailTooShort  = 'ts';
shouldFailSpace  = 'has space';
shouldPass  = 'no-spaces';

validationRule = /^\S{3,}$/;
validationRule.test(shouldFailTooShort) === false;
validationRule.test(shouldFailSpace) === false;
validationRule.test(shouldPass) === true;

使用正则表达式，可以对一个正则表达式检查中执行的字段进行所有验证，如上所述。但是对于可用性，我建议为每个验证要求都有一个规则。然后，不同的验证规则可以产生不同的消息，并且用户不必混淆必须阅读一条且始终相同的消息。

查看my favourite regular expression reference。

修改根据评论中的要求，我在此提出部署解决方案的建议。我建议不要在制作中使用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 />  </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中的实例。

Answer 2

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

Answer 3

可以通过使用Javascript中的单行代码来删除所有文本的空白区域。

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

使用Javascript验证不允许空白

3 个答案: