首页
所有分类
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 相关文章推荐
js 覆盖和重载 函数
Sep 25 Javascript
为你的网站增加亮点的9款jQuery插件推荐
May 03 Javascript
jQuery元素选择器用法实例
Dec 23 Javascript
jQuery取消ajax请求的方法
Jun 09 Javascript
JS拖动鼠标画出方框实现鼠标选区的方法
Aug 05 Javascript
JS组件Bootstrap Select2使用方法解析
May 30 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
AngularJS中scope的绑定策略实例分析
Oct 30 Javascript
Node.js Koa2使用JWT进行鉴权的方法示例
Aug 17 Javascript
vue-router动态设置页面title的实例讲解
Aug 30 Javascript
JavaScript文本特效实例小结【3个示例】
Dec 22 Javascript
vue mvvm数据响应实现
Nov 11 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
React(6) 对讲机(1) i5 10400(1) R71E(1) win11(40) GTX1660(1) R72E(1) i5 9400(1) win10(43) i7 6700(1)
You might like
php 调试利器debug_print_backtrace()
2012/07/23 PHP
PHP中call_user_func_array回调函数的用法示例
2016/11/26 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
js中iframe调用父页面的方法
2014/10/30 Javascript
jQuery多个input求和的实现方法
2015/02/12 Javascript
在JSP中如何实现MD5加密的方法
2016/11/02 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
2017/01/04 Javascript
js实现带缓动动画的导航栏效果
2017/01/16 Javascript
基于Jquery Ajax type的4种类型(详解)
2017/08/02 jQuery
微信小程序 数据绑定及运算的简单实例
2017/09/20 Javascript
JS获取数组中出现次数最多及第二多元素的方法
2017/10/27 Javascript
浅谈Node 调试工具入门教程
2018/03/20 Javascript
浅谈webpack4 图片处理汇总
2018/09/12 Javascript
Vue 动态添加路由及生成菜单的方法示例
2019/06/20 Javascript
vue递归获取父元素的元素实例
2020/08/07 Javascript
Vue页面渲染中key的应用实例教程
2021/01/12 Vue.js
[02:09]2018DOTA2亚洲邀请赛TNC赛前采访
2018/04/04 DOTA
[46:50]Liquid vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python 备份程序代码实现
2017/03/06 Python
Python3 循环语句(for、while、break、range等)
2017/11/20 Python
pycharm debug功能实现跳到循环末尾的方法
2018/11/29 Python
python3实现名片管理系统
2020/11/29 Python
python输出国际象棋棋盘的实例分享
2020/11/26 Python
Trina Turk官网：美国时装和泳装品牌
2018/06/10 全球购物
ECCO英国官网：丹麦鞋履品牌
2019/09/03 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
新入职员工的自我介绍演讲稿
2014/01/02 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
标准大学生职业生涯规划书写作指南
2014/09/18 职场文书
债务授权委托书范本
2014/10/17 职场文书
2014年监理工作总结范文
2014/11/17 职场文书
单位提档介绍信
2015/10/22 职场文书
2016五一劳动节慰问信
2015/11/30 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
自己搭建resnet18网络并加载torchvision自带权重的操作
2021/05/13 Python
Mysql systemctl start mysqld报错的问题解决
2021/06/03 MySQL