内联主动 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="[email protected]" 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>

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