JavaScript不验证表单上的输入

时间:2016-04-27 09:55:50

标签: javascript html forms validation

我是JavaScript新手并试图验证一个简单的出生日期输入,但似乎js文件没有做任何事情。我可以输入任何内容并且它有效,所以我想知道代码有什么问题。

HTML

<?
if( $_POST )
{
  $con = mysql_connect("localhost","theshitp_user","password");

  if (!$con)
  {
    die('Could not connect: ' . mysql_error());
  }

  mysql_select_db("theshitp_posts", $con);

  $users_comment = $_POST['comment'];

  $users_comment = mysql_real_escape_string($users_comment);

  $query = "
  INSERT INTO `theshitp_posts`.`test2` (`id`, `comment`, `timestamp`) VALUES (NULL, '$users_comment', CURRENT_TIMESTAMP() );";

  mysql_query($query);

  echo "<p style='color: grey;'><b>Thank you for your Comment!</b></p>";

  mysql_close($con);
}
?>

的JavaScript

<!DOCTYPE html>
<html lang="en">
<head>
<script src="test.js"></script>
</head>

<body>
<form id"regForm" method="post" action="formtest.php">

<fieldset>
<p><label for="dob">Date of Birth</label><input type="text" name="dob" id="dob" maxlength="10" size="10" minlength="8" placeholder="DD/MM/YYYY"/></p>
</fieldset>

<input type= "submit" value="Submit"/>
<input type= "reset" value="Reset Form"/>
</form>
</body>

非常感谢任何帮助。谢谢!

4 个答案:

答案 0 :(得分:1)

尝试像这样的东西

示例1

<form name="myForm" action="demo_form.asp" onsubmit="return validateForm()" method="post">
Name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>

示例2

   <input id="id1" type="number" min="100" max="300">
    <button onclick="myFunction()">OK</button>

  <p id="demo"></p>

   <script>
     function myFunction() {
     var inpObj = document.getElementById("id1");
     if (inpObj.checkValidity() == false) {
     document.getElementById("demo").innerHTML = inpObj.validationMessage;
   }
 }
</script>

示例3

<html>

<head>
<title>Form Validation Example</title>

<script>
function ValidateContactForm()
 {
   var name = document.ContactForm.Name;
var email = document.ContactForm.Email;
var phone = document.ContactForm.Telephone;
var nocall = document.ContactForm.DoNotCall;
var what = document.ContactForm.Subject;
var comment = document.ContactForm.Comment;

if (name.value == "")
{
    window.alert("Please enter your name.");
    name.focus();
    return false;
}

if (email.value == "")
{
    window.alert("Please enter a valid e-mail address.");
    email.focus();
    return false;
}
if (email.value.indexOf("@", 0) < 0)
{
    window.alert("Please enter a valid e-mail address.");
    email.focus();
    return false;
}
  if (email.value.indexOf(".", 0) < 0)
    {
    window.alert("Please enter a valid e-mail address.");
    email.focus();
    return false;
   }

   if ((nocall.checked == false) && (phone.value == ""))
{
    window.alert("Please enter your telephone number.");
    phone.focus();
    return false;
}

if (what.selectedIndex < 1)
{
    alert("Please tell us how we can help you.");
    what.focus();
    return false;
}

if (comment.value == "")
{
    window.alert("Please provide a detailed description or comment.");
    comment.focus();
    return false;
}
return true;
}

function EnableDisable(chkbx)
{
if(chkbx.checked == true)
{
    document.ContactForm.Telephone.disabled = true;
}
else
{
    document.ContactForm.Telephone.disabled = false;
}
 }
  </script>
</head>

 <body>

   <form method="post" action="mailto:Frank@cohowinery.com" 
    name="ContactForm" onsubmit="return ValidateContactForm();">
  <p>Name: <input type="text" size="65" name="Name"></p>
  <p>E-mail Address:  <input type="text" size="65" name="Email"></p>
  <p>Telephone: <input type="text" size="65" name="Telephone"><br>
    <input type="checkbox" name="DoNotCall" 
    onclick="EnableDisable(this);"> Please do not call me.</p>
  <p>What can we help you with?
    <select type="text" value="" name="Subject">
        <option>  </option>
        <option>Customer Service</option>
        <option>Question</option>
        <option>Comment</option>
        <option>Consultation</option>
        <option>Other</option>
    </select></p>
<p>Comments:  <textarea cols="55" name="Comment">  </textarea></p>
<p><input type="submit" value="Send" name="submit">
<input type="reset" value="Reset" name="reset"></p>
 </form>

 </body>
  </html>

答案 1 :(得分:0)

您可以像提交

一样测试日期
function validateForm()
{
  var inputDate = document.getElementById("dob").value;

  //Format dd/mm/yyyy
  var pattern =/^([0-9]{2})\/([0-9]{2})\/([0-9]{4})$/;
  alert(pattern.test(inputDate));
  if(pattern.test(inputDate))
  {
     alert("Validate");
  }
  else 
  {
    alert("Not valid"); 
  }
}

答案 2 :(得分:0)

在Form中添加OnSubmit然后调用验证函数或在onclick中的提交按钮中调用验证函数

答案 3 :(得分:0)

  1. 在Html第8行中,缺少&#34; =&#34;在id
  2. 之后
  3. 在JS关闭if,第32行和第36行
  4. 使用浏览器控制台进行调试