使用Javascript函数检查字段是否为空

以下函数可用于检查用户是否在给定字段中输入了任何内容。空白字段可以指示两种值。一个零长度的字符串或一个NULL值。使用Javascript函数检查字段是否为空

function required() 
 
{ 
 
var empt = document.forms["form"]["text"].value; 
 
if (empt == "") 
 
{ 
 
alert("Please input a Value"); 
 
return false; 
 
} 
 
else 
 
{ 
 
alert('Code has accepted : you can try another'); 
 
return true; 
 
} 
 
}

li {list-style-type: none; 
 
font-size: 16pt; 
 
} 
 
.mail { 
 
margin: auto; 
 
padding-top: 10px; 
 
padding-bottom: 10px; 
 
width: 400px; 
 
background : #D8F1F8; 
 
border: 1px soild silver; 
 
} 
 
.mail h2 { 
 
margin-left: 38px; 
 
} 
 
input { 
 
font-size: 20pt; 
 
} 
 
input:focus, textarea:focus{ 
 
background-color: lightyellow; 
 
} 
 
input submit { 
 
font-size: 12pt; 
 
} 
 
.rq { 
 
color: #FF0000; 
 
font-size: 10pt; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>JavaScript form validation - checking non-empty</title> 
 
<link rel='stylesheet' href='form-style.css' type='text/css' /> 
 
</head> 
 
<body> 
 
<div class="mail"> 
 
<h2>Input your Name and Submit</h2> 
 
<form name="form1" action="#" onsubmit="required()"> 
 
<ul> 
 
<li><input type='text' name ='text1'/></li> 
 
<li class="rq">*Required Field</li> 
 
<li><input type="submit" name="submit" value="Submit" /></li> 
 
</ul> 
 
</form> 
 
</div> 
 
<script src="non-empty.js"></script> 
 
</body> 
 
</html>

我想这个代码，但不能运行该脚本。我也使用的jquery.js如果它可以帮助

我怎样才能解决这个问题？

来源

2017-08-14 devadinesh

既然你提到你正在使用jQuery，这里是一个工作示例：

function required(e) { 
 
    //e.preventDefault(); 
 
    var empt = $("#text1").val(); 
 
    if (empt == "") { 
 
    alert("Please input a Value"); 
 
    return false; 
 
    } else { 
 
    alert('Code has accepted : you can try another'); 
 
    return true; 
 
    } 
 
}

li { 
 
    list-style-type: none; 
 
    font-size: 16pt; 
 
} 
 

 
.mail { 
 
    margin: auto; 
 
    padding-top: 10px; 
 
    padding-bottom: 10px; 
 
    width: 400px; 
 
    background: #D8F1F8; 
 
    border: 1px soild silver; 
 
} 
 

 
.mail h2 { 
 
    margin-left: 38px; 
 
} 
 

 
input { 
 
    font-size: 20pt; 
 
} 
 

 
input:focus, 
 
textarea:focus { 
 
    background-color: lightyellow; 
 
} 
 

 
input submit { 
 
    font-size: 12pt; 
 
} 
 

 
.rq { 
 
    color: #FF0000; 
 
    font-size: 10pt; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<!doctype html> 
 
<html lang="en"> 
 

 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JavaScript form validation - checking non-empty</title> 
 
    <link rel='stylesheet' href='form-style.css' type='text/css' /> 
 
</head> 
 

 
<body> 
 
    <div class="mail"> 
 
    <h2>Input your Name and Submit</h2> 
 
    <form name="form1" action="#" onsubmit="required()"> 
 
     <ul> 
 
     <li><input type='text' id="text1" name='text1' /></li> 
 
     <li class="rq">*Required Field</li> 
 
     <li><input type="submit" name="submit" value="Submit" /></li> 
 
     </ul> 
 
    </form> 
 
    </div> 
 
    <script src="non-empty.js"></script> 
 
</body> 
 

 
</html>

唯一的变化是，一个ID添加到文本框，并抢值通过使用jQuery。

希望这会有所帮助！

来源

2017-08-14 12:43:39

为您的表单和文本字段的名称是错误的JavaScript。我在以下代码片段中更正了这一点。

只有线路 “VAR抢先= document.forms [” form1中 “] [” 文本1 “]值;”。改变。

function required() 
 
{ 
 
var empt = document.forms["form1"]["text1"].value; 
 
if (empt == "") 
 
{ 
 
alert("Please input a Value"); 
 
return false; 
 
} 
 
else 
 
{ 
 
alert('Code has accepted : you can try another'); 
 
return true; 
 
} 
 
}

li {list-style-type: none; 
 
font-size: 16pt; 
 
} 
 
.mail { 
 
margin: auto; 
 
padding-top: 10px; 
 
padding-bottom: 10px; 
 
width: 400px; 
 
background : #D8F1F8; 
 
border: 1px soild silver; 
 
} 
 
.mail h2 { 
 
margin-left: 38px; 
 
} 
 
input { 
 
font-size: 20pt; 
 
} 
 
input:focus, textarea:focus{ 
 
background-color: lightyellow; 
 
} 
 
input submit { 
 
font-size: 12pt; 
 
} 
 
.rq { 
 
color: #FF0000; 
 
font-size: 10pt; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>JavaScript form validation - checking non-empty</title> 
 
<link rel='stylesheet' href='form-style.css' type='text/css' /> 
 
</head> 
 
<body> 
 
<div class="mail"> 
 
<h2>Input your Name and Submit</h2> 
 
<form name="form1" action="#" onsubmit="required()"> 
 
<ul> 
 
<li><input type='text' name ='text1'/></li> 
 
<li class="rq">*Required Field</li> 
 
<li><input type="submit" name="submit" value="Submit" /></li> 
 
</ul> 
 
</form> 
 
</div> 
 
<script src="non-empty.js"></script> 
 
</body> 
 
</html>

来源

2017-08-14 12:44:20

添加 “ID” 的ID给您的文本字段和 “提交” 到您的提交按钮。

$('#submit').click(function(){ 
     if($('#id').val()){ 
      alert('Code has accepted : you can try another'); 
      return true; 
     }else{ 
`   alert('Enter Text'); 
      return false; 
     } 
    })

来源

2017-08-14 12:51:19

它的简单增加号码至您的输入类型txtInput并获得其价值就像

 document.getElementById('txtInput').value;

function required() 
 
{ 
 
var empt = document.getElementById('txtInput').value; 
 
if (empt == "") 
 
{ 
 
alert("Please input a Value"); 
 
return false; 
 
} 
 
else 
 
{ 
 
alert('Code has accepted : you can try another'); 
 
return true; 
 
} 
 
}

li {list-style-type: none; 
 
font-size: 16pt; 
 
} 
 
.mail { 
 
margin: auto; 
 
padding-top: 10px; 
 
padding-bottom: 10px; 
 
width: 400px; 
 
background : #D8F1F8; 
 
border: 1px soild silver; 
 
} 
 
.mail h2 { 
 
margin-left: 38px; 
 
} 
 
input { 
 
font-size: 20pt; 
 
} 
 
input:focus, textarea:focus{ 
 
background-color: lightyellow; 
 
} 
 
input submit { 
 
font-size: 12pt; 
 
} 
 
.rq { 
 
color: #FF0000; 
 
font-size: 10pt; 
 
}

<!doctype html> 
 
<html lang="en"> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>JavaScript form validation - checking non-empty</title> 
 
<link rel='stylesheet' href='form-style.css' type='text/css' /> 
 
</head> 
 
<body> 
 
<div class="mail"> 
 
<h2>Input your Name and Submit</h2> 
 
<form name="form1" action="#" onsubmit="required()"> 
 
<ul> 
 
<li><input type='text' id="txtInput" name ='text1'/></li> 
 
<li class="rq">*Required Field</li> 
 
<li><input type="submit" name="submit" value="Submit" /></li> 
 
</ul> 
 
</form> 
 
</div> 
 
<script src="non-empty.js"></script> 
 
</body> 
 
</html>

来源

2017-08-14 13:04:21

使用Javascript函数检查字段是否为空

回答

相关问题