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

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”的任何输入都包含文本。

这个问题是我们无法为我们的catch-all JavaScript编写漂亮的干净验证消息，除了像“firstname is required”这样的通用（我们可以通过抓取id来做）。我们也没有办法使用我们的catch-all来定制我们放置每个验证消息的位置。这就是数据属性派上用场的地方。所以现在我们的文本框看起来像：

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

“data- _ ”属性对于存储特定于该元素的数据非常方便，因此我们可以在不牺牲特异性的情况下使用泛型函数。您可以使用任何您想要的名称制作任意数量的内容（但请将名称前缀为“data-”作为最佳实践。您可以将它们与正则表达式一起使用，以真正具体化，而无需编写大量情况 - 特定的JavaScript。无论如何，现在我们已经准备好制作一个可以完成10个工作的功能。

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

现在我们已经将监听器附加到每个必需的文本框中，只要用户密钥上升到该框，就会执行“// do stuff”。这取代了必须内联。优点是，如果我们决定更改触发验证的事件，则可以在一行而不是十行中轻松完成。

说到事件，现在是我们需要考虑我们正在使用的事件的效率。在这个例子中，每当该字段中有一个keyup时，它将查看它是否为空。这种情况很少发生（删除和退格，仅举几例）。否则，大多数情况下，密钥启动是因为用户正在将数据输入到字段中。因此，您实际上只是检查用户是否已从框中删除现有文本。如果他们点击提交而没有触摸任何文本框，他们将被允许通过。这不是一个非常有用的功能吗？相反，我们应该将事件更改为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
  });

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

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

Answer 2

现代浏览器的

替代方式：使用html5表单验证（不需要JS）进行客户端表单验证 - 如下所示：<input type=text required minlength=8>。

Answer 3

你可以通过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>

客户端表单验证。

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

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

3 个答案: