内联活动 Javascript 表单验证

Question

我正在处理联系表单，需要一些内联 javascript 表单验证。我已经有 php 验证，但我想有一些活动的表单验证，比如http://twitter.com/signup。我希望它在输入后显示和隐藏p 标签。这是我的html代码。

<form class="contact" method="POST" enctype="multipart/form-data" action="validate.php">


  <label for="fname">First Name*<br /></label>
  <input type="text" id="fname" style="font-family: Gochi Hand;" name="fname" placeholder="First" autofocus required autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">First Name Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">A First Name is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your First Name.</p>
    </div>
  <br /><br />

  <label for="lname">Last Name*<br /></label>
  <input type="text" id="lname" style="font-family: Gochi Hand;" name="lname" placeholder="Last" required autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice" style="color:green; ">Last Name Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">A Last Name is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Last Name.</p>
    </div>

  <br /><br />

  <label for="email">Email Address*<br /></label>
  <input type="email" name="email" style="font-family: Gochi Hand;" id="email" placeholder="example@website.com" pattern="^[\w-]+(\.[\w-]+)*@([a-z0-9-]+(\.[a-z0-9-]+)*?\.[a-z]{2,6}|(\d{1,3}\.){3}\d{1,3})(:\d{4})?$" required autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">Email Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">A Email is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Email.</p>
    </div>

  <br /><br />

  <label for="url">Website<br /></label>
  <input type="url" name="url" id="url" style="font-family: Gochi Hand;" placeholder="http://website.com"  pattern="^(http|https)://.+(.[a-zA-Z])$" autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">URL Looks Good.</p> 
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your URL.</p>
    </div>

  <br /><br />


  <label for="age">Age*<br /></label>
  <input type="text" size="3" id="age" name="age" style="font-family: Gochi Hand;" required class="age" required placeholder="Age" pattern="^\d+$" autocomplete="on" />
    <div class="notices">
        <p id="helper" style="color:green;" class="g-notice">Age Looks Good.</p> 
        <p id="helper" style="color:red;" class="r-notice">An Age is required.</p>
        <p id="helper" style="color:#0099FF;" class="h-notice">Enter Your Age.</p>
    </div>

  <br /><br />

  <label for="comments">Comments*<br /></label>
  <textarea style="font-family: Gochi Hand;" required id="comments" name="comments" cols="30" rows="10"></textarea>

  <br /><br />

  <input type="hidden" value="True" name="go" id="go" />

  <input style="color:red;" type="submit" class="submit" value="Send!" />
  </form>

任何建议或帮助都是值得的。

Answer 1

这是一个示例表格

html

<form id='test'>
Name * <input id="name" type="text"><span id='errName' class='error'>This is a required field</span>
</form>

css

.error{
  display:none;
  color:red;
}

javascript

document.getElementById('test').onsubmit=function(){
  if(document.getElementById('name').value=''){
    document.getElementById('errName').style.display='block';
    return false;
  }
  else{
    return true;
  }
}

这是一个非常简单的示例，并且有不同的方法。例如，如果出现错误，您可以只附加一个元素，而不是隐藏一个元素。此外，当input 元素上存在onblur 事件时，您可以添加另一个函数来检查有效值。

Answer 2

通常，您希望创建一个事件处理程序，当用户与输入字段交互并评估输入值以确定要显示的消息时调用该事件处理程序。显示相应的消息并隐藏所有其他消息。您可以在浏览器中执行简单的模式匹配或使用 AJAX 将输入发送到服务器以评估更复杂的验证，例如电子邮件是否已在使用中。

twitter 注册表单使用事件组合来触发评估脚本。看起来onclick（或onfocus），onchange和onblur都被使用了。指令在点击时显示（您的“.h-notice”等效项），输入在模糊时评估（元素失去焦点）。

我会使用 jQuery，因为您需要复杂的元素选择和事件处理。您可以编写普通的 javascript 来实现相同的效果，但这需要更多的代码。名字字段的 jQuery 代码如下所示：

<script type="text/javascript">
    jQuery(function($) {
        //hide all the messages
        $('.g-notice, .h-notice, .r-notice').hide();

        //create first name validator
        var fnameValidator = function() {
            var input = $('#fname');
            var notices = input.next('.notices');
            var g = notices.find('.g-notice');
            var h = notices.find('.h-notice');
            var r = notices.find('.r-notice');

            //hide all notices before deciding which to show
            g.hide();
            h.hide();
            r.hide();

            if (input.val() == '') {
                //input field is empty, show the help notice
                h.show();
            } else if (input.val().match(/[^\w\s]/) === null) {
                //input field is valid, show the good notice
                g.show();
            } else {
                //show required/error message
                r.show();
            }
        };

        //bind event handlers for the first name field
        $('#fname').click(fnameValidator).change(fnameValidator);
    });
</script>

顺便说一句：HTML 元素 ID 应该是唯一的。您可以将“helper”设为一个类或使每个 id 不同（例如“fname-helper-h”）。