正则表达式进行页面表单验证功能

 更新时间:2017年7月6日 23:23  点击:2481
本文介绍了正则表达式进行页面表单验证功能的教程,非常实用,有兴趣的同学快来看看吧

一般做到注册页面的时候,当用户填完信息,都需要对他们的信息进行验证,这就要用到正则表达式,具体看下面这个例子。

效果图:(当用户填写的信息不符合规范时显示错误提示)

我只提供了html结构和js,样式你们按照自己的设计稿自己写,我是分别给正确的时候和错误的时候加了不同的class,用了不同的高度,正确是高度小,可以把提示的红字隐藏。

这里写图片描述

html结构:

 

 代码如下 复制代码

<div id="wrap">

  <h1>注册</h1>

  <div>

    <input type="text"class='match'name='user'placeholder='请输入用户名'/>

    <span>字母开头,长度5-10位字母数字下划线</span>

  </div>

  <div>

    <input type="password"class='match'name='pwd'placeholder='请输入密码'/>

    <span>字母数字长度6-18位</span>

  </div>

  <div>

    <input type="password"name='pwd2'placeholder='请再次输入密码'/>

    <span>两次密码不一致</span>

  </div>

  <div>

    <input type="text"class='match'name="tel"placeholder='请输入电话'/>

    <span>电话号码格式不正确</span>

  </div>

  <div>

    <input type="text"class='match'name="mail"placeholder='请输入e-mail'/>

    <span>邮箱格式不正确</span>

  </div>

  <div>

    <input type="text"class='match'name="IDCard"placeholder='请输入身份证'/>

    <span>证件格式不正确</span>

  </div>

  <div class='submit'>

    <input type="submit"value='注册'/>

  </div>

  <p id='tip'>请先输入密码</p>

</div>

 

js:

 

 代码如下 复制代码

//正则表达式已//双斜杠开始和结束,限制必须要以什么什么开头要在之前加^,限制必须要以什么什么结尾要在后面加$,例:/^正则$/

<script type="text/javascript">

  varreg = {

    user:/^[a-zA-Z]\w{4,9}$/,

    //用来判断用户名,第一位不能为数字,也就是小写字母或者大写字母,后面的内容\w表示字符(数字字母下划线)

    //要求是5-10位字符,所以出去第一位,还需要4-9位的\w

    pwd:/^[\da-zA-Z]{6,18}$/,

    //用来判断密码,html结构中要求是数字字符6到18位,\d表示数字

    tel:/^1[34578]\d{9}$/,

    //用来判断电话号码,通常手机号第一位为1,第二位只可能出现3.4.5.7.8,后面剩下的9位数字随机

    mail:/^[1-9a-zA-Z_]\w*@[a-zA-Z0-9]+(\.[a-zA-Z]{2,})+$/,

    //用来判断邮箱,通常邮箱没有以0开头的,所以第一位为1-9数字或者小写字母或者大写字母,第二位开始任意字符

    //也可以只有第一位没有第二位,*表示至少0个,@后面同理,小写字母或者大写字母或者数字,.需要转意符,所以写成\.

    //点后面通常是com或者cn或者com.cn,所以是小写字母或者大写字母至少两位

    IDCard:/^[1-9]\d{16}[\dxX]$/,

    //用来判断身份证,通常第一位不为零,所以取1-9的数字,中间的16位数字随机,最后一位要么是数字要么是X

  };

  vararr = [

    document.getElementsByName('user')[0],

    document.getElementsByName('pwd')[0],

    document.getElementsByName('tel')[0],

    document.getElementsByName('mail')[0],

    document.getElementsByName('IDCard')[0]

  ];

  for(vari=0;i<arr.length;i++){

    arr[i].onblur =function(){

      if(this.value){

        if(reg[this.name].test(this.value)){

          this.parentNode.className ='right'; //判断正确的时候加的class

        }else{

          this.parentNode.className ='wrong'; //判断错误的时候加的class

          this.focus();

        };

      };

    };

  };

  varoTip = document.getElementById('tip');

  varopwd = document.getElementsByName('pwd2')[0];

  opwd.onfous =function(){

    if(!arr[1].value){

      arr[1].focus();

      oTip.className ='show';

      setTimeout(function() {

        oTip.className ='';

      },1000);

    };

  };

  opwd.onblur =function(){

    if(this.value){

      if(this.value != arr[1].value){

        this.focus();

        this.parentNode.className ='wrong';

      }else{

       this.parentNode.className ='right';

      };

    };

  };

</script>

 

如何设计出简单易用的网页?今天小编要说的 10 个简化技巧都是围绕着这个思路来推进的。无论你是正在设计一个全新的网站,还是针对现有的网站进行简化,这 10 个简化技巧都非常值得尝试。

 坦率的讲,在网页设计这件事情上,简单的设计往往更好。一个简单易用的界面更容易为用户所掌握,也更容易将一个新用户转化为一个活跃用户。

  面对庞杂的需求,许多设计师总会身不由己地向着复杂的方向来设计网页,那么到底要如何将一个已经比较复杂的网站简化下来呢?其实思路并不复杂,诀窍在于根据用户目标,重新审视整个路径,将妨碍用户达成目标的障碍都清除掉。

  而今天我们要聊的 10 个简化技巧都是围绕着这个思路来推进的。无论你是正在设计一个全新的网站,还是针对现有的网站进行简化,这 10 个简化技巧都非常值得尝试。

  1、专注于做行为召唤设计

如何设计出简单易用的网页? 三联

  网站上的每一处设计都应该是有目的的,都相应地迎合用户的某个行为或者需求,这是显而易见的。

  这也为行为召唤的设计提供了依据。引导用户的文案、按钮和链接都应该清晰、明显,永远不要让用户错过。

  2、简化分页

  你所设计的页面是否需要分很多不同的页面?这些页面有没有分割的必要呢?你可以重新思考这个问题了。

  将多页面的内容简化为可管理的区块,不要让用户为了查看内容而多点击,将相关的内容保存到一起,方便用户集中阅读和查看。

  删除过期的、过时的内容和信息、小插件和第三方的信息都合并到相应的区块当中,不要零散的放置。

  3、统一配色方案

  虽然很多色彩确实很有吸引力,但是它们也很容易喧宾夺主。坚持将配色方案控制在两到三个色彩,这样能让你尽可能好的控制整个设计的配色。

  如果你想让你的配色尽可能简单,那么你可以采用单色配色,你会发现这种简单的色调搭配是如此的漂亮,较少的色彩对于用户的心理负荷更小,尤其是当你的整个视觉设计足够和谐的时候。

  4、采用标准的导航设计

  虽然隐藏式的导航看起来很酷,而非常规的创意导航也非常的赞,但是这些导航模式对于用户并不是那么友好。偏离常规的设计虽然容易让人记住,但是在使用体验上,常常相对更加困难。选择标准模式的导航,能够让你的网站更加易用。

  最常规的导航模式,是将导航栏置于页面顶端,通常是 3 到 8 个不同的选项,当然,不要选择 10 年前流行的复杂、全面的大型导航菜单,除非你是京东淘宝这样的大型零售电商。

  5、采用80/ 20 原则

  请记住,你的网站中20%的内容将会触发用户80%的操作,这意味着你的内容应当有轻重缓急之分,行为召唤用语和行为召唤按钮等界面元素将是引导用户交互的重要组成部分。

  考虑到这一点,在你进行设计的时候,应该将设计的重心放在这20%的内容上,而剩下的80%的内容则根据需求进行调整。这20%的元素通常都是最吸引用户点击的那部分内容:按钮、图片和行为召唤文本。

  如果你觉得20/ 80 原则听起来很熟悉,那么你可能是在别的地方曾经听到过它,它是经济学家 Vilfredo Pareto 所提出,几乎在所有领域都适用,它也被称为Pareto原则,或者重要少数法则。

  6、有目的地使用UI元素

  图标、图片等每一个UI元素在整个设计中都有其作用,有些元素的使用是有约定俗成的规则,不要因为某些元素看起来酷,或者单纯“为了有”而加上,最好通盘考虑,在合适的地方,合理地使用UI元素。

  7、仔细挑选字体

  字体和排版同样遵循少即是多的原则。

  最容易阅读的字体,通常都有着标准的外观造型,均匀的笔触,朴实无华而无需多余的装饰。一套完整的字体通常有着多样的字重和可选的样式,不需要你再去寻找其他的字体来搭配。而在排版的问题上,文本需要同背景有着充分的对比,

  在设计网页的时候,通常会用到两套字体,一套应用到正文上,另外一套字体则用到标题上,用作展示。

  8、增大文本尺寸

  在进行排版设计的时候,你需要在合适的时候增加文本尺寸。随着我们日常看到的屏幕尺寸的增加,我们需要让用户看到我们所提供的信息,并不是堆砌更多的内容,而是要合理的增加文本的尺寸。

  虽然在移动端设计上这种需求并不明显,但是根据实际情况,适当的提升字体尺寸能让文本的易读性有明显的提升。当然,置于首屏的关键词要明显,吸引用户滚动,而不是将所有的内容都堆在首屏。

  9、创建易读的文案

  排版能够从视觉上控制内容的复杂度,而文字则能够控制在信息传达上的复杂度。两者其实是同等重要。每个词汇都应该和视觉保持意义和信息上的一致性。

  文案和视觉一样,都需要反复推敲。

  网站是可传达、可阅读的媒介,因此文案和内容都应当干净、简介,且高度可读。你可以根据网站的风格,使用符合相应调性的文案。

  10、打破一项规则

  有的时候规则是用来打破的,但是如果你想让你的设计保持简单,那么你在设计的时候,应该有意识的打破一条规则,但是只能是一条。

  如果你需要让你的设计在简单的同时,又不是始终循规蹈矩,那么打破一条规则是让你不走寻常路的最快的方法。它会让你的设计看起来不那么寻常,但是又能有迹可循,打破太多的规则会很容易让访客觉得混乱。

  结语

  复杂的网站太多,想要让你通过网站同用户进行顺畅的沟通,设计是否够简单是相当重要的影响因素。无论是填写表单还是下载APP,每个设计元素都应当恰到好处,而不会因为负责而让用户觉得厌烦。

  虽然有时候用户喜欢看起来“饱满”的复杂的设计,可是涉及到具体的交互与功能的时候,简单的设计每次都能让用户爱不释手。

本篇文章主要为大家介绍了网站建设开发设计的前途怎样,想要了解的朋友可以看一看。

简单来说,网站开发是一种基于ie浏览器的开发,属于一种网页开发,而且还具有一定的互动性。当然,我们也可以把它理解为制作,即开发即制作,毕竟它也是由比较多的一些小制作来推进的开发,那么,网站开发有什么样的前途呢?

blob.png

网站开发的背景

网站开发工作是来制作比较专业的网站,大家常见的有动态网页,不常见的有ASP   JSP网页。在另一个层面上说,网站开发的工作比制作有着更加深层的意义,因为它不仅包括网站的美工和网站的内容,还会涉及到一些网站功能的开发工作。所以网站开发工作发展比较快,尤其是最近几年,网站开发工作呈现着一股儿快速地上升势头,而且这个行业的市场也越来越大。仅就拿国内情况来说,在沿海的发达省市将比在中西部的省市有着非常之大的市场需求。

新科技增添的魅力

网络的竞争力也是日新月异的,更是在提示着开发人及时注意网站的一些优化因素,毕竟网站的用户体验是更能体现网站的价值意义的。这时候,新技术的出现就给网站开发带来了新的魅力。比如视频和三维动画,以及一些虚拟现实的网络技术,在不断地发展完善中,向互联网移植趋势已定,并且在不久的将来,还会出现在一些客户的网站上。还有一项新的编程语言和新的服务器技术,也能够使网站的结构更加紧密,访问也更加流畅。

网站开发的一些注意事项

网站开发最重要的就是安全问题,大家经常说起的一大守则就是,不要轻易地去相信来自任何客户端的任何数据。因为从网站安全问题的角度考虑,有些数据的真实性是需要考究的,毕竟你不知道用户提交的一些数据是不是真实的数据,而且也不可能会一直按照网站开发的考虑范围来进行规范。

网站开发工作是会很辛苦的,所以,我们要做好一定的心理准备。我们也要有踏实的学习精神,去追随网站开发技术的步伐。我们更要相信,只要付出了努力,就会回报。

来源易百讯网站建设,欢迎分享,原文地址:http://www.yibaixun.com/news/1396.html 转载请注明出处。

平面设计中低多边形设计风格有何亮点?在浏览网页的时候,发现很多朋友喜欢低多边形设置的平面作品,低多边形风格的设计有哪些亮点呢?下面我们就来看看详细的教程,需要的朋友可以参考下

经常浏览Dribbble和Behance的朋友可能会注意到,最近“低面建模”设计风格异常火爆。除了网上的图形设计和动效设计,现实中的杂志、电视中这种风格也多有体现。这种设计风格的特点是低细节,面又多又小,高度渲染,经常配以柔光效果。

  其实,这种设计风格在早期计算机建模和动效中就被广泛采用,在快要被遗忘之时,突然又流行了一把。本文将探索这种低面建模设计风格的外观,展示一些低面建模设计案例。

  一、3D建模?低面建模?

  所有的3D建模都需要借力多边形。模型的多边形越多,模型越具细节。通常会柔化多边形的领教,让物体的外观看起来更和谐。

  低面建模设计不同,建模阶段使用的多边形较少,这样最后便会呈现一种简洁、抽象的效果。更注重渲染,而不是更注重柔化多边形。打造一种封闭、冷硬的感觉。

  然而,上述讲的这些并不意味着低面建模建模的作品分辨率低。低面建模设计使用了精致的渲染技术、光照效果、隐形效果,能够将简单的物体的实体性质高度还原。(只不过外形上有所欠缺)结果便是,低面建模设计有点像现实生活中的手工艺品,感觉很复古。

  低面建模设计代表人物是Timothy J.Reynolds。以及Jeremiah Shaw和Danny Jones的Tumblr站点Geo A  Day,他们都极力推崇低面建模设计美学用Jeremy Kool的The Paper Fox来形容这种设计风格,再贴切不过了(下图)。这个作品成为iOS上的一款交互性极高的应用。Jeremy  Kool模拟了折纸风格。加入了褶皱的纸质感,而边缘非常的纤细。

  喜欢低面建模设计的设计师似乎很不欣赏计算机建模,因为计算机建模有点太完美了,太客观了,毫无瑕疵。而现在的3D建模让人感觉太圆润了,他们追求那种粗糙的质感,因为设计师知道,再怎么模拟现实,设计出来的作品依然和现实差那么一“点”儿,他们觉得应该用设计去捕捉物体的本质,而不是努力的追求外观的模仿。

  当20世纪摄影出现时,有人觉得摄影应该去精确的抓取现实瞬间,这才是摄影追求的高度。但是艺术并不需要精确:艺术表达的是一种飘忽不定的感觉,而不是外观的完美再现。

  繁荣发展的数字艺术,经历了一代又一代对“逼真”风格的无限追求,可他们永远无法做到逼真,因为他们进行的是模拟,此时,有人厌倦了模拟,他们开始追求抽象化的表达。

  二、怎样进行低面建模设计?

  这里提供了一份简单教程,能够帮助快速实现低面建模风格,使用的软件是Cinema4D

  1、使用简单的实体创建对象,比如说球形、锥形。不必非常细腻,简单即可。

  2、Segment属性,勾选每段细分选项“Subdivision per Segment”,段数越多,物体的面越多。

  3、设置Phong属性——决定了物体的圆滑度,在Cinema4D中,可以删掉Phone标签,或者将Phone角度设置为0

  4、为了打造多边形效果,可以给模型加入变形,可以手动设置(通过拖移节点),也可以使用Displacer这种变形器。使用Noise  shader给每个顶点进行随机添加。可以增加或者减少变形量。

  5、给物体加入材质,定义材质时,可以加入隆起的映射,提供更棒的表面细节。也可以通过特殊的高光来打造。

  6、添加背景,添加天空

  7、添加光,微妙的光会让作品更带感。

  8、渲染对象,使用Global Illumination渲染设置,打造柔和光,添加Ambient Occlusion添加深度感和阴影。

[!--infotagslink--]

相关文章

  • PHP正则表达式取双引号内的内容

    取双引号内的内容我们如果一个字符串中只有一个可以使用explode来获得,但如果有多个需要使用正则表达式来提取了,具体的例子如下。 写程序的时候总结一点经验,如何只...2016-11-25
  • PHP正则表达式之捕获组与非捕获组

    今天遇到一个正则匹配的问题,忽然翻到有捕获组的概念,手册上也是一略而过,百度时无意翻到C#和Java中有对正则捕获组的特殊用法,搜索关键词有PHP时竟然没有相关内容,自己试了一下,发现在PHP中也是可行的,于是总结一下,分享的同...2015-11-08
  • php 验证只能输入汉字、英语、数字的正则表达式

    正则表达式是一门非常有用的并且进行模糊判断的一个功能了,我们下面来看通过正则来验证输入汉字、英语、数字,具体如下。 收藏了正则表达式。可以验证只能输入数...2016-11-25
  • java正则表达式判断前端参数修改表中另一个字段的值

    这篇文章主要介绍了java正则表达式判断前端参数修改表中另一个字段的值,需要的朋友可以参考下...2021-05-07
  • 常用的日期时间正则表达式

    常用的日期时间正则表达式 下面收藏了大量的日期时间正则匹配函数,包括分钟,时间与秒都能达到。 正则表达式 (?n:^(?=d)((?<day>31(?!(.0?[2469]|11))|30(?!.0?2)|29(...2016-11-25
  • PHP正则表达式匹配验证提取网址URL实例总结

    网址规则是可寻的,所以我们可以使用正则表达式来提取字符串中的url地址了,下面一起来看看小编整理的几个PHP正则表达式匹配验证提取网址URL实例. 匹配网址 URL 的...2016-11-25
  • 正则表达式中两个反斜杠的匹配规则详解

    这篇文章主要介绍了正则表达式中两个反斜杠的匹配规则,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-07
  • JS中使用正则表达式g模式和非g模式的区别

    这篇文章给大家详细介绍了JS中使用正则表达式g模式和非g模式的区别,非常不错,具有参考借鉴价值,需要的朋友参考下吧...2017-04-03
  • C#正则表达式使用方法示例

    这篇文章主要介绍了C#正则表达式使用方法,大家参考使用...2020-06-25
  • vue实现表单验证小功能

    这篇文章主要为大家详细介绍了vue实现表单验证小功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-29
  • 常用C#正则表达式汇总介绍

    c#正则表达式,用于字符串处理、表单验证等场合,实用高效。现将一些常用的表达式收集于此,以备不时之需。...2020-06-25
  • JavaScript利用正则表达式替换字符串中的内容

    本文主要介绍了JavaScript利用正则表达式替换字符串中内容的具体实现方法,并做了简要注释,便于理解。具有一定的参考价值,需要的朋友可以看下...2017-01-09
  • 一文秒懂python正则表达式常用函数

    这篇文章主要介绍了python正则表达式常用函数及使用方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-05-07
  • Idea使用正则表达式批量替换字符串的方法

    这篇文章给大家介绍了Idea使用正则表达式批量替换字符串的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧...2021-07-21
  • PHP正则表达式之捕获组与非捕获组

    今天遇到一个正则匹配的问题,忽然翻到有捕获组的概念,手册上也是一略而过,百度时无意翻到C#和Java中有对正则捕获组的特殊用法,搜索关键词有PHP时竟然没有相关内容,自己试了一下,发现在PHP中也是可行的,于是总结一下,分享的同...2015-11-08
  • Python验证的50个常见正则表达式

    这篇文章主要给大家介绍了关于利用Python验证的50个常见正则表达式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-11
  • C#编程自学之运算符和表达式

    这篇文章主要介绍了C#运算符和表达式,这是自学C#编程的第五篇,希望对大家的学习有所帮助。...2020-06-25
  • js用正则表达式筛选年月日的实例方法

    在本篇文章里小编给大家整理的是一篇关于js用正则表达式筛选年月日的实例方法,对此有兴趣的朋友们可以学习下。...2021-01-04
  • PHP正则表达式过滤html标签属性(DEMO)

    这篇文章主要介绍了PHP正则表达式过滤html标签属性的相关内容,实用性非常,感兴趣的朋友参考下吧...2016-05-06
  • C# 中使用正则表达式匹配字符的含义

    正则表达式的作用用来描述字符串的特征。本文重点给大家介绍C# 中使用正则表达式匹配字符的含义,非常不错,具有一定的参考借鉴价值,需要的朋友参考下吧...2020-06-25