客户端表单验证。

Question

所以我一直在尝试做客户端表单验证。我试图验证名字，然后将其余的工作。我假设Javascript应该检查每个“onkeyup”的字段，并显示我的消息，如果该字段中没有字符，则需要“First Name Required”。我将在下面留下我的表单信息，然后是我以后使用的验证代码。我正在运行将'index.php'链接到'validation.js'的脚本。该脚本位于“”标记旁边的index.php中。

感谢您的任何帮助，我真的很感激它。

<form method="POST" name="signup" action="php/processuserform.php"> 

<input id="firstname" onsubmit="validateFirstName()" placeholder="First Name" 
type="text" /><label id="firstnameprompt"></label> 

<br><br> 

<input id="last_name" onkeyup="validateLastName()" placeholder="Last Name" 
type="text" /><label id="last_nameprompt"></label> 

<br><br> 


<input id="email" onkeyup="validateEmail()" placeholder="Email" type="text" /><label 
id="emailprompt"></label> 

<br /><br /> 

<input id="password" onkeyup="validatePassword()" placeholder="Create Password" 
type="password" /><label id="passwordprompt"></label> 

<br /><br /> 

<strong>Male</strong><input id="male" value="male" type="radio" /><label 
id="maleprompt"></label> 

<strong>Female</strong><input id="female" value="female" type="radio" /><label 
id="femaleprompt"></label> 


<br /><br /> 

<label for="submit">"I Agree To <a href="#">Terms And Conditions"</a></label> <input 
id="submit" value="Submit" type="submit" name="submit"/><br /><br /> 

======================================= ...

现在是我一直在尝试使用的验证。只是试图确保字段不是空的。

function validateFirstName() 
{ 
var name = document.getElementById("firstname").value; 

if(name.length == 0) 

{ 
producePrompt("First Name Required", "firstnameprompt", "red"); 
return false; 

} 
} 

function producePrompt(message, promptlocation, color) 
{ 
document.getElementById(promptLocation).innerHTML = message; 
document.getElementById(promptLocation).style.color = color; 

} 

Answer 1

如果你想要做的就是确保字段不为空，您可以通过给你的JavaScript作为要求它标志着一类防止很多重复。

<input id="firstname" class="required" placeholder="First Name" /> 

注意我已经删除了内嵌JavaScript并添加了我们的className。现在我们可以使用一个函数来确保任何带有className“required”的输入中都有文本。

这样做的问题是，除了像“firstname is required”这样的通用类型（我们可以通过获取id来完成）之外，我们不能为我们的catch-all JavaScript编写漂亮的干净验证消息。我们也无法使用我们的全部功能来定制我们放置每条验证消息的位置。这就是数据属性派上用场的地方。所以，现在我们的文本框的样子：

<input id="firstname" class="required" placeholder="First Name" data-message="We need your first name!" data-prompt="firstnameprompt" /> 

的“数据 - _”属性是用于存储数据的特定于该元素，这样我们就可以使用通用的功能，而不牺牲特异性真的很方便。你可以用你想要的任何名字创建任意数量的名字（但是在“数据”的前面加上名字是最好的做法，你可以通过正则表达式来使用它们来获得具体信息，而不必写出大量的情况 - 特定的JavaScript。不管怎样，现在我们已经准备好做一个功能，可以做十的工作。

var requireds = document.getElementsByClassName('required'); 
for(var i = 0, i < requireds.length; i++) { //for each required field 
    requireds.addEventListener('keyup', function(event){ 
     //do stuff whenever this element changes 
    }); 
} 

现在，我们已经把它贴听众给每个需要的文本框，将执行“//做的东西”每当如果我们决定更改触发验证的事件，则很容易在一行而不是十行中执行

说到事件，现在是我们需要思考的时候t我们正在使用的事件的效率。在这个例子中，每次在该字段中都有一个关键字时，它会查看它是否为空。这种情况很少发生（删除和退格，仅举几例）。否则，大多数情况下，键入会发生，因为用户正在向该字段输入数据。所以你真的只是检查用户是否已经从框中删除了现有的文本。如果他们点击提交而没有触及任何文本框，他们将被允许通过。不是一个非常有用的功能，是吗？相反，我们应该将我们的活动更改为form.submit。您可能不喜欢这种声音，因为您希望反馈更加及时，我同意，但这是代表您可以赞美form.submit事件的代码。如果我们只被允许使用一个事件进行验证，那么表单提交将会给用户发送空白数据的可能性最小。 Submit.click是紧随其后的，但用户可以按下输入键并通过空白数据。因此，让我们放弃上面的代码，做：

var signupForm = document.getElementsByName('signup')[0]; 
signupForm.addEventListener('submit', function(event){ 
    var requireds = document.getElementsByClassName('required'); 
    for (var i = 0; i < requireds.length; i++){ 
     if(requireds[i].value.length == 0){ 
       event.preventDefault(); //stop the form from submitting 
       var errorMessage = requireds[i].getAttribute('data-message'); 
       var promptLabel = document.getElementsById(requireds[i].getAttribute('data-prompt'))[0]; 
       promptLabel.innerHTML = errorMessage; 
     } 
    } 
    event.preventDefault(); //stop the form from submitting 
    return errorMessage.length == 0; //for older browsers, false if there's an error 
    }); 

以上将验证整个表单，找到地方它是无效的，并提出很好的格式化的错误消息的提示标签，你必须在相邻的地方。这基本上就是JQuery.validate插件的工作方式，除了更酷的功能。

对JavaScript验证的强制性警告：它应该只是为了方便用户获得更多的即时反馈，或者为您的服务器节省一些额外的负载。黑客/机器人很容易绕过你的注册页面，并直接发送post头到processesuserform.php，所以你的php应该总是在触发数据库之前做一些强大的验证/编码，并且发布任何原始数据。

Answer 2

替代方法适用于现代浏览器：使用html5表单验证（无JS需求）进行客户端表单验证 - 如下所示：<input type=text required minlength=8>。

Answer 3

ü可以用你的JavaScript supose

function validate(){ 
      var title=document.meetingform.subject.value; 
      var status=false; 
      if(title==""){ 
      document.getElementById("subjecterror").innerHTML= 
      "Please enter your name"; 
      status=false; 
      }else{ 
      document.getElementById("subjecterror").innerHTML=""; 
      status=true; 
      } 
      return status; 
      } 

在HTML中有这样做很容易：

<form name="meetingform" class="form-horizontal" action="<?php echo base_url();?>index.php/Notes/add_notes" onsubmit="return validate()" method="POST" enctype="multipart/form-data"> 
    <div class="form-body"> 
     <div class="form-group"> 
     <label class="control-label col-md-3">SUBJECT</label> 
     <div class="col-md-9"> 
      <input name="subject" id="subject" placeholder="Title" class="form-control" type="text"> 
      <span id="subjecterror" name="subjecterror" style="color:#f00"></span> 
     </div> 
     </div> 
<form>