文章目录

jquery淡入淡出错误提示信息

在注册、登录提交表单的时候,我们经常需要验证用户的输入是否正确。

如果错误,则需要给出提示,达到良好的用户体验。

今天小编分享的就是,提交的时候如果错误,则淡显示错误提示,如果正确则缓慢消失。

html代码<style>
  .err{display:none;height:20px; line-height:20px; border:1px #c1ad05 solid; background:#f9df08}</style>
  </style>
  <div>
  <label>手机号:</label>
  <input type="text" id="phone" name="phone"/>
  <span class="err"></span>
  </div>   
  <input type="submit" class="btn" value="提交" />
  <script type="text/javascript">
  $(document).ready(function(){
  $(".btn").click(function(){
  var phone=$.trim($("#phone").val());
  if (phone.length!=11){
  $('.err').show("slow");
  $('.err').html('手机号码有误!');
  }else{
  $('.err').hide("fast");
  $('.err').html('');
  }
  });
  });
  </script>

上面的实例验证手机号码是否正确,当错误的时候缓慢淡入显示错误提示,正确时错误提示消失。

js代码里面的show和hide,也可以修改为fadeIn和fadeOut。

“slow”和“fast”也是可以修改的,表示速度。

当然,实例只是简单的判断了一下手机号码的位数。

如果要完整的验证手机号码,请查看《js正则表达式之手机号码验证》这篇文章。

本文网址:http://www.santii.com/article/94.html


数据更新时间:2018-11-16