Html和javascript框验证

Html and javascript box authentication

本文关键字：验证 javascript Html 更新时间：2023-09-26

在下面的代码中，我试图让选择框在框旁边显示一条消息，如果它没有选择值male或female。如果选择了其中一个值，则不显示它。但它不起作用，它可以很好地与电子邮件和密码的文本框配合使用。任何人都可以看到为什么它不起效果，并帮助我找到答案。

<!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这样的库以跨浏览器的方式处理事件
一般来说，在新的线路上加支架是不好的
<select>元素内部不应该有<span>

结账http://javascript.crockford.com/或http://eloquentjavascript.net/了解其他一些技巧和最佳实践。关于为什么不在这里使用with的更多信息：JavaScript'；s"；用"；陈述

现在进入实际问题

您的选择框有问题。让我们试试这样的东西：

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>标签中，这就是为什么你看不到它

这是一个主要使用您的代码的工作版本：

http://jsfiddle.net/6buUJ/1/

您不能在非选项或optgroup的选择区域中显示文本。我认为最好：

在选择区域附近添加一个带有"需要有效性别"的跨度，并在未选择性别时显示该跨度。
如果性别错误，则选择区域的边框为红色。

不能在select元素中嵌套span。

但是，您可以更新其中一个选择元素，使其具有您希望用户看到的文本。

不过，可能只有选择旁边的跨度是最好的。

这是无效的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>

"0".indexOf("0")为0

"M".indexOf("0")是-1

"F".indexof("0")是-1

您可以检查if (value != '0') { return true; }