`
yipsilon
  • 浏览: 246272 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

表单验证器的使用与扩展

阅读更多
表单字段验证这可是常见应用开发框架中比较重要的一块儿,至少在我看来是这样的。因此,在设计CMSPAD中的表单验证器过程中,我们研究了很多已存在的PHP框架,提炼他们比较有优势的地方,加上本身的项目经验,开发出了具有极好易用性和极大扩展性的产品:CMSPAD Validator(以下称CV)。

在设计CV过程中,我们考虑到了它是由两种角色使用的:前台美工和后台程序员。

1. 美工角色

假设大部分美工不懂程序开发(包括JavaScript),怎么才能让他们很好的使用CV呢?下面让我们看看下列的用例代码:
<form bind="SimplePortlet.helloWorld">
<input type="text" name="email" bind="email:无效的Email地址;"/>
<input type="text" name="chineseName" bind="chinese:请输入中文字符"/>
<button type="submit">提交</button>
</form>

这是CV的最简化用法,主要方便美工进行简单的客户端输入字段验证。bind属性中主要有两部分组成:验证器名称和出现错误对话框时弹出的内容文字,他们之间使用冒号(:)分隔,其中内容文字是可选的,如果没有,它当然就不弹出文字了。下面看看比较复杂点儿的用法:
<form bind="SimplePortlet.helloWorld">
<input type="text" name="username" bind="length(3,20):请输入长度在3至20字符之间的用户名称"/>
<input type="text" name="idcard" bind="idcard:身份证号码不正确; SimplePortlet.idcard"/>
<button type="submit">提交</button>
</form>

这段代码中,检测用户帐号字段使用了两个参数,来判断帐号长度是否在3至20个字符之间,如果没有则弹出文字;而检测身份证号码字段使用了两个验证器:第一个为客户端验证,检查身份证号码规则是否正确,第二个是将信息提交到名字为“SimplePortlet”的Portlet中的checkIdcard方法中,远程验证身份证号码是否正确。两个验证器之间使用分号(;)分隔,当然,每个字段可以有多个验证器,他们顺序执行。例如:
<input type="text" name="username" bind="!empty:不允许为空;length(3,20):长度在3至20字符之间;!equals('Administrator'):不能是Administrator"/>

这样验证器会自动判断该字段是否为非空,如果不是,则弹出对话框;如果是,则检查长度是否在3-20字符之间,如果不是,则弹出对话框;如果是,则检查所输入的是否是“Administraotr”,如果是,则弹出对话框,否则验证通过。

这里有一个特殊的字符“!”,用来表示“非”判断,例如“!empty”就是非空,“!equals”就是不等于。

至此,美工的活儿就完事儿了,不是很难吧。

2.程序员角色

在CV架构中,程序员主要是做以下几件事情:
  1. 开发Portlet端的字段验证方法[*]开发验证器实现

2.1 开发Portlet端的字段验证方法

如果某些字段需要在服务器端进行验证,或者在表单提交时进行服务器端自动验证,那程序员需要开发Portlet端的字段验证方法,样例代码如下:
import('Validator');
class SimplePortlet{
  public function checkIdcard(&$response, $value, $context = false){
    if(Validator::validate('empty', $value, $context)){
      $response->alert('请输入身份证号码');
      return false;
    }else if(!Validator::validate('idcard', $value, $context)){
      $response->alert('无效身份证号码');
      return false;
    }
  }
}

所有的Portlet端字段验证器名称都是以"check"开头,后面跟验证器名称。其参数分别为:控制器的回复对象、待验证的值、验证器上下文(在提交验证时,为$_POST数组;而在远程验证时,为NULL)。

    Portlet端验证器的两种验证方式
  • 远端验证:即在表单字段的bind属性中指定验证器。[*]提交验证:当表单提交到服务器上时,CV会自动根据字段名称与验证器名称相匹配,如果该验证器存在,则进行验证。如果验证器不是返回false,则继续其他字段验证,否则,暂停处理。待到所有验证都通过时,才调用formXXXX方法来进行表单处理。

2.2 验证器实现的开发:

一个验证器实现,类名称必须为 cmspad_validator_<当前文件名>,必须有下面两个方法:
  • validate($value,$context = null): 这是进行服务器端验证的方法。[*]getJavascript($v): 这是获取进行客户端验证所需的JavaScript脚本,是静态方法。
下面看看一个简单的验证器实现:
class cmspad_validator_chinese{
  public function validate($value, $context = null){
    return preg_match('/^[\u0391-\uFFE5]+$/', $value);
  }
  public static function getJavascript($value){
    return "return /^[\u0391-\uFFE5]+$/.test($value);";
  }
}

该代码保存在 inc/validators/chinese.php 文件中。

当在服务器端调用时,使用如下代码:
Validator::validate('chinese', $value, $context);

上面的Portlet字段验证代码中已经有使用样例了,这里就再说明了。

至此,CMSPAD验证器框架的大部分功能已经介绍完毕,学起来还算简单吧。
分享到:
评论

相关推荐

    jQuery 表单验证扩展(三)

    总而言之,jQuery表单验证扩展提供了强大的功能,可以帮助开发者在用户界面层面减少数据错误,同时为用户提供即时的反馈。随着技术的不断更新,我们可以期待jQuery表单验证插件会持续改进,为开发者提供更多实用的...

    DW笨阿猪高级表单验证

    "笨阿猪高级表单验证"可能扩展了这些基础功能,提供了更丰富的验证规则和更好的用户体验。 在表单验证中,常见的知识点包括: 1. **基本验证规则**:如非空检查、邮箱格式验证、电话号码验证、URL验证等,这些都是...

    表单验证控件 简单

    使用简单,功能强大的表单验证插件。 1、验证插件支持正则表达式验证,函数验证,ajax异步验证,支持对比验证,并支持对表单的自定义属性或指定属性进行验证,应该足矣满足常用软件及网站开发需求。(可根据自己需求...

    表单验证jquery插件

    在页面加载完成后,使用 `$.validationEngine('attach')` 方法来初始化表单验证: ```javascript $(document).ready(function() { $("#yourFormId").validationEngine(); }); ``` ### 3.2 配置验证规则 在HTML...

    自定义可扩展的表单验证方法 - 带实例

    现包含用户名、密码、密码一致性、电话、身份证、简单的空值验证... 可以自己很轻松地添加正则验证和自定义验证函数,调用方法简单方便 现在分享出来给大家参考

    jquery表单验证插件

    本文主要针对“jquery表单验证插件”进行详细介绍,并通过示例代码展示其使用方法。 #### 二、jQuery Form插件介绍 jQuery Form插件由Malsup开发,是一款非常实用的jQuery扩展,能够极大地简化表单的Ajax提交过程。...

    一款简洁、实用且漂亮的Javascript表单验证效果,实现Ajax的功能,验证项目包括Email验证、日期验证、字符长度验证、常规验证等,程序基本思路:通过扩展对象来实现,将String扩展 将默认的表单元素扩展 定义两个自定义对象。

    综上所述,这款表单验证插件不仅提供了一系列强大的数据验证功能,还通过扩展JavaScript原生对象和自定义对象的方式简化了开发流程,同时具备了美观的UI设计,是一款值得学习和应用的优秀资源。对于前端开发者而言,...

    vue表单验证插件

    通过阅读源代码和文档,我们可以深入理解插件的工作原理,学习如何在自己的Vue项目中集成和使用这个表单验证插件。此外,还可以参考其他流行的Vue表单验证库,如`vee-validate`、`async-validator`或`vuelidate`,...

    dw表单验证高级插件-asp表单验证高级插件-测试通过

    在Dreamweaver中,插件可以极大地扩展其内置功能,比如表单验证高级插件就是其中一种,它提供了比默认设置更强大的验证规则和更便捷的实现方式。 ASP是一种微软开发的服务器端脚本环境,用于生成动态网页。在ASP中...

    根据配置动态生成有验证的表单

    "根据配置动态生成有验证的表单"这一技术主题,结合使用了iview框架和async-validator库,旨在创建灵活、可配置的表单验证解决方案。 **1. iview框架** iview是一个基于Vue.js的UI组件库,提供了丰富的前端组件,...

    jQuery表单验证大全

    jQuery,作为一款广泛使用的JavaScript库,提供了强大的表单验证插件——jQuery Validate,使得表单验证变得简单易行。本文将深入探讨jQuery表单验证的相关知识点,帮助开发者更好地理解和应用这一功能。 1. **...

    表单验证器

    **表单验证器** 在网页开发中,表单验证是必不可少的一个环节,它确保用户输入的数据符合特定的要求,如格式正确、非空等。表单验证器就是用于这个目的的工具,它允许开发者通过在HTML元素上添加自定义属性来轻松...

    强大的表单验证框架

    "formValidator2.2.4.zip"和"formValidator2.2.4_ciaoca"这两个文件名可能分别对应该表单验证框架的主程序包和可能的扩展或特定配置。版本号2.2.4表明这是一个经过多次迭代和优化的成熟产品,可能包含了修复的bug、...

    JQ,JS表单验证大全

    本文将深入探讨如何使用jQuery(JQ)和纯JavaScript(JS)进行表单验证,并结合"JQ表单验证大全"这个资源,提供一些实用的验证方法和策略。 ### jQuery表单验证 jQuery提供了丰富的API,使得表单验证变得简单易行...

    jquery validate 表单验证

    以上就是jQuery Validate的基本使用和核心概念,通过熟练掌握这些,你可以轻松实现高效且用户友好的表单验证。记住,始终要关注用户体验,避免过于繁琐的验证过程,同时确保数据安全性和准确性。

    可扩展表单验证bootstrap-validate

    Bootstrap Validate 是一个强大的JavaScript库,专门用于实现网页表单的验证功能。...通过下载并使用Bootstrap Validate.js,你可以快速实现符合现代Web标准的交互式表单验证,提升用户的使用体验。

    极好的表单验证方案,非常实用

    在使用这样的表单验证方案时,开发者可以定义自定义验证规则,扩展内置的验证功能。例如,在C#中,可以通过实现IValidatableObject接口或者使用自定义Validator类来定义复杂验证逻辑。在JavaScript中,可以编写...

    jQuery 表单验证扩展代码(二)

    本篇文章是对之前文章“jQuery 表单验证扩展(一)”的进一步扩展和改进,主要针对表单中的必填项验证进行了更加详细的处理,并提供了在多种表单元素上应用验证的解决方案。此外,还对验证提示的显示方式进行了优化,...

    elementui的表单可视化编辑器自动生成表单验证代码

    ElementUI的表单可视化编辑器是一款基于Vue.js的前端组件库——Element UI的扩展工具,它的主要目的是简化和自动化表单验证代码的编写过程。在实际的Web开发中,使用Element UI创建表单时,通常需要手动编写验证规则...

    validation js表单验证

    扩展与集成** - **与其他库的整合**:Validation JS可以与其他前端框架(如jQuery、AngularJS)集成,增强表单验证的功能。 - **插件与扩展**:社区可能提供了额外的插件和扩展,增加了更多的验证规则和特性。 ...

Global site tag (gtag.js) - Google Analytics