首页 > 解决方案 > 我的验证不正确,请看一下

问题描述

大家好,所以我想在这里用一些简单的javascript验证制作一个简单的html表单,

并且表单没有做它应该做的事情,我的javascript 验证功能根本不工作,只是什么都不做!!!!

我不知道我在做什么错???我错过了什么!?请看一下并给我您对该问题的意见,这是我的代码,并在此先感谢

   <!DOCTYPE html>
<head>

  <title>Register</title>
  <script>
    function fill(){
    var x = document.getElementById("country").value;
    var ar = x.split(";");
    var c = document.getElementById("state");
    c.options.length = 0;
    for(i=0;i<ar.length;i++){
    var option = document.createElement("option");
    option.text = ar[i];
    c.add(option);
  }
}
function validateFn() {
  var fn = document.forms["form"]["fname"].value;
  var mi = document.forms["form"]["mi"].value;
  var ln = document.forms["form"]["ln"].value;
  var un = document.forms["form"]["un"].value;
  var city = document.forms["form"]["city"].value;
  var country = document.forms["form"]["country"].value;
  if (fn == "") {
    alert("First Name must be filled out");
    return false;
  }
  if (mi == ""){
    alert("Middle initial must be filled out");
    return false;
  }
  if (ln == ""){
    alert("Last Name must be filled out");
    return false;
  }
  if (un == ""){
    alert("User Name must be filled out");
    return false;
  }
  if (city == ""){
    alert("The City must be filled out");
    return false;
  }
  if (country == ""){
    alert("Select a Country");
    return false;
  }  

}
function validatePas() {
    var x= document.getElementById("password");
        var y= document.getElementById("rpassword");
    if(x.value==y.value) return;
    else alert("password not same");
    return false;
}

function ValidateEmail(inputText)
{
    var mailformat = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/;
    if(inputText.value.match(mailformat))
    {
    return true;
    }
    else
    {
    alert("You have entered an invalid email address!");
    document.form.email.focus();
    return false;
    }
}

  </script>
</head>
<body>
  <h1>Registeration Form</h1>
  <table>
  <form name="form" onsubmit="return validateFn()" method="POST">
    <tr>
      <td>
    First Name:
  <input type="text" size="20" placeholder="First Name" name="fname">
</td>
</tr>
<tr>
  <td>
    Middle initial:
    <input name="mi" type="text" size="1" placeholder="mid">
</td>
</tr>
<tr>
  <td>
    Last Name:
    <input name="ln" type="text" size="20" placeholder="Last Name">
</td>
</tr>
<tr>
    <td>
      Country: <br>
      <select name="country" id="country"  onclick="fill();">
        <option value="New York;Washington;La;Texas">US</option>
        <option value="Alberta;Ontario;Nova Scotia">Canada</option>
        <option value="other">Other</option>
      </select>
  </td>
</tr>
<tr>
  <td>
    State: <br>
    <select id="state">
      
      
    </select>
  </td>
</tr>
<tr>
    <td>
      City:
      <input type="text" name="city" size="20" placeholder="Enter City Name">
    </td>
</tr>
<tr>
  <td>
    Zip:
  <input type="number" size="20" placeholder="Zip Code" minlength="5" maxlength="10">
  </td>
</tr>
<tr>
  <td>
    Email:
    <input name="email" type="email" id="email" size="30" placeholder="enter an email">
  </td>
</tr>
<tr>
  <td>
    User Name:
    <input type="text" id="username" size="30" placeholder="enter a user name">
  </td>
</tr>
<tr>
  <td>
    PassWord:
    <input name="pw" type="password" id="password"  size="30" placeholder="enter password">
  </td>
</tr>
<tr>
  <td>
    Repeat-PassWord:
    <input name="repw" id="rpassword" type="password" id="repeat" size="30" placeholder="enter password again">
  </td>
</tr>
<tr>
  <td>
    Comments:
    <textarea name="textarea" id="Area" cols="30" rows="10" placeholder="write some comments!"></textarea>
  </td>
</tr>
<tr>
  <td>
    <input type="checkbox" id="check" name="check" required> i agree to the site terms.
  </td>
</tr>
<tr>
  <td>
    <input type="submit" id="submit" name="submit" value="submit">
    <input type="reset" value="Reset" id="reset" name="reset">
  </td>
</tr>
</table>
  </form>
</table>
</body>
</html>

标签: javascripthtmljqueryhtml-table

解决方案


尝试将脚本放在页脚而不是头部


推荐阅读