使用Javascript检查表单中的所有元素
Check all elements in form with Javascript
我在初级阶段就知道javascript，但我遇到了一个问题。
我在表单中有7个输入元素，我希望所有这些元素都被填充。我想出了这个主意，但它看起来很恶心。
有人能帮我如何检查是否填写了所有表单元素吗
function validateForm()
{
var x=document.forms["register"]["name"].value;
var y=document.forms["register"]["phone"].value;
var z=document.forms["register"]["compname"].value;
var q=document.forms["register"]["mail"].value;
var w=document.forms["register"]["compphone"].value;
var e=document.forms["register"]["adres"].value;
var r=document.forms["register"]["zip"].value;
if (x==null || x=="" || y==null || y=="" || z==null
|| z=="" || q==null || q=="" || w==null || w=="" || e==null || e==""
|| r==null || r=="")
{
alert("Please fill all the inputs");
return false;
}
}
</script>
这是一种简单而肮脏的方法。
更好的方法是更新一条验证消息，说明字段是必需的。
function validateForm()
{
var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"]
var i, l = fields.length;
var fieldname;
for (i = 0; i < l; i++) {
fieldname = fields[i];
if (document.forms["register"][fieldname].value === "") {
alert(fieldname + " can not be empty");
return false;
}
}
return true;
}
使用一些简单的香草JS，您可以用更简单的方式处理它：
JavaScript
function validateForm(){
var form = document.getElementById("register"), inputs = form.getElementsByTagName("input"), input = null, flag = true;
for(var i = 0, len = inputs.length; i < len; i++) {
input = inputs[i];
if(!input.value) {
flag = false;
input.focus();
alert("Please fill all the inputs");
break;
}
}
return(flag);
}
然后确保return表单中的函数，内联（错误做法）：
<form name="register" id="register" method="post" action="path/to/handler.php" onsubmit="return validateForm();">
或者以一种更不引人注目的方式：
window.onload = function(){
var form = document.getElementById("register");
form.onsubmit = function(){
var inputs = form.getElementsByTagName("input"), input = null, flag = true;
for(var i = 0, len = inputs.length; i < len; i++) {
input = inputs[i];
if(!input.value) {
flag = false;
input.focus();
alert("Please fill all the inputs");
break;
}
}
return(flag);
};
};
<html>
<head>
<title> Event Program</title>
<script>
function validateForm() {
var fields = ["name, phone", "compname", "mail", "compphone", "adres", "zip"]
var i, l = fields.length;
var fieldname;
for(i = 0; i < l; i++) {
fieldname = fields[i];
if(document.forms["register"][fieldname].value === "") {
alert(fieldname + " can not be empty");
return false;
}
}
return true;
}
var _validFileExtensions = [".jpg", ".jpeg", ".bmp", ".gif", ".png"];
var fields = {
"eventName": "Event Name",
"eventDate": "Event Date",
"eventPlace": "Event Place"
}
function Validate(oForm) {
var arrInputs = oForm.getElementsByTagName("input");
for(var i = 0; i < arrInputs.length; i++) {
var oInput = arrInputs[i];
if(oInput.type == "text" && oInput.value == "") {
alert(fields[oInput.name] + " cannot be empty");
return false;
}
if(oInput.type == "file") {
var sFileName = oInput.value;
if(sFileName.length > 0) {
var blnValid = false;
for(var j = 0; j < _validFileExtensions.length; j++) {
var sCurExtension = _validFileExtensions[j];
alert(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase())
if(sFileName.substr(sFileName.length - sCurExtension.length, sCurExtension.length).toLowerCase() == sCurExtension.toLowerCase()) {
blnValid = true;
break;
}
}
if(!blnValid) {
alert("Sorry, " + sFileName + " is invalid, allowed extensions are: " + _validFileExtensions.join(", "));
return false;
}
}
}
}
return true;
}
</script>
</head>
<body>
<div align="center">
<h3>Event Management</h3>
<form onsubmit="return Validate(this);" id='eventForm' name='eventForm' method='POST' enctype='multipart/form-data' action='saveEvent.php'>
<table>
<tr>
<td>Event Name</td>
<td>
<input type="text" name="eventName">
</td>
</tr>
<tr>
<td>Event Date</td>
<td>
<input type="text" name="eventDate" id='datepicker'>
</td>
</tr>
<tr>
<td>Event place</td>
<td>
<input type="text" name="eventPlace">
</td>
</tr>
<tr>
<td>Upload Image</td>
<td>
<input type="file" name="my file" />
<br />
</td>
</tr>
<tr>
<td>About Events</td>
<td>
<textarea></textarea>
</td>
</tr>
<tr>
<td colspan=2 align=center>
<input type="submit" value="Submit" />
<input type="button" name="clear" value="Clear" />
</td>
</tr>
</table>
</form>
</div>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("#datepicker").datepicker({
dateFormat: "dd/mm/yy",
changeMonth: true,
changeYear: true
}).datepicker("setDate", new Date());
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function validateForm() {
let x = document.forms["myForm"]["fname"].value;
if (x == "") {
document.getElementById('namecheck').innerHTML="Name must be filled out";
return false;
}
else{
document.getElementById('namecheck').innerHTML="";
}
let y = document.forms["myForm"]['age'].value;
if (y == "") {
document.getElementById('agecheck').innerHTML="Age must be filled out";
return false;
}
else{
document.getElementById('namecheck').innerHTML="";
}
let z = document.forms["myForm"]['phone'].value;
if (z == "") {
document.getElementById('phonecheck').innerHTML="Phone must be filled out";
return false;
}
else{
document.getElementById('phone').innerHTML="";
}
}
</script>
</head>
<body>
<h2>JavaScript Validation</h2>
<form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<p id='namecheck' style="color:red"></p>
Age: <input type="text" name="age">
<p id='agecheck' style="color:red"></p>
Phone: <input type="text" name="phone">
<p id='phonecheck' style="color:red"></p>
<input type="submit" value="Submit">
</form>
</body>
</html>您可以使用这个简单的方法来验证表单的所有字段。
您可以这样做：
//Declare variables
var 1, 2, 3, 4, 5, 6, 7;
1 = document.getElementById("Field Id");
2 = document.getElementById("Field Id");
3 = document.getElementById("Field Id");
4 = document.getElementById("Field Id"); //Define variable values
5 = document.getElementById("Field Id");
6 = document.getElementById("Field Id");
7 = document.getElementById("Field Id");
//Check if any of the fields are empty
If (1 == "" || 2 == "" || 3 == "" || 4 == "" || 5 == "" || 6 == "" || 7 == "") {
alert("One or more fields are empty!");
//Other code
}
我把它用于我自己的形式，它很好地工作，同时不会占用太多空间或看起来太"丑陋"。它适用于所有字段元素，并检查输入的值。
相关文章：
- Javascript更新孙窗口中的表单元素
- 阻止表单元素提交
- 根据select选项元素将表单重定向到不同的URL
- 使用javascript取消隐藏和隐藏表单中的某些元素
- 使用带有.net autopostback的ryanfait.com自定义表单元素
- 使用javascript更改表单元素的ID值
- HTML5在提交并显示所需标签后显示隐藏的表单元素
- 表单中元素的更改值为't已发布
- Small Javascript从动态表单中删除多个元素的问题
- 为什么表单元素不应命名为submit
- 如何使用相同的javascript控制表单中的不同元素
- 从函数中选择要触发表单提交的正确元素
- 如何重置搜索表单中的特定表单元素
- Rails-带有单选按钮的表单，带有启用/禁用附加元素的javascript操作
- 使用 ng-repeat访问 ng 表单元素/值
- 获取电子邮件附件的表单元素
- js 语法传递名称元素表单验证
- 如何选择元素表单列表并将其放入文本框中
- 如何使用JQuery获取主体中第一个元素(表单）的id
- 尝试使用每个查找元素表单XML文件
