首页 / JQUERY / jquery表单提交带错误信息提示效果

jquery表单提交带错误信息提示效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了jquery表单提交带错误信息提示效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含8911字，纯文字阅读大概需要13分钟。

内容图文

效果图：

jquery表单提交带错误信息提示效果 - 文章图片

html代码：

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

<!--注册错误判断form2-->
<script>
  //定义要提交的所有数据为一个数组validate2，并且全部赋值为false
  var validate2 = {
    identity: false,
    name: false,
    phone: false,
    email: false,
    country: false,
    province: false,
    mail: false,
    pwd: false,
    pwd2: false
  };
  var msg = ""; //定义提示信息
  //判断角色  
  $('select[name=identity]', form2).blur(function() {
    var identity = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判断用户名是否为空
    if(identity == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "请输入您的身份";
      span.html(msg);
      span.css('display', 'inline');
      validate2.identity = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.identity = true;
      return;
    }
  })
  //      //判断用户名  
  $('input[name=name]', form2).blur(function() {
    var name = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判断用户名是否为空
    if(name == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "请输入用户名";
      span.html(msg);
      span.css('display', 'inline');
      validate2.name = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.name = true;
      return;
    }
  })
  //判断手机
  $('input[name=phone]', form2).blur(function() {
    var phone = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判断用户名是否为空
    if(phone == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "请输入手机号";
      span.html(msg);
      span.css('display', 'inline');
      validate2.phone = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.phone = true;
      return;
    }
  })
  //判断国家
  $('select[name=country]', form2).blur(function() {
    var country = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判断用户名是否为空
    if(country == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "请输入国家";
      span.html(msg);
      span.css('display', 'inline');
      validate2.country = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.country = true;
      return;
    }
  })
  //判断省份
  $('select[name=province]', form2).blur(function() {
    var province = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判断用户名是否为空
    if(province == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "请输入省或州";
      span.html(msg);
      span.css('display', 'inline');
      validate2.province = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.province = true;
      return;
    }
  })
  //判断邮政编码
  $('input[name=mail]', form2).blur(function() {
    var mail = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判断用户名是否为空
    if(mail == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "请输邮政编码";
      span.html(msg);
      span.css('display', 'inline');
      validate2.mail = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.mail = true;
      return;
    }
  })
  //判断email
  $('input[name=email]', form2).blur(function() {
    var email = $(this).val();
    var reg = /\w+[@]{1}\w+[.]\w+/;
    var span = $(this).parents('.error_div2').find('.error_p2');
    if(email == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "请填写邮箱";
      span.html(msg);
      span.css('display', 'inline');
      validate2.eamil = false;
      return;
    } else if(reg.test(email) == false) {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "邮箱格式不正确";
      span.html(msg);
      span.css('display', 'inline');
      validate2.email = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');

      validate2.email = true;
      return;
    }
  })
  //判断密码  
  $('input[name=pwd]', form2).blur(function() {
    var pwd = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判断用户名是否为空
    if(pwd == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "密码不能为空";
      span.html(msg);
      span.css('display', 'inline');
      validate2.pwd = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.pwd = true;
      return;
    }
  })
  //判断再次确认密码  
  $('input[name=pwd2]', form2).blur(function() {
    var pwd2 = $(this).val();
    var span = $(this).parents('.error_div2').find('.error_p2');
    //判断用户名是否为空
    if(pwd2 == '') {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "确认密码不能为空";
      span.html(msg);
      span.css('display', 'inline');
      validate2.pwd2 = false;
      return;
    } else if(pwd2 != $('input[name=pwd]', form2).val()) {
      msg = '<i class="glyphicon glyphicon-exclamation-sign"></i>' + "确认密码与密码不一致";
      span.html(msg);
      span.css('display', 'inline');
      validate2.pwd2 = false;
      return;
    } else {
      msg = "";
      span.css('display', 'none');
      validate2.pwd2 = true;
      return;
    }
  })
  //提交表单，isOK的值是所有提交信息的true，false判断，
  //只要有一个为false，isOK的值就是false，
  //isOK值为false的话就全部执行一次表单元素的失去焦点事件，从而提示错误信息
  //isOK值为true的话才提交表单。  
  //因为有些页面可能不止一个需要提交的表单或者有些表单元素的name重复，所以根据form name=".. "，来区分元素失去事件，这里是form2就是对应的<form name>
  function btn_register() {
    var isOK = validate2.identity && validate2.name && validate2.phone && validate2.email && validate2.mail && validate2.country && validate2.province && validate2.pwd && validate2.pwd2;
    var form2 = $('form[name=form2]');
    if(isOK) {
      //。。。执行提交事件
      form2.submit();
    } else {
      $('select[name=identity]', form2).trigger('blur');
      $('input[name=name]', form2).trigger('blur');
      $('input[name=phone]', form2).trigger('blur');
      $('input[name=email]', form2).trigger('blur');
      $('input[name=mail]', form2).trigger('blur');
      $('select[name=country]', form2).trigger('blur');
      $('select[name=province]', form2).trigger('blur');
      $('input[name=pwd]', form2).trigger('blur');
      $('input[name=pwd2]', form2).trigger('blur');
    }
  }
</script>

简要说明：

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

写在最后的话：

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！

内容总结

以上是互联网集市为您收集整理的jquery表单提交带错误信息提示效果全部内容，希望文章能够帮你解决jquery表单提交带错误信息提示效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/345342.html

来源：【匿名】

【上一篇】jQuery插件HighCharts实现的2D对数饼图效果示例【附demo源码下载】【下一篇】学习php+jQuery+Ajax实现点赞效果的方法

更多 ►

【jquery表单提交带错误信息提示效果】教程文章相关的互联网学习教程文章

Jquery ajax中表单提交被拦截的问题处理方法【代码】【图】

在实际开发项目中，由于要做支付宝的批量退款处理，需要用到ajax中去提交表单数据，项目截图如下：　　由于在第二张截图“确认退款”那里需要异步ajax提交数据到服务器处理信息，处理成功后将返回的数据装载到对应界面的表单隐藏域中，然后再使用$(‘#formId‘).submit()提交表单，此时遇到谷歌、IE等浏览器拦截表单提交后的URL新窗口，思考了很久，终于找到了解决办法：以下内容转载自http://hezlh.blog.163.com/blog/static/178...

Jquery组织Form表单提交之Form submission canceled because the form is not connected【代码】【图】

有时候导出Excel时需要根据某些条件筛选数据，然后将数据通过NPOI生成Excel并导出。组织数据时可以通过放到一个表单中，某些场景是使用脚本(如：jquery)组织一个form(通过字符串拼接)，然后将这个from的转换成jquery对象或者Dom对象，再调用对应的submit方法。例子如下，有一个html页面<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><meta charset="utf-8"/></...

javascript – jQuery $.get()不会在表单提交时执行【代码】

提交表单时,我想异步调用带有一些$_GET参数的电子邮件发送脚本order.php. jQuery $.get()函数不执行,控制台中没有显示错误. HTML标记：<form name="submit" id="orderconfirm" action="somefile.php"> <input type="hidden" name="orderkey" id="orderkey" value="somekey"/> <input type="text" name="email" id="orderemail"/> <input type="submit" value="submit"/> </form>jQuery脚本：$(document).ready(function() {$('#ord...

javascript-使用jquery和.submit捕获表单提交后清除表单【代码】

经过大量研究,提交表单后,我仍然无法清除表单并显示“已提交邮件”消息. HTML：<!DOCTYPE html> <html lang="es"><head></head><body id="page-top"></nav><header class="masthead text-center text-white d-flex"></header><section id="contact" data-delimiter="1"> <div class="row"><div class="col-lg-6"><h3 class="heading...

javascript-jquery的ajax和php配合使用实现无刷新表单提交的一点问题【图】

如图就是我的页面，打开主页链接后显示的是主体部分（左侧黑框）；右侧子页面（右侧div#main_box内通过ajax获取的子页面）在刚打开主页链接时显示按下按钮一时加载的子页面现在我在按下按钮二时加载的子页面2中有个表单，需要提交表单然后通过PHP获取表单提交的值然后去数据库查询信息，返回数据库数据再输出到这个子页面2中，不知道怎么实现。在网上找了好久找到这种方式：但是不会用，请大神赐教回复内容：如图就是我的页面，...

请问jquery有方法可以判断一个表单提交之后结果是成功或不成功吗？

具体是这样的，今天在做项目的时候用到layer弹出插件，我弹出的是一个iframe层。我用了ajax提交，通过ajax提交后的回调判断提交是否成功，成功就调用parent.layer.close(index);关掉这个弹出框并且在外面刷新当前页面取最新数据。但是问题来了，现在需要加一个表单验证，我打算用jquery validate来做验证，但是我提交的时候是用ajax，不经过form标签的。所以想问下有什么方法可以判断一个表单提交之后结果是成功或不成功表单处：...

关于JQueryMoblie多选表单提交时PHP接收的处理方法

这两天在帮一个初创公司做一个公司的展示页面，其中需要设计一个人员的招聘信息表单。由于JQuery Moblie这货在表单提交的时候默认使用了Ajax，所以在PHP后台每次都只能接收到多选表单选择的最后一项数据。所以说解决方法是什么呢？当然是禁止Ajax啊，可以在from标签中添加data-ajax=”false” 标签即可。form name="myForm[]" method="post" action="submit.php"data-ajax="false">特别注意一下："area[]" id="area" multiple="mul...

PHPjQueryajax表单提交小示例（含insert,select）

功能描述：能够通过表单向MySQL数据库新增记录，能够表单提供关键词进行查询 index.html 货物销售记录销售方功能模拟：登记销售记录>> 客户姓名客户电话购货日期货物编号货物名称购货数量这里显示结果 ...

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

本文主要介绍了jquery表单提交带错误信息提示效果的实例，具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助大家更好的完成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></se...

Jquery实现表单提交按钮变灰，防止多次点击提交重复数据

表单提交时候我们应该控制提交按钮，不能点击多次进行数据的重复提交。要不然就会有冗余的重复的数据在系统中，造成系统出现数据垃圾。jQuery很简单的就可以实现对表单提交按钮控制，下面就是相关的例子和代码。<form action="${pageContext.servletContext.contextPath}/XXX/###" method="post" id="messageForm">姓名:<input name = "name" type="text" /><button type="button" id="submit">提交申请</button> </form> <script>...

修改jQuery.Autocomplete插件支持中文输入法避免TAB、ENTER键失效、导致表单提交_jquery

但唯一遗憾的是，在对中文输入法打开时，firefox3.0中是对中文拼音的自动匹配，而对输入后的中文无法及时触发匹配；而在我的IE6.0下，则无此问题。原因分析： Autocomplete插件对用户输入字符的触发自动匹配是通过”keydown”事件进行的（可分析jquery.autocomplete.js第 92行），在IE6中，当输入法打开时，输入的字符是不会触发”keydown”的，只有中文输入完毕才触发之，所以中文输入和latin文没有区别的；但在firefox3.0下，无...

JQuery打造PHP的AJAX表单提交实例_jquery【图】

如果你对JQuery的基本语法还不是很熟悉，请搜索本站的教程资源。如果你对PHPMailer用法不熟悉，请查看本站的另一篇文章《使用PHPMailer类库发送电子邮件》。第一步，创建一个表单HTML页面这里，我们只展示主要的表单部分HTML结构代码：代码如下:<div id="contact_form"> <form name="contact" method="post" action=""> <fieldset> <label for="name" id="name_label">姓名</label> <input type="text" name="name" id="nam...

jqueryform表单提交插件asp.net后台中文解码_jquery

在asp.net 后台页面提取时需要解码。解码的方式为：HttpUtility.UrlDecode(context.Request["infostr"].ToString());

JQuery在表单提交之前修改提交的值[原创]_javascript技巧

今天在做公司的项目的时候，遇到一个问题：我们希望在二级栏目搜索的时候，判断用户有没有加上这个栏目特有的关键字（比如“教程”），因为我们是全站搜索，如果不加关键字，搜索出来的东西会很多、很杂，这样我们就是想在教程这个栏目下，搜索出来的全都是教程相关的东西，所以我们东了点小心思，对搜索的关键字做了点小改动，代码如下：代码如下: $(#search-form).submit(function() {//取出keyword$keyword = $(#keyword);//判...

jQueryajax在GBK编码下表单提交终极解决方案(非二次编码方法)_jquery

前言: 当jquery ajax在utf-8编码下（页面utf－8，接收utf-8），无任何问题。可以正常post、get，处理页面直接获取正确的内容。但在以下情况下: GBK -> AJAX POST ->GBK UTF-8 -> AJAX POST ->GBK 后台代码无法获取正确的内容，通常表现为获取到奇怪字符、问号。经典解决方法： 1：发送页面、接收页面均采用UTF-8编码。 2：发送页面在调用ajax post方法之前，将含有中文内容的input用encodeURIComponent编码一次，而接收页面则调用...

JQUERY - 技术教程分类

jQuery 教程 jQuery 简介 jQuery 安装 jQuery 语法 jQuery 选择器 jQuery 事件 jQuery 隐藏/显示 jQuery 淡入淡出 jQuery 滑动 jQuery 动画 jQuery 停止动画 jQuery Callback jQuery 链 jQuery 捕获 jQuery 设置 jQuery 添加元素 jQuery 删除元素 jQuery CSS 类 jQuery css() 方法 jQuery 尺寸 jQuery 遍历 jQuery 祖先 jQuery 后代 jQuery 同胞 jQuery 过滤 jQuery AJAX 简介 jQuery load() 方法 jQuery get()/post() 方法 jQuery noConflict() 方法 jQuery JSONP jQuery 实例 jQuery 选择器 jQuery 事件方法 jQuery 效果方法 jQuery HTML / CSS 方法 jQuery 遍历方法 jQuery AJAX 方法 jQuery 杂项方法 jQuery 属性 jQuery Validate jQuery Cookie jQuery Accordion jQuery Autocomplete jQuery Growl jQuery 密码验证 jQuery Tooltip jQuery Treeview jquery 全部

JQUERY - 最热教程

javascript中html字符串转化为jquerydo...js批量设置元素样式和封装似于jquery的...使用jquery获取url及url参数的方法 jQuery取消ajax请求的方法 jquery中根据获取元素的6种方法总结如何通过jQuery添加新的内容 jQuery和ajax实现鼠标单击修改内容的方...基于JSON格式数据的简单jQuery幻灯片插...jquery设置内联样式css()js调用iframe实现打印页面内容的方法_j...

首页 / JQUERY / jquery表单提交带错误信息提示效果

jquery表单提交带错误信息提示效果

内容导读

内容图文

内容总结

内容备注

内容手机端

【jquery表单提交带错误信息提示效果】教程文章相关的互联网学习教程文章

Jquery ajax中表单提交被拦截的问题处理方法【代码】【图】

Jquery组织Form表单提交之Form submission canceled because the form is not connected【代码】【图】

javascript – jQuery $.get()不会在表单提交时执行【代码】

javascript-使用jquery和.submit捕获表单提交后清除表单【代码】

javascript-jquery的ajax和php配合使用实现无刷新表单提交的一点问题【图】

请问jquery有方法可以判断一个表单提交之后结果是成功或不成功吗？

关于JQueryMoblie多选表单提交时PHP接收的处理方法

PHPjQueryajax表单提交小示例（含insert,select）

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

Jquery实现表单提交按钮变灰，防止多次点击提交重复数据

修改jQuery.Autocomplete插件支持中文输入法避免TAB、ENTER键失效、导致表单提交_jquery

JQuery打造PHP的AJAX表单提交实例_jquery【图】

jqueryform表单提交插件asp.net后台中文解码_jquery

JQuery在表单提交之前修改提交的值[原创]_javascript技巧

jQueryajax在GBK编码下表单提交终极解决方案(非二次编码方法)_jquery

JQUERY - 相关标签

JQUERY - 技术教程分类

JQUERY - 最新教程

JQUERY - 最热教程