首页
所有分类
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 常见操作实现方式和常用函数方法总结
May 06 Javascript
Javascript 键盘事件的组合使用实现代码
May 04 Javascript
用js写了一个类似php的print_r输出换行功能
Feb 18 Javascript
基于JavaScript实现继承机制之调用call()与apply()的方法详解
May 07 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
点击表单提交时出现jQuery没有权限的解决方法
Jul 23 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
May 31 Javascript
JS判断日期格式是否合法的简单实例
Jul 11 Javascript
简单谈谈ES6的六个小特性
Nov 18 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
微信小程序tabbar不显示解决办法
Jun 08 Javascript
详谈js原型继承的一些问题
Sep 06 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
yolo3(1) ResNet50(1) Seaborn(1) Xception(1) 进程假死(1) tensorflow(2) jenkins(1) 逆序(1) Inception(2) 字符串(2)
You might like
用PHP将数据导入到Foxmail
2006/10/09 PHP
PHP4实际应用经验篇(7)
2006/10/09 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
PHP isset()与empty()的使用区别详解
2017/02/10 PHP
yii2项目实战之restful api授权验证详解
2017/05/20 PHP
实现连缀调用的map方法(prototype)
2009/08/05 Javascript
jQuery图片播放8款精美插件分享
2013/02/17 Javascript
Javascript排序算法之计数排序的实例
2014/04/05 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
使用JavaScript 编写简单计算器
2014/11/24 Javascript
jQuery实现首页顶部可伸缩广告特效代码
2015/04/15 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
在javascript中创建对象的各种模式解析
2016/05/16 Javascript
node.js与C语言 实现遍历文件夹下最大的文件，并输出路径，大小
2017/01/20 Javascript
微信小程序手势操作之单触摸点与多触摸点
2017/03/10 Javascript
Webpack 服务器端代码打包的示例代码
2017/09/19 Javascript
原生javascript实现的全屏滚动功能示例
2017/09/19 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
2018/07/25 Javascript
微信小程序实现一张或多张图片上传（云开发）
2019/09/25 Javascript
微信小程序实现滚动加载更多的代码
2019/12/06 Javascript
JavaScript实现烟花绽放动画效果
2020/08/04 Javascript
利用Python爬取微博数据生成词云图片实例代码
2017/08/31 Python
tensorflow学习笔记之简单的神经网络训练和测试
2018/04/15 Python
Python实现读取机器硬件信息的方法示例
2018/06/09 Python
python实现俄罗斯方块游戏
2020/03/25 Python
Python3.4解释器用法简单示例
2019/03/22 Python
window环境pip切换国内源（pip安装异常缓慢的问题）
2019/12/31 Python
python输出第n个默尼森数的实现示例
2020/03/08 Python
html5+css3之动画在webapp中的应用
2014/11/21 HTML / CSS
韩国著名的在线综合购物网站：Akmall
2016/08/07 全球购物
英国专业美容产品在线：Mylee（从指甲到脱毛）
2020/07/06 全球购物
公司年会晚宴演讲稿
2014/01/06 职场文书
大学生助学金感谢信
2015/01/21 职场文书
社区安置帮教工作总结2015
2015/05/20 职场文书
初中美术教学反思
2016/02/17 职场文书