javascript - 我的验证不正确,请看一下
问题描述
大家好,所以我想在这里用一些简单的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>
解决方案
尝试将脚本放在页脚而不是头部
推荐阅读
- angular - 如何在 Angular HttpClient 调用中设置 URL 的最大长度以防止 CORS 策略错误
- python - 砍掉 minmax 博弈树
- node.js - 如何使用 Google Oauth NodeJS 库中的刷新令牌静默获取新的访问令牌
- php - PHP 我应该在 openssl_encrypt() 中使用什么 MySQL 数据类型?
- reactjs - 反应表单提交和“无法在未安装的组件上执行状态更新”?
- java - 用骆驼从java对象生成巨大的xml
- c# - CsvHelper 不验证是否设置了转换
- postgresql - 无法恢复数据库转储 sql 文件
- java - Java - 从另一个类更改数组列表
- jenkins - 使用 JSON 文件填充 Jenkins 选择参数