在下面的代码中，我尝试让选择框在未选择男性或女性值的情况下在框旁边显示一条消息。如果选择了这些值之一，则不显示它。但它不起作用，它与电子邮件和密码的文本 boses 一起工作得很好，任何人都可以看到为什么这不起作用并帮助我找到答案。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<!-- saved from url=(0045)https://vle.wit.ie/file.php/8220/lab5pt2.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript">
function validate_gender(field,alerttxt)
{
with (field){
apos=value.indexOf("0");
if (apos>0)
{
document.getElementById('gender_help').innerHTML="";
return true;
}else{
document.getElementById('gender_help').innerHTML=alerttxt;
return false;
}
}
}
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
if (apos<1||dotpos-apos<2)
{document.getElementById('email_help').innerHTML=alerttxt;return false; }
else {document.getElementById('email_help').innerHTML="";return true;}
}
}
function validate_password(field, alerttxt){
with (field){
var re = /^[a-zA-Z0-9]{6,8}$/;
if (re.test(value))
{
document.getElementById('pass_help').innerHTML="";
return true;
}else{
document.getElementById('pass_help').innerHTML=alerttxt;
return false;
}
}
}
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{
alert(alerttxt);return false;
}
else
{
return true;
}
}
}
function validate_form(thisform)
{
with (thisform)
{
if (!validate_gender(gender,"A Valid gender is Required"))
{gender.focus();return false;}
if (!validate_email(email,"A Valid Email is Required"))
{email.focus();return false;}
if (!validate_password(pass,"Password must be between 6 and 8 characters and contain both numbers and alphas"))
{pass.focus();return false;}
}
}
</script>
</head>
<body>
<form action="" onsubmit="return validate_form(this)" method="post">
What is your gender?<br />
<select name="gender" ><span id="gender_help"></span>
<option value="0" selected="selected">Select...</option>
<option value="M">Male</option>
<option value="F">Female</option>
</select><br/>
Email: <input type="text" name="email" size="30" ><span id="email_help"></span><br>
Password <input type="password" name="pass" size="30"><span id="pass_help"></span><br>
<input type="submit" value="Submit">
</form>
</body></html>
最佳答案
这是令人震惊的反模式展示!!
- 请勿使用
with。 - 缓存您的选择器，即
var emailHelper = document.getElementById('email_help') - 不要使用内联 JavaScript，即
onClick='' - 考虑使用类似 jQuery 的库以跨浏览器的方式处理事件。
- 一般来说，将大括号放在新行上是不好的。
- 您不应该有
<span><select>里面元素。
查看http://javascript.crockford.com/或http://eloquentjavascript.net/了解一些其他提示和技巧以及最佳实践。还有更多关于为什么不使用with的信息这里:Are there legitimate uses for JavaScript's "with" statement?
现在进入实际问题!
您在使用选择框时遇到问题。让我们尝试这样的事情:
var genderHelper = document.getElementById('gender_help')
function validate_form(thisform) {
// your other stuff
if (!validate_gender(thisform.gender.value,"A Valid gender is Required")) {
thisform.gender.focus();
return false;
}
}
function validate_gender(gender, error) {
var validGender = (gender === "M" || gender === "F")
if (!validGender) {
genderHelper.innerHTML = error
}
return validGender
}
更新
在 jsFiddle 中玩了一段时间后，我发现问题似乎是你的 <span>标签嵌套在 <select> 内标签，这就是您看不到它的原因。
这是一个主要使用您的代码的工作版本:
关于javascript - Html 和 javascript 框认证，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8823036/