为什么这个函数不存储变量,为什么不验证名字?

时间:2021-04-28 15:33:49

标签: javascript html

为什么这个函数不存储变量,为什么不验证名字?
由于某种原因它不起作用。
当我打开时,控制台中没有错误消息网站。
请帮忙,这很烦人,我已经为此苦苦挣扎了一段时间。
是否有一些错误消息导致我的 JavaScript 代码无法工作?

"use strict";

function validate() {
  var errMsg = "";
  var result = true;
  // get variables from form and check rules
  // if something is wrone set result to false and add error message
  var fname = document.getElementById("fname").value; //validates first name
  if (!fname.match(/^[a-zA-Z]+$/)) {
errMsg += "Please enter your first name (Only alpha characters).\n";
result = false;
  }

  /*get variables from form and check rules*/

  var postcode = document.getElementById("postcode").value;
  var state = document.getElementById("state").options[
document.getElementById("state").selectedIndex
  ].text;

  var regex;
  //VIC = 3 OR 8, NSW = 1 OR 2 ,QLD = 4 OR 9 ,NT = 0 ,WA = 6 ,SA=5 ,TAS=7 ,ACT= 0.
  switch (state) {
case "Please Select":
  return false;
case "VIC":
  regex = new RegExp(/(3|8)\d+/);
  break;
case "NSW":
  regex = new RegExp(/(1|2)\d+/);
  break;
case "QLD":
  regex = new RegExp(/(4|9)\d+/);
  break;
case "NT":
  regex = new RegExp(/0\d+/);
  break;
case "WA":
  regex = new RegExp(/6\d+/);
  break;
case "SA":
  regex = new RegExp(/5\d+/);
  break;
case "TAS":
  regex = new RegExp(/7\d+/);
  break;
case "ACT":
  regex = new RegExp(/0\d+/);
  break;
  }
  if (!postcode.match(regex)) {
errMsg = errMsg + "State and postcode do not match\n";
result = false;
  }

  if (errMsg) {
alert(errMsg);
  }

  if (result) {
storeBooking(
  fname,
  lname,
  email,
  phone,
  streetname,
  suburb,
  state,
  postcode,
  productquantity
);
  }
  return result;
}

function storeBooking(
  fname,
  lname,
  email,
  phone,
  streetname,
  suburb,
  state,
  postcode,
  productquantity
) {
  sessionStorage.fname = fname;
  sessionStorage.lname = lname;
  sessionStorage.email = email;
  sessionStorage.phone = phone;
  sessionStorage.streetname = streetname;
  sessionStorage.suburb = suburb;
  sessionStorage.state = state;
  sessionStorage.postcode = postcode;
  sessionStorage.productquantity = productquantity;
}

// this stores values inside of sessionStorage

function init() {
  var regForm = document.getElementById("regform"); // get ref to the HTML element

  regForm.onsubmit = validate; //register the event listener
}

window.onload = init;
<!DOCTYPE html>
<html lang="en">
<head>
    <script src="scripts/part2.js"></script>
    <title>SwinTech</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body class="enquiriespage">
    <header>
        <div class="main">
            <div class="logo">
                <img src="logo.png" alt="logo">
            </div>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="products.html">Products</a></li>
                <li class="active"><a href="enquiries.html">Enquiries</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </div>
    </header>
</body>

<section class="enquirything">
    <div class="containerr">
  <form action="payment.html" id="regform" method="post">


    <label for="fname">First Name</label>
    <input type="text" id="fname" name="fname" required="required" placeholder="Your name.." maxlength="25" onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">

    <label for="lname">Last Name</label>
    <input type="text" id="lname" name="fname" required="required" placeholder="Your last name.." onkeypress="return (event.charCode > 64 && event.charCode < 91) || (event.charCode > 96 && event.charCode < 123) || (event.charCode==32)">

    <label for="email">Email Address</label>
    <br>
    <br>
    <input type="email" id="email" name="emailadd" required="required" placeholder="Your email address..">

    <br>
    <br>

    <label for="phone">Phone Number</label>
    <br>
    <br>
    <input type="text" id="phone"  name="txtChar" required="required" placeholder="e.g. 0451124561" maxlength="10">
    <br>
    <br>


<h1>Address</h1>
<br>
    <label for="streetname">Street Address</label>
    <input type="text" id="streetname" name="streetname" required="required" placeholder="Your street name..." maxlength="40"/>

    <label for="suburb">Suburb/Town</label>
    <input type="text" id="suburb" name="suburb" required="required" placeholder="Your suburb/town..." maxlength="40">

    <label for="state">Choose a state:</label>
<br>
<select name="state" id="state" required="required">
    <option value="">Please Select</option>
  <option value="VIC">VIC</option>
  <option value="NSW">NSW</option>
  <option value="QLD">QLD</option>
  <option value="NT">NT</option>
  <option value="WA">WA</option>
  <option value="SA">SA</option>
  <option value="TAS">TAS</option>
  <option value="ACT">ACT</option>
</select>

<br>

    <label for="postcode">Postcode</label>
    <input type="text" id="postcode" name="postcode" required="required" placeholder="Your postcode..." maxlength="4" minlength="4" pattern="^[0-9]{4}$">


<fieldset>
    <br>
<h1>Product Selection</h1>
<br>
  <label for="productselection">Please select the product:</label>
  <br>
<select id="productselection" name="Product" >
        <option value="none">Please Select a Product</option>
        <option value="Workstation-Laptop">Workstation Laptop</option>
        <option value="Gaming-Laptop">Gaming Laptop</option>
        <option value="Laptop-Stand">Laptop Stand</option>
        <option value="Office-Laptop">Office Laptop</option>
    </select>
    <br>
    <h1>Amount of Product:</h1>
          <section>
           <br> 
            <input type="number" id="productquantity"   />
        <br>
            </section>

</fieldset>
<br>
    <input type="submit" value="Pay Now"> <input type="reset" value="Reset" />
</fieldset>
  </form>
</div>
</section>


<div class="footer">
    <div class="footer-content"></div>

    <div class="footer-bottom"></div>
    &copy; swintech.com | Designed by Bilal El-leissy
</div>

</html>

1 个答案:

答案 0 :(得分:0)

代码看起来不错,但从这段代码来看,我暗中指出您遇到了安全错误,可能是由于没有提供文件,并且在浏览器而不是 file:// 。如果您停止完成提交的代码,您可以看到正确的错误。

http[s]://

From MDN

<块引用>

请求违反了策略决定,或者源不是有效的方案/主机/端口元组(例如,如果源使用文件:或数据:方案,就会发生这种情况)。例如,用户可能将他们的浏览器配置为拒绝为指定源保留数据的权限。

相关问题