【发布时间】：2021-03-08 09:35:40
【问题描述】：
大家好，所以我想在这里用一些简单的 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>
【问题讨论】：
-
打开您的浏览器控制台，将其设置为即使在提交表单后也保留条目（应命名为“保留日志”或类似名称）……然后查看那里显示的错误 .
-
提示：表单中没有可以通过
document.forms["form"]["un"]访问的元素 -
谢谢我可能误删了用户名输入字段的名称属性！
-
你太棒了 CBore 谢谢我已经纠正了，现在它可以工作了！谢谢，我开始很不高兴XD
标签： javascript html jquery html-table