Question

我编写了一个非常简单的javascript表单，但是我无法让它正常运行。正如您将在下面的代码和＆amp;中看到的那样。小提琴。我需要表单来验证所有部分，并确保在名字和姓氏框中只添加字母数字信息。此外，我想形成在1或所有字段中没有输入任何内容时返回错误。

我是Javascript编码的新手，所以有人可以帮我解决这个问题。我相信会有一个快速简便的解决方案。

提前致谢。

https://jsfiddle.net/cal122/juwt6wvv/6/

function ValidationEvent() {

    var name = document.getElementById("name").value;
    var email = document.getElementById("name2").value;
    var contact = document.getElementById("message").value;

    if (name != '' && name2 != '' && message != '') {
        if (/^([\w-\.]+ $/.test(name)) {
            alert("All type of validation has done on OnSubmit event.");
            return true;
        } else {
            alert("Please provide valid first name!");
            return false;
        }
    } else {
        alert("Please provide valid second name!");
        return false;
    }
    } else {
        alert("Please put some text in the message box");
        return false;
    }
    } else {
        alert("All fields are required.....!");
        return false;
    }
}

.main {
	width:333px;
	padding:10px;
	margin-top:20px;
	margin-right:-28px;
	border:1px solid black;
	float:right;
	z-index:-1;
}
input[type=text] {
	width:100%;
	height:40px;
	padding:5px;
	margin-bottom:25px;
	margin-top:5px;
	border:2px solid #ccc;
	color:#4f4f4f;
	font-size:16px;
}

label {
	color:black;
	font-size:14px;
}
input[type=submit] {
	font-size:18px;
	background: #CF1559;
	cursor:pointer;
	width:40%;
}
input[type=submit]:hover {
	background: #fff;
}

<form action="#" method="post" onsubmit="return ValidationEvent()">
<label>First Name:</label>
<input id="name" name="name" placeholder="Enter your name" type="text">
<label>Last Name:</label>
<input id="name2" name="name2" placeholder="Enter your last name" type="text">
<label>Message:</label>
<input id="Message" name="Message" placeholder="" type="text">
<input type="submit" value="Submit">
</form>

Answer 1

主要问题是您没有正确使用正则表达式。

这一行：

if (name == /^([\w-\.]+ $) {

应该是这样的：

if (/^([\w-\.]+)$/.test(name)) {

请注意，正则表达式包含在斜杠（/ /）中。我们还使用test函数来确定name对象是否找到RegExp的值。

我建议在MDN上阅读正则表达式：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Regular_Expressions

此外，还有许多在线RegExp测试工具可以帮助您尝试模式。我喜欢使用RegExp 101：https://regex101.com/

第二个问题是if / else逻辑非常破碎：

if (name != '' && name2 != '' && message != '') {
    if (/^([\w-\.]+ $/.test(name)) {
        alert("All type of validation has done on OnSubmit event.");
        return true;
    } else {
        alert("Please provide valid first name!");
        return false;
    }
} else {
    alert("Please provide valid second name!");
    return false;
}
} else {
    alert("Please put some text in the message box");
    return false;
}
} else {
    alert("All fields are required.....!");
    return false;
}

对于您尝试捕获的其他案例，您没有与if语句匹配的else语句：

if (name != '' && name2 != '' && message != '') {
    if (/^([\w-\.]+)$/.test(name)) {
        alert("All type of validation has done on OnSubmit event.");
        return true;
    } else {
        alert("Please provide valid first name!");
        return false;
    }
    if (/^([\w-\.]+)$/.test(name2)) {
        return true;
    } else {
        alert("Please provide valid second name!");
        return false;
    }
    if (/^([\w-\.]+)$/.test(message)) {
        return true;
    } else {
        alert("Please put some text in the message box");
        return false;
    }
} else {
    alert("All fields are required.....!");
    return false;
}

此处，每if都有一个else。除此之外，如果您的正则表达式不正确，则验证可能无效。我在这里无法纠正，但你应该能够利用上面的链接来解决这个问题。请记住，您应该从不依赖客户端验证，并应始终在服务器端验证之前再次检查数据库或API。

快速Javascript表单查询

1 个答案: