首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onMarch 09, 2017

效果图：

jquery表单提交带错误信息提示效果    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表单提交带错误信息提示效果

- Author -

IT白菜哥

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jQuery.extend 函数详解
Feb 03 Javascript
js 实现 input type=&quot;file&quot; 文件上传示例代码
Aug 07 Javascript
jQuery学习之prop和attr的区别示例介绍
Nov 15 Javascript
jquery1.10给新增元素绑定事件的方法
Mar 06 Javascript
JavaScript验证Email(3种方法)
Sep 21 Javascript
使用jQuery操作HTML的table表格的实例解析
Mar 13 Javascript
jquery实现拖动效果
Aug 10 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
JavaScript 程序错误Cannot use 'in' operator to search的解决方法
Jul 10 Javascript
javascript实现获取一个日期段内每天不同的价格(计算入住总价格)
Feb 05 Javascript
vue使用codemirror的两种用法
Aug 27 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
AngularJS 防止页面闪烁的方法
Mar 09 #Javascript
js读取json文件片段中的数据实例
Mar 09 #Javascript
JavaScript实现动态增删表格的方法
Mar 09 #Javascript
Angularjs处理页面闪烁的解决方法
Mar 09 #Javascript
多个上传文件用js验证文件的格式和大小的方法(推荐)
Mar 09 #Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 #Javascript
js获取json中key所对应的value值的简单方法
Jun 17 #Javascript
Three.js(1) HBuilder(1) kubernetes(1) 查询效率(1) GPU(1) 分布式追踪(1) group by(1) 条形码(1) Express(1) delete in(1)
You might like
用PHP编写PDF文档生成器
2006/10/09 PHP
模仿OSO的论坛（五）
2006/10/09 PHP
php 实现进制转换(二进制、八进制、十六进制）互相转换实现代码
2010/10/22 PHP
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php原生导出excel文件的两种方法(推荐)
2016/11/19 PHP
PHP实现的常规正则验证helper公共类完整实例
2017/04/27 PHP
多个Laravel项目如何共用migrations详解
2018/09/25 PHP
基于jQuery的动态增删改查表格信息，可左键/右键提示（原创自Zjmainstay）
2012/07/31 Javascript
js获取URL的参数的方法(getQueryString)示例
2013/09/29 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
2014/06/16 Javascript
浅谈轻量级js模板引擎simplite
2015/02/13 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
jQuery dataTables与jQuery UI 对话框dialog的使用教程
2016/09/02 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
AngularJS入门教程一：路由用法初探
2017/05/27 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
node中modules.exports与exports导出的区别
2018/06/08 Javascript
JS开发常用工具函数(小结)
2019/07/04 Javascript
electron踩坑之remote of undefined的解决
2020/10/06 Javascript
JavaScript 实现轮播图特效的示例
2020/11/05 Javascript
在IIS服务器上以CGI方式运行Python脚本的教程
2015/04/25 Python
python3+PyQt5实现自定义窗口部件Counters
2018/04/20 Python
python画柱状图--不同颜色并显示数值的方法
2018/12/13 Python
Pytorch中的variable, tensor与numpy相互转化的方法
2019/10/10 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Python通过2种方法输出带颜色字体
2020/03/02 Python
django-xadmin根据当前登录用户动态设置表单字段默认值方式
2020/03/13 Python
canvas绘图按照contain或者cover方式适配并居中显示
2019/02/18 HTML / CSS
Html5页面上如何禁止手机虚拟键盘弹出
2020/03/19 HTML / CSS
大学生蛋糕店创业计划书
2014/01/13 职场文书
数学检讨书1000字
2014/02/24 职场文书
《盘古开天地》教学反思
2014/02/28 职场文书
音乐节策划方案
2014/06/09 职场文书