jquery表单提交错误信息提示功能实现

效果图：

html代码：

    <form action="" method="" name="form2">
      <p class="m_t30 error_p2">
        <p>
          我是
          <select name="identity" id="ko" class="form-control">
<option></option>
<option value="investor">投资者</option>
<option value="developer">地产开发商</option>
          </select>
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="text" class="form-control" name="name" placeholder="用户名">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="email" class="form-control" name="email" placeholder="电子邮箱">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="tel" class="form-control" name="phone" placeholder="手机">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
<p class="m_t10 error_p2">
        <p>
          <select name="country" class="form-control">
<option></option>
<option>国家或地区</option>
<option value="1">中国</option>
<option value="2">美国</option>
          </select>
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <select name="province" class="form-control">
<option></option>
<option>州/省</option>
<option value="1">广东</option>
<option value="2">加州</option>
          </select>
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="password" class="form-control" name="pwd" placeholder="密码">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10 error_p2">
        <p>
          <input type="password" class="form-control" name="pwd2" placeholder="再次确认密码">
        </p>
        <p>
          <p class="error_p2"><i class="glyphicon glyphicon-info-sign"></i>注册错误信息</p>
        </p>
      </p>
      <p class="m_t10">
        <p>
          <button class="btn btn_login" type="button" onclick="btn_register()">下一步</button>
        </p>
      </p>
    </form>

css代码：

<style>
  .m_t10 {
    margin-top: 20px;
  }
  .error_p2 {
    background-color: #FF6900;
    color: white;
    font-size: 10px;
    padding: 5px;
    border-radius: 5px;
    display: none;
  }
  .error_p2 i {
    margin-right: 5px;
  }
</style>

js代码

简要说明：

  //执行对应表单元素的失去焦点事件$('input[name=XX]',formX).blur()
  //定义对应的参数来获取值，如:var pwd=$(this).val();
  //定义参数获取对应错误提示信息的标签元素对象，这里的是var span = $(this).parents('.error_p2').find('.error_p2');
  //简要说明.parents('')方法获取的是祖先元素为（'.error_p2'），看清楚有带"s"，简单来说如果.error_p2是当前元素的上三级$('this').parent().parent().parent()，而用$('this').parents('.error_p2')能一步到位获取到该元素对象，而find('')方法刚好相反，一步到位的获取对应后辈元素对象
  //然后就是根据条件判断，判断的正则表达式我就不一 一举例了（因为我也记不住那么多= =、），是否符合返回对应的数组元素true、false值，实现隐藏错误提示，并且给数组validate2的值赋值。
  //最后提交表单时，再次执行判断isOK是否为true
  //isOK值为false的话就全部执行一次表单元素的失去焦点事件，从而提示错误信息
  //isOK值为true的话才提交表单。
  //ps:表单里的button元素如果不是提交按钮，记得将type=“button”，否则默认是type=“submit”，点击就会提交;

写在最后的话：

样式和布局没怎么设置好，页面效果欠佳，深感抱歉

还是那句话，写jq先想好要获取哪些对象，执行什么事件，最后什么元素对象达到怎样的效果，parents和find方法和省事，不过使用时注意嵌套好p达到整体性效果。

相关推荐：

PHP 编码错误不显示错误信息提示解决方法_PHP教程

表单必填项

基于jquery实现漂亮的动态信息提示效果_jquery

以上就是jquery表单提交错误信息提示功能实现的详细内容，更多请关注Gxl网其它相关文章！