问为什么Javascript不验证我的html代码？
EN

Stack Overflow用户

提问于 2019-09-23 02:07:12

回答 1查看 58关注 0票数 1

这是我第一次尝试使用javascript和表单；出于某种原因，我的html网站元素没有被验证，我不知道为什么。我使用此表单的目的是试图验证在它们旁边有一个“*”的元素。由于某些原因，唯一被验证的元素是电子邮件，而不是其他任何东西。名字，日期，复选框都不是。我一直在努力找一个解决办法，但似乎什么都没有用。

<!doctype html>
<html>
<head>
    <link href="styles.css" rel="stylesheet">
    <script src="script.js"></script>
    <meta charset="utf-8">
    <title>Form</title>
</head>

<body>
<div class="container">

    <h1>Travel Reservation Form</h1>
    <h4>* denotes mandotory field</h4>
    <form name="myForm" action="action_page.php" onsubmit="return validateForm()" method="post">


        <fieldset>
            <legend>Personal Details</legend>
            <label class="align">Full name:<span>*</span></label> <input type="text" name="fullname" placeholder="James Bond">
            <br><br>

            <label class="align">Email<span>*</span></label>
            <input type="email" name="mail" placeholder="james@gmail.com">
            <br><br>

            <label class="align">Date of Birth<span>*</span></label> <input type="date" name="DOB" placeholder="dd/mm/yy">

        </fieldset>
        <br>

        <label>Select Tour Package<span>*</span>:</label>
        <select name="package">
            <option value="1">Tokyo</option>
            <option value="2">Shanghai</option>
            <option value="3">Bangkok</option>
            <option value="4">Jakarta</option>
            <option value="5">Mumbai</option>
        </select>




        <label>Number of persons<span>*</span>:</label>
        <select name="party">
            <option value="1">One Adult</option>
            <option value="2">Two Adults</option>
            <option value="3">Three Adults</option>
            <option value="4">Four Adults</option>
            <option value="5">Five Adults</option>
        </select>

        <br><br>



        <label>Arrival Date<span>*</span>:</label> <input type="date" name="arrival" placeholder="dd/mm/yy">
        <br><br>


        <p>What Intrests you the most?<span>*</span>:</p>

        <input class="alignp" type="checkbox" name="interest" value="shopping"> Shopping <br><br>

        <input class="alignp"  type="checkbox" name="interest" value="dining"> Dining <br><br>

        <input class="alignp"  type="checkbox" name="interest" value="dancing"> Dancing <br><br>

        <input class="alignp"  type="checkbox" name="interest" value="SightS"> Sightseeing <br><br><br>



        <label>Discount Coupon code:</label> <input type="text" name="dis_code" value=""><br><br>



        <label>Terms and Conditions<span>*</span><input type="radio" name="tos" value="yes" checked>I agree</label>
        <input type="radio" name="tos" value="yes">I disagree





        <p>Please provide any additional information below:- </p>
        <textarea name="message" rows="5" cols="45" placeholder="Please type here...."></textarea><br><br>



        <button class="btn-submit" type="submit" value="Submit">Submit</button>
        <button class="btn-reset" type="reset" value="Reset">Reset</button>

    </form>
</div>
</body>
</html>

下面是在html中链接的javascript。我不确定问题是与我的html代码还是我的javascript有关。

// JavaScript Document
function validateForm()
{
    var name = document.forms["myForm"]["name"].value;
    var email = document.forms["myForm"]["email"].value;
    var dob = document.forms["myForm"]["DOB"].value;
    var packages = document.forms["myForm"]["package"].value;
    var arrival = document.forms["myForm"]["arrival"].value;
    //var interest = document.forms["form"]["interest"].value;
    var ToS = document.forms["myForm"]["tos"].value;
    var checkbox = document.querySelector('input[name="interest"]:checked');
    var matches = name.match(/\d+/g);


    if (matches != null) {
        alert("Name has a number in it!");
    }

    if (name == "") {
        alert("Name must be filled out");
        return false;
    }

    if (email == "") {
        alert("Email must be filled out");
        return false;
    }

    if (dob == "") {
        alert("Date of Birth must not be empty");
        return false;
    }

    if (arrival == "") {
        alert("Arrival Date must not be empty");
        return false;
    }
    if(ToS == false) {
        alert("You must agree to the Terms of Service");
        return false;

    }

    if(validateEmail(email) == false){
        alert("Must enter a valid email");
    }


    re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;

    if(dob != '' && !dob.match(re)) {
        alert("Invalid date format");
        return false;
    }

    if(arrival != '' && !arrival.match(re)) {
        alert("Invalid arrival date format") ;
        return false;
    }

    if(name.length >= 30){
        alert("Name must be less than 30 characters!");
        return false;

    }

    if(!checkbox){
        alert("Please select an interest!");
        return false;
    }

}

function validateEmail(email)
{
    return /\S+@\S+\.\S+/.test(email);
}

javascript

html

forms

回答 1

Stack Overflow用户

回答已采纳

发布于 2019-09-23 03:34:23

所以我不知道你的PHP表单做了什么，所以我现在只提取了所有的表单代码。有很多小问题，但都是诚实的错误。示例:如果要继续验证其余字段，则在每次验证后不需要返回语句。我将一些单独的验证合并到if/else中，因为它们是同一字段上的验证。我用ID来简化我的生活，因为我丢弃了表单代码。你可以随便换回你想要的。我还更新了regex，因为日期字段返回YYYY/MM/DD。因为这不会在任何地方发布，所以您可以在一段时间内使用它，然后再重新绑定到php表单中。我还提取了30个字符的检查，并在name中添加了一个最大字段长度。您还可以为日期字段设置最小和最大日期范围，并设置一系列其他内容，以帮助使字段本身更加简单。也有一些库为你处理这类事情，你不需要重新发明轮子，但如果你只是想玩它，这应该会让你开始。祝好运

<!doctype html>
<html>

<body>
  <div class="container">

    <h1>Travel Reservation Form</h1>
    <h4>* denotes mandotory field</h4>


    <fieldset>
      <legend>Personal Details</legend>
      <label class="align">Full name:<span>*</span></label> <input type="text" name="fullname" id='name' maxlength="30" placeholder="James Bond">
      <br><br>

      <label class="align">Email<span>*</span></label>
      <input id="email" type="email" name="mail" placeholder="james@gmail.com">
      <br><br>

      <label class="align">Date of Birth<span>*</span></label> <input type="date" id="dob" name="DOB" placeholder="dd/mm/yy">

    </fieldset>
    <br>

    <label>Select Tour Package<span>*</span>:</label>
    <select id='package' name="package">
      <option value="1">Tokyo</option>
      <option value="2">Shanghai</option>
      <option value="3">Bangkok</option>
      <option value="4">Jakarta</option>
      <option value="5">Mumbai</option>
    </select>




    <label>Number of persons<span>*</span>:</label>
    <select name="party">
      <option value="1">One Adult</option>
      <option value="2">Two Adults</option>
      <option value="3">Three Adults</option>
      <option value="4">Four Adults</option>
      <option value="5">Five Adults</option>
    </select>

    <br><br>



    <label>Arrival Date<span>*</span>:</label> <input type="date" name="arrival" id="arrival" placeholder="dd/mm/yy">
    <br><br>


    <p>What Intrests you the most?<span>*</span>:</p>

    <input class="alignp" type="checkbox" name="interest" value="shopping"> Shopping <br><br>

    <input class="alignp" type="checkbox" name="interest" value="dining"> Dining <br><br>

    <input class="alignp" type="checkbox" name="interest" value="dancing"> Dancing <br><br>

    <input class="alignp" type="checkbox" name="interest" value="SightS"> Sightseeing <br><br><br>



    <label>Discount Coupon code:</label> <input type="text" name="dis_code" value=""><br><br>



    <label>Terms and Conditions<span>*</span>
      <input type="radio" name="tos" id="accpeted" value="agree" checked>I agree</label>
    <input type="radio" name="tos" id="unaccepted" value="disagree">I disagree





    <p>Please provide any additional information below:- </p>
    <textarea name="message" rows="5" cols="45" placeholder="Please type here...."></textarea><br><br>



    <button class="btn-submit" id="submit" onclick="return validateForm()">Submit</button>



  </div>

  <script>
    // JavaScript Document
    function validateForm() {
      var name = document.getElementById("name").value;
      var email = document.getElementById("email").value;
      var dob = document.getElementById("dob").value;
      //Select Box
      var e = document.getElementById("package");
      // Selected Item
      var packages = e.options[e.selectedIndex].value;
      var arrival = document.getElementById("arrival").value;
      //var interest = document.getElementById("").value;
      var tos = document.querySelector('input[name="tos"]:checked').value;
      //var checkbox = document.getElementById("").value;;
      var matches = name.match(/\d+/g);
      var re = /^\d{4}([.\/-])\d{2}\1\d{2}$/;

      if (!name) {
        alert("Name must be filled out");
      } else {
        if (matches != null) {
          alert("Name has a number in it!: " + name);
        }
      }
      if (!email) {
        alert("Email must be filled out");
      } else {
        if (validateEmail(email) == false) {
          alert("Must enter a valid email: " + email);
        }
      }
      if (!dob) {
        alert("Date of Birth must not be empty");
      } else {
        if (!dob.match(re)) {
          alert(" Dob has Invalid date format: " + dob);

        }
      }
      if (!arrival) {
        alert("Arrival Date must not be empty");
      } else {
        if (!arrival.match(re)) {
          alert(" Dob has Invalid date format: " + arrival);

        }
      }
      if (tos != "agree") {
        alert("You must agree to the Terms of Service");
      }
    }

    function validateEmail(email) {
      return /\S+@\S+\.\S+/.test(email);
    }
  </script>
</body>

</html>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/58054866

复制

相似问题

问为什么Javascript不验证我的html代码？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Javascript不验证我的html代码？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问为什么Javascript不验证我的html代码？
EN