用svg制作富有动态的tooltip,jQuery简单实现验证邮箱格式

明儿早上看了用svg怎么样制作富有动态的tooltip,于是前几日就心血来潮学着做一下,于是也成功做出来,也掌握在那之中的规律,收获颇多阿!接下去要多去学习svg,这是个好东西。

在表单提交的时候只怕需求用到邮箱验证代码,代码相比较轻便,正是邮箱格式的决断,假设说有难处大概正是有关正则表明式的行使,这里就相当少说了,大家能够活动查询,下边就付给一段能够应用的验证代码,复制黏贴就可以。
代码实举个例子下:

代码相当粗略,这里就非常的少废话了,直接给我们源码吧

那之中也只顾了一部分经常纠结的内部情形应该怎么去做,举例:

<script type="text/javascript" src="mytest/jQuery/jquery-1.8.3.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $("#bt").click(function(){
  if($("#email1").val()=="")
  {
   alert("邮箱不能为空");
   return false;
  }
  var email=$("#email1").val();
  if(!email.match(/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+((\.[a-zA-Z0-9_-]{2,3}){1,2})$/))
  {
   alert("格式不正确!请重新输入");
   $("#email1").focus();
  }
 })
})
</script>
</head>
<body>
 <form action="#">
 <input type="text" id="email1">
 <input type="button" value="提交" id="bt">
 </form>
<!doctype html>
<html>
<head>
<title>年月日</title>
</head>
<body onLoad="init()">
<select id="year" onChange="swap_day()"></select>年
<select id="month" onChange="swap_day()"></select>月
<select id="day"></select>日
</body>
<script>
var month_big = new Array("1","3","5","7","8","10","12"); //包含所有大月的数组
var month_small = new Array("4","6","9","11"); //包含所有小月的数组 

//页面加载时调用的初始化select控件的option的函数
function init()
{
  var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
  var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框
  var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框

  //将年份选项初始化,从1980到2000
  for(var i = 1980; i <= 2000; i++)
  {
    select_year_option = new Option(i, i);
    select_year.options.add(select_year_option);
  }

  //将月份选项初始化,从1到12
  for(var i = 1; i <= 12; i++)
  {
    select_month_option = new Option(i, i);
    select_month.options.add(select_month_option);
  }

  //调用swap_day函数初始化日期  
  swap_day();
}
//判断数组array中是否包含元素obj的函数,包含则返回true,不包含则返回false
function array_contain(array, obj)
{
  for (var i = 0; i < array.length; i++)
  {
    if (array[i] === obj)
    {
      return true;
    }
  }
  return false;
}

//根据年份和月份调整日期的函数
function swap_day()
{
  var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
  var select_month = document.getElementById("month"); //获取id为"month"的下拉列表框
  var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框

  select_day.options.length = 0; //在调整前先清空日期选项里面的原有选项
  var month = select_month.options[select_month.selectedIndex].value; //获取被选中的月份month

  //如果month被包含在month_big数组中,即被选中月份是大月,则将日期选项初始化为31天
  if(array_contain(month_big, month))
  {
    for(var i = 1; i <= 31; i++)
    {
      select_day_option = new Option(i, i);
      select_day.options.add(select_day_option);
    }
  }

  //如果month被包含在month_small数组中,即被选中月份是小月,则将日期选项初始化为30天
  else if(array_contain(month_small, month))
  {
    for(var i = 1; i <= 30; i++)
    {
      select_day_option = new Option(i, i);
      select_day.options.add(select_day_option);
    }
  }

  //如果month为2,即被选中的月份是2月,则调用initFeb()函数来初始化日期选项
  else
  {
    initFeb();   
  }
}
//判断年份year是否为闰年,是闰年则返回true,否则返回false
function isLeapYear(year)
{
  var a = year % 4;
  var b = year % 100;
  var c = year % 400;
  if( ( (a == 0) && (b != 0) ) || (c == 0) )
  {
    return true;
  }
  return false;
}

//根据年份是否闰年来初始化二月的日期选项
function initFeb()
{
  var select_year = document.getElementById("year"); //获取id为"year"的下拉列表框
  var select_day = document.getElementById("day"); //获取id为"day"的下拉列表框
  var year = parseInt(select_year.options[select_year.selectedIndex].value); //获取被选中的年份并转换成Int

  //如果是闰年,则将日期选项初始化为29天
  if(isLeapYear(year))
  {
    for(var i = 1; i <= 29; i++)
    {
      select_day_option = new Option(i, i);
      select_day.options.add(select_day_option);
    }
  }

  //如果不是闰年,则将日期选项初始化为28天
  else
  {
    for(var i = 1; i <= 28; i++)
    {
      select_day_option = new Option(i, i);
      select_day.options.add(select_day_option);
    }
  }
}
</script>
</html>
<article>
<section id="sound1">
</section>
<section id="sound2">
</section>
</article>

以上代码实现了简便的邮箱验证,代码赋值黏贴后即可使用。

如上所述正是本文的全部内容了,希望我们可以欣赏。

article标签长度为600px,section
分别是300px,然后设置其为display:inline-block;然后是底下的功用:

以上所述便是本文的全体内容了,希望大家能够喜欢。

您大概感兴趣的篇章:

  • javascript比较五个日子相差天数的章程
  • javaScript
    总括五个日子的大运相差(示例代码)
  • 用javascript达成总结四个日子的间隔天数
  • javascript计算前段时间剩余天数(天数总计器)示例代码
  • javascript日期总结实例剖析
  • javascript格式化日期时间方法汇总
  • javascript显示粤语日期的方法
  • javascript相比多个日子相差天数的秘诀

图片 1

你或然感兴趣的文章:

  • jquery验证邮箱格式是或不是科学实例解说
  • jquery验证邮箱格式并出示提交开关
  • jquery验证手提式有线电话机号码、邮箱格式是还是不是正确示例代码
  • jQuery判定邮箱格式对错实例代码讲明

理所必然按常理来说的话,应该是头像水平排列,那是因为display:inline-block;会将article标签和section标签之间空白渲染成空格,空格展位,所以会促成图片不在同一排,化解的主意是给article标签和section标签增添如下的css代码:

article{ 
width:600px;
margin:200px;
font-size:0;
}
article section{ 
display:inline-block;
width:300px;
font-size:14px;
position:relative;
}

于是乎空白去掉了!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:

相关文章

网站地图xml地图