将验证js文件链接到html文件错误 - Javascript

时间:2018-03-12 17:38:51

标签: javascript validation

<script type="text/javascript" src = "diabetestool.js"> </script>
<meta charset="utf-8"/>

</head>

<body>
<form id = "test2" name = "test2">

<table cellpadding="2" width="20%" bgcolor="red"
align="center" 
cellspacing="2"

<tr>
<td colspan =2>
<center>  <font size = 4>FORM TO FILL IN </font></center>
</td>
</tr>


<td> Title </td>
<td> <select Name="Title">
<option value= "-1 selected"> select...</option>
<option value= "Mr"> Mr </option>
<option value= "Mrs"> Mrs </option>
<option value= "Miss"> Miss </option>
<option value= "Ms"> Ms </option>
<option value= "Master"> Master</option>
</select></td>
</tr>

<tr>
<td>First Name</td>
<td><input type ="text" name= "firstName" id ="firstName" size ="30"> </td>
</tr>


<tr>
<td> Last Name</td>
<td> <input type ="text" name ="lastName" id = "lastName" size ="30"> </td>
</tr>

<tr>
<td> Health Authority Number</td>
<td> <input type ="text" name ="healthNumber" id = "healthNumber" size ="30"> </td>
</tr>

<tr>
<td> Email</td>
<td> <input type ="text" name ="email" id = "email" size ="30"> </td>
</tr>

<tr>
<td> Telephone Number</td>
<td> <input type ="text" name ="telephoneNumber" id = "telephoneNumber" size ="30"> </td>
</tr>

<tr>
<td colspan ="2"> <input type="submit" value="submit form" onsubmit="return validate()"; </td>
</tr>
</table>
</form>
</body>

</html>

这是我的代码,用于创建要填写的联系表单的代码 有多种选择

function validate ()
{
// Declare all the variables here
var firstName = document.getElementById("firstName").value;
var lastName =  document.getElementById("lastName").value;
var Title = document.getElementById("Title").value;
var healthNumber = parseInt(document,getElementById("healthNumber").value);
var email = document.getElementById("email").value;

var validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,6}$/;


if(firstName!="" && lastName!= "" && Title!="" && email !="")
{
        if(email.match(validEmail))
        {
            alert("All Values Validated");
            return true;
        }
        else
        {
            alert("Enter a valid Email");
            return false;
        }
}
else
{
    alert("All Fields are required");
    return false;
 }



}

这只是一个随机创建的js验证代码,只是为了测试验证过程是否适用于我的代码然后我会将其更改为实际进行我想要的正确验证  问题是我提交后用我的联系表单的html页面,它只是刷新那个页面,我尝试了不同的东西,但无法找到解决方案

3 个答案:

答案 0 :(得分:1)

你的代码有很多语法错误。我修复了语法错误。这是js小提琴:https://jsfiddle.net/0ngs96n0/13/

在表格标签中使用onsubmit:

<form id = "test2" name = "test2"  onsubmit="return validate(event);">

和在JS:

function validate (e){
   e.preventDefault();
   .................
   .................
   .................
   .................
   .................
}

它会阻止表单刷新。

答案 1 :(得分:0)

parseInt函数(文件,的getElementById(&#34; healthNumber&#34;。)值); 检查上面的行有一个,逗号代替。点。在document.getElementById(&#34; healthNumber&#34;)。value;

另一个是html部分中的close table元素,它将被解决 谢谢

答案 2 :(得分:0)

您的代码中存在一些错误 比如在HTML中调用函数

&#34; parseInt&#34; JS中的函数

HTML:

<html>
<head>
<script type="text/javascript" src = "diabetestool.js"> </script>
<meta charset="utf-8"/>

</head>

<body>
<form id = "test2" name = "test2" onsubmit="validate()">

<table cellpadding="2" width="20%" bgcolor="red"
align="center" 
cellspacing="2"

<tr>
<td colspan =2>
<center>  <font size = 4>FORM TO FILL IN </font></center>
</td>
</tr>


<td> Title </td>
<td> <select Name="Title" id="Title">
<option value= "-1 selected"> select...</option>
<option value= "Mr"> Mr </option>
<option value= "Mrs"> Mrs </option>
<option value= "Miss"> Miss </option>
<option value= "Ms"> Ms </option>
<option value= "Master"> Master</option>
</select></td>
</tr>

<tr>
<td>First Name</td>
<td><input type ="text" name= "firstName" id ="firstName" size ="30"> </td>
</tr>


<tr>
<td> Last Name</td>
<td> <input type ="text" name ="lastName" id = "lastName" size ="30"> </td>
</tr>

<tr>
<td> Health Authority Number</td>
<td> <input type ="text" name ="healthNumber" id = "healthNumber" size ="30"> </td>
</tr>

<tr>
<td> Email</td>
<td> <input type ="text" name ="email" id = "email" size ="30"> </td>
</tr>

<tr>
<td> Telephone Number</td>
<td> <input type ="text" name ="telephoneNumber" id = "telephoneNumber" size ="30"> </td>
</tr>

<tr>
<td colspan ="2"> <input type="submit" value="submit form" >
 </td>
</tr>
</table>
</form>
</body>

</html>

的javascript:

// Declare all the iables here
var firstName;
 var lastName;
 var Title ;
 var healthNumber;
 var email ;

 validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,6}$/;

function validate ()
{
 firstName = document.getElementById("firstName").value;
 lastName =  document.getElementById("lastName").value;
 Title = document.getElementById("Title").value;
// healthNumber = parseInt(document,getElementById("healthNumber").value);
 email = document.getElementById("email").value;

 validEmail = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9._-]+\.[a-zA-Z]{2,6}$/;


if(firstName!="" && lastName!= "" && Title!="" && email !="")
{
        if(email.match(validEmail))
        {
            alert("All Values Validated");
        }
        else
        {
            alert("Enter a valid Email");
        }
}
else
{
    alert("All Fields are required");
 }



}