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

这是一个非常简单的例子，它有不同的方法。例如，如果存在错误而不是有一个隐藏，则可以添加元素。此外，当onblur元素上存在input事件时，您可以添加其他函数来检查有效值。

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应该是唯一的。你可以让“助手”成为一个类或使每个id不同（例如“fname-helper-h”）。

内联活动Javascript表单验证

2 个答案: