Javascript 客户端表单验证。

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

谢谢你的帮助，我真的很感激。

---

如果您只想确保字段不为空，那么可以通过为JavaScript提供一个将其标记为必需的类来防止大量重复

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

注意，我已经删除了内联JavaScript并添加了我们的类名。现在我们可以使用一个函数来确保任何类名为“required”的输入都包含文本

问题在于，除了像“firstname是必需的”（我们可以通过获取id来实现）这样的通用消息之外，我们无法为我们的catch-all JavaScript编写干净的验证消息。我们也没有一种方法来定制我们使用catch-all将每个验证消息放在哪里。这就是数据属性派上用场的地方。现在我们的文本框看起来像：

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

“data-3;”属性对于存储特定于该元素的数据非常方便，因此我们可以在不牺牲特定性的情况下使用通用函数。您可以使用任意名称创建任意数量的函数（但作为最佳实践，请在名称前加上“data-”。您可以将它们与正则表达式一起使用，以获得真正的特定性，而无需编写大量特定于情况的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
    });
}

var requireds=document.getElementsByClassName（'required'）；
对于（var i=0，i

现在，我们已将侦听器附加到每个所需的文本框，每当用户键在该框上时，该文本框将执行“//do stuff”。这取代了必须内联执行的操作。优点是，如果我们决定更改触发验证的事件，则很容易在一行而不是十行中执行

说到事件，现在我们需要考虑我们正在使用的事件的效率。在本例中，每当该字段中有一个keyup时，它都会查看它是否为空。这种情况很少发生（删除和退格，仅举几例）。否则，大多数情况下，由于用户正在字段中输入数据，因此会出现加键。因此，您实际上只是检查用户是否已从框中删除现有文本。如果他们单击“提交”而从未接触任何文本框，则将允许他们通过。这不是一个非常有用的功能，不是吗？相反，我们应该将事件更改为form.submit。您可能不喜欢这样的声音，因为您希望反馈更加即时，我也同意，但这是您可以对form.submit事件进行补充的代码。如果我们只允许使用一个事件进行验证，则form submit将使用户发送空白数据的可能性最小。submit.click是第二步关闭，但用户可以按enter键并使用空白数据通过。因此，让我们放弃上面的代码并执行以下操作：

 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
  });

var signupForm=document.getElementsByName（'signup'）[0]；
signupForm.addEventListener（'submit'，函数（事件）{
var requireds=document.getElementsByClassName（'required'）；
对于（变量i=0；i

上面将验证整个表单，找到它无效的地方，并将格式良好的错误消息放在每个表单旁边的提示标签中。这就是JQuery.validate插件的基本工作方式，除了更酷的功能

---

关于JavaScript验证的强制性警告：它只应用于方便用户获得更多即时反馈，或为服务器节省一些额外负载。黑客/机器人可以轻松绕过您的注册页面，将帖子标题直接发送到processesuserform.php，因此您的php应该在touchi之前始终执行一些强验证/编码使用发布到数据库中的任何原始数据对数据库进行加密。

对于现代浏览器的替代方法使用html5表单验证（不需要JS）进行客户端表单验证-就像这样：

u可以通过javascript轻松完成

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>

---

脚本标记位于结束正文标记的下一个。它不会显示错误。我应该使用onclick吗？应该在每个“onkeyup”上检查字段，您可以在blur上进行检查，或者在提交之前进行检查。@PatrickEvans是onblur perfeed method感谢您提供了非常有意义的额外信息。
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;
           }

<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>