Question

我发现很难在html中使用js，因为我对此并不陌生。我已经尝试了许多不同的事情来使它工作，但是没有成功。任何建议将不胜感激。

我已经尝试了所有方法，包括更改输入类型，操作，if和else if语句，警报功能等等。

function validation() {
  var name = document.getElementById('Name').value;
  var email = document.getElementById('Email').value;
  var tel = document.getElementById('Telephone').value;
  if (Name == '' || Email == '' || Telephone == '')
    alert('action required')
  return false;
} else if (name.length < 4) {
  alert("action required")
  return false;
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="utf-8">
  <link rel="stylesheet" href="css/WebForm.css">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>COM111 | WebForm | B0076234</title>
  <meta name="viewport" content="width = device-width, inital-scale = 1.0">
  <script src="assignment2/ass2script.js"></script>
  <h1 id="h1">Welcome To My WebForm</h1>
  <h2 id="h2"> CV Request</h2>
</head>

<body>
  <!-- form -->
  <form action="" method="post" onsubmit="return validation()">
    <div class="wrap">
      <div class="form1">
        <div class="input-fields">
          <input type="text" class="input" placeholder="Name" id="name">
          <input type="email" class="input" placeholder="Email" id="Email">
          <input type="tel" class="input" placeholder="Telephone" id="Telephone">
          <input type="text" class="input" placeholder="Company" id="Telephone"><br>
          <input type="submit" name="submit" value="Insert now">
          <!--buttons-->
          <label>Short CV
<input type="radio" checked="checked">
    </label> <br>
          <label>Long CV
     <input type="radio">
    </label>
          <!-- messgebox -->
        </div>
        <div class="message">
          <textarea placeholder="Message"></textarea>
          <div class="btn">send</div>
        </div>
      </div>
    </div>
  </form>
  <!--buttons-->
  <div id="eresult"></div>
  <!-- javascript -->
  <script type="text/javascript">
  </script>

</body>

</html>

Answer 1

解决以下问题：

您需要在if之后的块周围加上大括号，因为它包含多个语句。参见Why is it considered a bad practice to omit curly braces?
在函数末尾添加另一个括号。
将id="name"更改为id="Name"，以将通话与document.getElementById('Name')相匹配。
在第一个if语句中固定变量名，以匹配从输入值分配的变量。

所有这些验证实际上都可以在HTML本身中实现。您可以将required属性用于必须填写的输入，并在minlength="4"输入中使用Name，以要求其至少包含4个字符。

function validation() {
  var name = document.getElementById('Name').value;
  var email = document.getElementById('Email').value;
  var tel = document.getElementById('Telephone').value;
  if (name == '' || email == '' || tel == '') {
    alert('action required')
    return false;
  } else if (name.length < 4) {
    alert("action required")
    return false;
  }
}

<!DOCTYPE html>
<html lang="en">

<head>
  <meta name="utf-8">
  <link rel="stylesheet" href="css/WebForm.css">
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <title>COM111 | WebForm | B0076234</title>
  <meta name="viewport" content="width = device-width, inital-scale = 1.0">
  <script src="assignment2/ass2script.js"></script>
  <h1 id="h1">Welcome To My WebForm</h1>
  <h2 id="h2"> CV Request</h2>
</head>

<body>
  <!-- form -->
  <form action="" method="post" onsubmit="return validation()">
    <div class="wrap">
      <div class="form1">
        <div class="input-fields">
          <input type="text" class="input" placeholder="Name" id="Name">
          <input type="email" class="input" placeholder="Email" id="Email">
          <input type="tel" class="input" placeholder="Telephone" id="Telephone">
          <input type="text" class="input" placeholder="Company" id="Telephone"><br>
          <input type="submit" name="submit" value="Insert now">
          <!--buttons-->
          <label>Short CV
<input type="radio" checked="checked">
    </label> <br>
          <label>Long CV
     <input type="radio">
    </label>
          <!-- messgebox -->
        </div>
        <div class="message">
          <textarea placeholder="Message"></textarea>
          <div class="btn">send</div>
        </div>
      </div>
    </div>
  </form>
  <!--buttons-->
  <div id="eresult"></div>
  <!-- javascript -->
  <script type="text/javascript">
  </script>

</body>

</html>

无法在HTML中使用Java脚本实施验证

1 个答案: