Question

我试图获取用户名＆＃34;用户名＆＃34;和＃34;密码＆＃34;在提交表单之前验证其中是否有信息的字段。

我需要添加到我的HTML和JavaScript中才能使它们正常工作！如果你想推荐一个新的JavaScript，请做！

HTML：

<form action="validateForm.html" id="registrationForm">

    <label for="username" id="usernameLabel">* Username:</label>

    <input type="text" name="username" id="username" value="Your username" />

    <div id="usernameError" style="display:none"></div>
    <br/><br/>

    <label for="password" id="passwordLabel">* Password:</label>

    <input type="password" name="password" id="password" />

    <div id="passwordError" style="display:none"></div>
    <br/><br/>

    <input type="submit" value="Submit Form" id="submit" />
</form>

的JavaScript

＆＃13;

function validateForm()
{
	if(!document.getElementByName("username"))
	{
		alert("Username field is required!");
	}

	if(!document.forms[0].username){
		alert("Username field is required!");
	}

	if(!document.for (var i = username.length - 1; i >= 0; i--) {
		alert("Username field is required!")
	};)

}

＆＃13;

Answer 1

一种方法是通过id获取输入，然后验证其值

<强> HTML

<input type="text" id="username" />
<input type="password" id="password" />

<强> JS

function validateForm()
{
    if(!document.getElementById("username").value) // true if input value is null, undefined or ""
    {
        alert("Username field is required!");
    }
    else if(!document.getElementById("password").value)
    {
        alert("Username field is required!");
    } 
}

（我强烈建议您使用比JS警报更有吸引力的方式为用户提供反馈）

Answer 2

我认为所有这些检查在某些方面是不正确的，让我们从第一个检查开始：

if(!document.getElementByName("username"))
{
    alert("Username field is required!");
}

它是document.getElementsByName()（注意复数）
该函数返回一个元素数组，因此您仍然需要检查所需的值（可能为0）
这将是真实的，因为该字段存在，您需要检查输入中的值，但现在您只是检查输入的存在。

下一个是类似的：

if(!document.forms[0].username){
    alert("Username field is required!");
}

您正在检查字段的存在，而不是其值
建议不要选择此类型，您应该更好地使用document.getElementBy...。

最后：

if(!document.for (var i = username.length - 1; i >= 0; i--) {
    alert("Username field is required!")
};)

看起来你试图制作一个for循环但是从上面复制粘贴并弄得一团糟......甚至不去试图理解为什么循环。

<强>建议：

使用属性id并使用document.getElementById()
要检查字段是否包含内容，请检查其值：.value
为表单（onsubmit="validateForm()"）
如果其中一个字段不正确，则使表单验证程序返回false（否则即使字段不正确也会发送表单）
可选：使用HTML5 required属性。

所以函数看起来像：

function validateForm()
{
    if(document.getElementById("username").value == "")
    {
        alert("Username field is required!");
        return false;
    }

    // check the other fields
    // .....
}

Answer 3

如果您需要通过名称获取 DOM ，则表示它将返回Array，因此您需要通过

获取

if(!document.getElementsByName("username")[0].value == ""){
//do ur stuff
}

或

if(!document.getElementById("username").value == ""){
//do ur stuff
}

Answer 4

我可以建议这样的事情：

HTML：

<form action="validateForm.html" onSubmit="return validateForm(this)">

    <label for="username" name="usernameLabel">* Username:</label>

    <input type="text" name="username" id="username" placeholder="Your username" />

    <div id="usernameError" style="display:none"></div>
    <br/><br/>

    <label for="password" name="passwordLabel">* Password:</label>

    <input type="password" name="password" />

    <div id="passwordError" style="display:none"></div>
    <br/><br/>

    <input type="submit" value="Submit Form" />
</form>

JS：

function isEmpty (field) {
    return field.value === "";
}

function validateForm (form) {
    // assume the form to be valid
    var isValid = true;
    // create a variable to store any errors
    var errors = "";
    // check if the username is empty
    if(isEmpty(form.username)) {
        // our assumption is incorrect, the form is invalid
        isValid = false;
        // append the error message to the string
        errors += "Username field is required!\n";
    }
    if (isEmpty(form.password)) {
        isValid = false;
        errors += "Password field is required!\n";  
    }
    // display the errors if the form is invalid
    if (!isValid) {
        alert(errors);
    }
    return isValid;
}

这样，您将表单直接传递给validateForm函数，并可以使用其名称属性轻松访问每个字段。然后，您可以通过确定其值包含的内容来检查它们是否为空。

Javascript验证噩梦

4 个答案: