等待-放飞梦想 » 表单 http://leotheme.cn 勤现在-乐将来 Mon, 21 May 2012 09:45:24 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 WordPress评论表单验证 http://leotheme.cn/wordpress/wordpress-comment-form-proof.html http://leotheme.cn/wordpress/wordpress-comment-form-proof.html#comments Sat, 28 Nov 2009 02:50:40 +0000 Await http://leotheme.cn/?p=772 您可能也喜欢：
WordPress主题：perfct 1.0
WordPress主题之Maxthon 2.0.2[08-08-11]
wordpress定制首页输出
WordPress模板常用调用函数
WordPress 2.7 框架[原文翻译] 无觅 ]]> wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验并不友好；所以一个基于前端的验证很需要。大家平时也一定有见过各种各样的表单验证。有些表单的验证很复杂，也很强大。不过WP的验证很简单。只需要验证“昵称”、“E-mail”、和评论就行了。http地址因为不是必须的。所以只需要在用户有输入的情况下判断下地址是否符合正常的格式就行了。来看下这个简单的验证效果：

form1

form2

form3
下面来说说这个简单的表单验证。当然，还是基于jQuery的。

  1. var Msg = new Array(
  2.                 "用户名不能为空",
  3.                 "昵称不能少于3个字符",
  4.                 "E-mail地址不能为空",
  5.                 "请输入正确的E-Mail地址",
  6.                 "url地址不正确",
  7.                 "评论内容不能少于5个字符",
  8.                 "输入正确"
  9.             );

首先定义一个提示信息的数组。

  1. if( $(this).is('#author') ){
  2.             $(this).next().remove();
  3.             if( this.value==""){
  4.                 $('<span class="formtips onError">'+Msg[0]+'</span>').insertAfter(this);
  5.             }
  6.             else if(this.value.length < 3 ){
  7.                 $('<span class="formtips onError">'+Msg[1]+'</span>').insertAfter(this);
  8.             }
  9.             else {
  10.                 $('<span class="formtips onok">'+Msg[6]+'</span>').insertAfter(this);
  11.             }
  12.         }

验证昵称：如果用户输入的字符为空，或少于3个。刚显示相应的错误信息，否则显示输入正确。

  1. //验证邮件地址
  2.         if( $(this).is('#email') ){
  3.             $(this).next().remove();
  4.             if( this.value==""){
  5.                 $('<span class="formtips onError">'+Msg[2]+'</span>').insertAfter(this);
  6.             }
  7.             else if( this.value!="" && !/^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/.test(this.value)){
  8.                 $('<span class="formtips onError">'+Msg[3]+'</span>').insertAfter(this);
  9.             }
  10.             else {
  11.                 $('<span class="formtips onok">'+Msg[6]+'</span>').insertAfter(this);
  12.             }
  13.         }

验证E-mail地址：和验证昵称一样。这里是用正则去匹配地址是否正确；

  1. //验证url
  2.         if( $(this).is('#url') ){
  3.             $(this).next().remove();
  4.             if( this.value!="" && !/^http:\/\/[A-Za-z0-9]+\.[A-Za-z0-9]+[\/=\?%\-&_~`@[\]\':+!]*([^<>\"\"])*$/.test(this.value)){
  5.                 $('<span class="formtips onok">'+Msg[4]+'</span>').insertAfter(this);
  6.             }
  7.         }

验证url地址，因为这个不是必须的，所以只在有输入的情况下才去判断地址是否正确

  1. //提交，最终验证
  2.     $('#submit').click(function(){
  3.         $("#commentform :input").trigger('blur');
  4.         //验证评论内容
  5.         if( $("textarea").val() == ""|| $("textarea").val().length < 5){
  6.             tipsWindown("提示","text:评论内容不能为空或少于5个字符!","250","150","false","2000","false","msg");
  7.             return false;
  8.         }
  9.         var numError = $('form .onError').length;
  10.         if(numError){
  11.             tipsWindown("提示","text:请正确填写表单内容","250","150","false","2000","false","msg");
  12.             return false;
  13.         }else{
  14.             tipsWindown("提示","text:正在提交评论...","250","150","false","2000","false","msg");
  15.             $(".formtips").remove();
  16.         }
  17.     });

最后。绑定事件，然后验证评论内容是否为空或小于5个字符。如果为true则弹出提示层，并阻止表单的提交。否则弹出提示：正在提交评论…然后清除提示信息；OK，一个基于JQ的简单的表单验证完成了；

您可能也喜欢：

WordPress主题：perfct 1.0
WordPress主题之Maxthon 2.0.2[08-08-11]
wordpress定制首页输出
WordPress模板常用调用函数
WordPress 2.7 框架[原文翻译]
无觅

相关文章

  • 2008-09-15 -- jquery基础教程二[伸缩、隔行变色...] (3)
    在上一篇介绍中已经讲了一些基本的应用，今天继续。先看一下面这个例子 Demo_5：收缩展开功能[如无法运行请多刷新几次或保存到本地运行] 可伸缩块 p,d...
  • 2011-09-08 -- jQuery中queue和dequeue的用法 (1)
    今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现j...
  • 2011-08-17 -- Flight主题更新 (19)
    这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...
  • 2010-11-24 -- JQ弹出层插件(tipsWindow 3.0) (166)
    已更新为2.7...
  • 2010-10-12 -- 分享Flight主题中的焦点图（基于JQ） (22)
    关于这个焦点图没啥说的了，网上太多了。但自己一直没找到个合适的。现在的这个是Dreamy主题中的升级版，虽然看起来一模一样。其实做了很多扩展，优化了结构和JS部分。可以选择切换方式（左右滚动，上下滚动...
]]> http://leotheme.cn/wordpress/wordpress-comment-form-proof.html/feed 20 浅议Web网页Form表单设计技巧 http://leotheme.cn/javascript/about-web-form.html http://leotheme.cn/javascript/about-web-form.html#comments Mon, 08 Jun 2009 05:03:15 +0000 Await http://leotheme.cn/?p=543 您可能也喜欢：
WordPress评论表单验证
一个简单的网页调色板
WordPress主题高级技巧
CSS中关于背景图的应用技巧
最佳网页IE浏览器兼容性测试工具(IE6 IE7 IE8共存) 无觅 ]]> “输入框(Input)应当符合逻辑地划分为小组，这样大脑就可以很好的处理大堆区域间的关系。”——《HTML权威指南》

Web应用程序总是利用表单来处理数据录入和配置，但并不是所有的表单都保持一致。输入区域的对齐方式，各自的标签(label)，操作方式，以及周围的视觉元素都会或多或少影响用户的行为。

表单布局

考虑到用户完成表单填写的时间应当尽可能的短，并且收集的数据都是用户所熟悉的（比如姓名、地址、付费信息等），垂直对齐的标签和输入框可以说是最佳的。每对标签和输入框垂直对齐给人一种两者接近的感觉，并且一致的左对齐减少了眼睛移动和处理时间。用户只需要往一个方向移动下。

2_200701200223041

在这种布局中，推荐使用加粗的标签，这可以增加它们视觉比重，提高其显著性。如果不加粗的话，从用户的角度讲，标签和输入框的文字几乎就一样了。

如果一个表单上的数据并不为人熟悉或者在逻辑上分组有困难（比如一个地址的多个组成部分），左对齐的标签可以很容易的通览表单的信息。用户只需要上下看看左侧一栏标签就可以了，而不会被输入框打断思路。但这样一来，标签与其对应的输入框之间的距离通常会被更长的标签拉长，可能会影响填写表单的时间。用户必须左右来回的跳转目光来找到两个对应的标签和输入框。

2_200701200223171

于是产生了一种替代的方案，标签右对齐布局，使得标签和输入框之间的联系更紧密。然而结果是左边参差不齐的空白和标签让用户很难快速检索表单要填写的内容。在西方国家，人们习惯于从左至右的书写，所以这种右对齐的布局就给用户造成了阅读障碍。

2_200701200223172

借助可视化元素

由于“标签左对齐布局”的优点（方便检索并且减少垂直高度），尝试纠正它的主要缺点（标签和输入框的分离）就很诱惑人。

一个方案就是增加背景色和分割线，不同的背景色产生了一列垂直的标签和一列垂直的输入框，每一组标签和输入框利用清晰的水平线分开。虽然这听上去不错，但是还是会存在问题。

对比之前的形态（用户主观的视觉区分），这增加了15个视觉元素：中间线、一个个有背景色的单元格以及一条条的水平线。这些元素会转移用户的视线，让用户难以聚焦到一些重要的元素上，比如标签和输入框。正如 Edward Tufte指出的:“信息本身存在差异，必然产生感官上的不同。”换句话说，任何对布局无用的视觉元素都会不断地扰乱布局。当你试着浏览左侧的标签就可以发现，你的视线总是被打断，停下来想那些水平线、单元格和背景颜色。

2_200701200223173

当然这并不意味着放弃背景色和线条。它们对于划分相关区域信息还是很有效的。比如一条细水平线或者一个浅浅的背景色，都可以从视觉上组合相关数据。背景色和线条对于区分表单的主要操作按钮尤其有效。

2_200701200223174

主次操作

一个表单的主要操作（通常是“提交”或“保存”）需要一个比较强的视觉比重（在上面的例子里用了亮色调、粗字体、背景色等等）。这相当于给用户一个提示：您已/即将完成填写表单。

当一个表单有多个操作，比如“继续”和“返回”，那有必要减轻次要操作的视觉重量。这可以最小化用户潜在的操作错误的风险。

2_200701200223175

虽然以上内容可以更好的让你设计表单，但是组合布局、可视化元素以及内容，仍然需要经过用户的测试以及数据分析（完成度评估、错误报告等）。

转载自: junchenwu.com

您可能也喜欢：

WordPress评论表单验证
一个简单的网页调色板
WordPress主题高级技巧
CSS中关于背景图的应用技巧
最佳网页IE浏览器兼容性测试工具(IE6 IE7 IE8共存)
无觅

相关文章

  • 2009-11-28 -- WordPress评论表单验证 (20)
    wordpress的评论只是个很简单的表单。WP本身也有一个自身的验证系统。但自带的这个验证是基于后台的验证。当表单不符合规格时跳转到另一个页面。我们需要返回上一页才能继续填写表单。这样对于用户的体验...
  • 2008-10-29 -- 搜狐博客开放平台博客模板设计大赛 (0)
    一、大赛宗旨 本次大赛是搜狐博客开放平台为广大设计人员、设计爱好者与搜狐博客用户举办的规模最大的一次模板设计竞赛，并准备了价值十万元的精美大奖和成为搜狐博客开放平台模板设计伙伴的机会，我...
]]> http://leotheme.cn/javascript/about-web-form.html/feed 2