Question

以下功能可用于检查用户是否在给定字段中输入了任何内容。空白字段可以指示两种值。零长度字符串或NULL值。

＆＃13;

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;   
}  
}

＆＃13;

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;  
}

＆＃13;

<!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>

＆＃13;

我正在尝试此代码，但无法运行该脚本。我也在使用jquery.js，如果它有帮助

我该如何解决这个问题？

Answer 1

您的表单和文本字段的名称在javascript中是错误的。我在以下代码段中对此进行了更正。

只有行＆＃34; var empt = document.forms [＆＃34; form1＆＃34;] [＆＃34; text1＆＃34;]。value;＆＃34;改变。

＆＃13;

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;   
}  
}

＆＃13;

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;  
}

＆＃13;

<!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>

＆＃13;

Answer 2

既然你提到你正在使用jQuery，这是一个有效的例子：

＆＃13;

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;
  }
}

＆＃13;

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;
}

＆＃13;

<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>

＆＃13;

唯一的变化是，在文本字段中添加ID，并使用jQuery获取值。

希望这有帮助！

Answer 3

在文字字段中添加“id”ID，然后“提交”到提交按钮。

$(".subnav-toggle").click(function() {
  $(this).toggleClass("active");
  $(".subnav").toggleClass("open");
});

Answer 4

它简单地将输入类型的id添加为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>

Javascript函数检查字段是否为空

4 个答案: