Html和javascript框身份验证_Javascript_Html

Html和javascript框身份验证

javascript html

Html和javascript框身份验证,javascript,html,Javascript,Html,在下面的代码中，我试图让选择框在框旁边显示一条消息，如果它没有选择男性或女性值。如果选择了其中一个值，则不显示。但它不起作用，它可以很好地与电子邮件和密码的文本boses一起工作。有人能看到为什么它不起作用，并帮助我回答这个问题 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <!-- saved from url=(0045)https://v

在下面的代码中，我试图让选择框在框旁边显示一条消息，如果它没有选择男性或女性值。如果选择了其中一个值，则不显示。但它不起作用，它可以很好地与电子邮件和密码的文本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>


函数验证_性别（字段，alerttxt）
{
带（字段）{
apos=数值indexOf（“0”）；
如果（载脂蛋白>0）
{
document.getElementById（'gender_help'）。innerHTML=“”；
返回true；
}否则{
document.getElementById（'gender_help'）。innerHTML=alerttxt；
返回false；
}
}
}
功能验证\u电子邮件（字段，alerttxt）
{
带（字段）
{
apos=值。indexOf（“@”）；
dotpos=value.lastIndexOf（“.”）；
如果（apos您不能在非选项或optgroup的选择区域中显示文本。
我认为最好是：

在选择区域附近添加一个带有“需要有效性别”的范围，并在未选择性别时显示该范围
如果性别错误，则在选择区域中使用红色边框
“0”。indexOf（“0”）
为0
“M”。indexOf（“0”）
为-1
“F”。indexof（“0”）
为-1
您可以检查if（value！=“0”）{return true；}
这是一个令人震惊的反模式显示！！
不要将与
一起使用
缓存选择器，即var-emailHelper=document.getElementById（'email\u-help'）
不要使用内联javascript，即onClick=''
考虑使用类似于库的方法以跨浏览器的方式处理事件
一般来说，在新线路上安装支架是不好的
在
元素中不应该有
查看或获取一些其他提示、窍门和最佳实践。还有关于为什么不将与
一起使用的更多信息，请参见：
现在进入实际问题！
您在选择框中遇到问题。让我们尝试以下操作：
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
}

更新
在JSFIDLE中使用它一段时间后，我发现问题似乎是您的
标记嵌套在
标记中，这就是您无法看到它的原因
以下是一个主要使用您的代码的工作版本：
不能在选定元素中嵌套跨度
但是，您可以更新其中一个select元素，使其具有希望用户看到的文本
不过，最好是将跨度放在select旁边
这是无效的html：
<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>


选择。。。
男性
女性
欢迎使用Stack Overflow！“它不起作用”从来都不是一个好的错误描述。请描述出现了什么问题，收到了什么错误消息等。如果未选择男性或女性，则在性别选择框旁边不显示任何内容，如果单击提交而未输入男性或女性，则应显示此消息（需要有效的性别）。我知道您不能在框内插入文本，如果未选择任何内容，我希望文本显示在框外。确定。因此，请将您的文本移到框外。