Menu
Woocommerce Menu

详解JavaScript中的表单验证,js简单实现tab切换

0 Comment

在这个例子中,我引用了包括AngularJS在内的一些JavaScript库,实现了一个很简单的名片生成器。
尽管在这个小应用中,AngularJS库相较于其他JavaScript库来说做的事不多,然而,这个小而强大的AngularJS却是该应用的全部灵感之源。
背景

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

现在,我们将看到我们如何将其提交到Web服务器之前,验证我们输入的表单数据。

图片 1

<script>
  $(function(){
    window.onload = function()
    {
      var $li = $('.taocan-title li');
      var $ul = $('.taocan-content .con110');

      $li.mouseover(function(){
        var $this = $(this);
        var $t = $this.index();
        $li.removeClass();
        $this.addClass('active');
        $ul.css('display','none');
        $ul.eq($t).css('display','block');
      })
    }
  });
</script>

JavaScript中,提供了一种方法将其发送到web服务器之前验证客户端的计算机上的形式的数据。表单验证通常执行两种方式。

最后,在HTML页面的body结束标签之前插入这段script脚本。这段脚本的包含了下载按钮对应的事件响应,也就是说
html2canvas
函数的作用是将id为card的div转化为HTML的canvas画布,并在对canvas画布完成渲染之后,以PNG文件的形式保存该canvas画布。添加完了这个script脚本之后,该做的就做完了。
注意事项

您可能感兴趣的文章:

  • 浅谈移动端之js touch事件
    手势滑动事件
  • 移动端js触摸事件详解
  • touch.js 拖动、缩放、旋转
    (鼠标手势)功能代码
  • 基于touch.js手势库+zepto.js插件开发图片查看器(滑动、缩放、双击缩放)
  • 移动端脚本框架Hammer.js
  • Hammer.js+轮播原理实现简洁的滑屏功能
  • zepto.js中tap事件阻止冒泡的实现方法
  • 基于zepto.js实现仿手机QQ空间的大图查看组件ImageView.js详解
  • 基于zepto.js简单实现上传图片
  • js移动端事件基础及常用事件库详解

 表单验证用于发生在服务器,客户端已经输入所有必要的数据,然后按下提交按钮之后。如果一些已被输入的客户端的数据的已在错误形式或者被简单地丢失,则服务器将必须的所有数据发送回客户端,并请求的形式以正确的信息重新提交。这是一个漫长的过程,会增加服务器负担。

这个是该应用的HTML结构。本结构包括了两部分。一个是id为editor的div,一个是id为card的div。前一个用于让用户输入信息,后一个的作用是用来在名片上显示信息。
这俩div又被一个id为wrapper的div给包裹起来。这个id为wrapper的div里面,我们会添加
ng-app属性,因为就是在这个div容器里,我们就要使用angular了。我们可以添加ng-app到HTML的标签里,这样一来,我们就能在该网页的任何地方使用angular了。
下一步,我们创建一些输入框来接收用户的输入信息。确保每个输入框都有ng-model
这么个属性,用于传递输入框里相应的值。我们把ng-model属性放在这里,主要是因为我们想要实时的更新id为card的div里的值。现在,在id为card的div内部,确保我们已经放置了一些卖相古怪的双括弧,并且在双括弧里我们放了来自ng-model的值。
基本上,我们在输入框中输入内容后,双括弧里的值立马就随之改变了。所以对名片的编辑到此结束。我们的目标是,当一个用户点击了下载按钮,当前的名片将被转化为一张图片,并被下载到用户电脑里。

老规矩,先贴代码

基本表单验证:

#editor{
  width:350px;
  background: silver;
  margin:0 auto;
  margin-top:20px;
  padding-top:10px;
  padding-bottom:10px;
}
input{
  width:90%;
  margin-left:5px;
}
button{
  margin-left:5px;
}
#card{
  width:350px;
  height:200px;
  background:whitesmoke;
  box-shadow: 0 0 2px #323232;
  margin:0 auto;
  margin-top:20px;
}
header{
  background:#323232;
  padding:5px;
}
header h4{
  color:white;
  line-height:0;
  font-family:helvetica;
  margin:7px;
  margin-top:20px;
  text-shadow: 1px 1px black;
  text-transform:uppercase;
}
header p{
  line-height:0;
  color:silver;
  font-size:10px;
  margin:11px;
  margin-bottom:20px;
}
#theBody{
  background:blue;
  width:100%;
  height:auto;
}
#theLeft{
  width:50%;
  float:left;
  text-align:right;
}
#theLeft h2{
  margin-right:10px;
  margin-top:40px;
  font-family:helvetica;
  margin-bottom:0;
  color:#323232;
}
#theLeft h5{
  margin-right:10px;
  font-family:helvetica;
  margin-top:5px;
  line-height:0;
  font-weight: bold;
  color:#323232;
}

#theRight{
  width:50%;
  float:right;
  padding-top:42px;
}
#theRight p{
  line-height:0;
  font-size:12px;
  color:#323232;
  font-family:Calibri;
  margin-left:15px;
}

 
数据格式验证:

这是该应用的CSS样式。在这地方我们模拟了一个名片的设计,并创建了让用户输入信息的编辑面板。

这个例子说明了如何验证输入的电子邮件地址,这意味着电子邮件地址必须至少包含一个@符号和一个点(.)。此外,@绝不能是电子邮件地址的第一个字符,最后点必须在@符号后面的一个字符:

标签:,

发表评论

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

相关文章

网站地图xml地图