javascript验证

“ JavaScript验证”一词在描述帮助用户正确填写表格的过程方面有些误导。 实际上,后端代码执行验证-JavaScript仅提供帮助。 但是,当验证和协助不是来自同一来源时,它们只会使人们感到困惑。

Web表单是HTML进行交互的方式-Web应用程序通过表单从最终用户那里接收信息。 有时,此信息流可以随意,轻松且不受限制。 在其他时候,必须审查信息流以确保Web表单数据的格式正确,尤其是诸如电子邮件地址,送货地址和信用卡号之类的信息。 我们都知道,获得良好数据的关键是后端验证,而使用JavaScript进行前端验证可以帮助用户正确完成数据,而不必等待服务器往返。 开发人员已经将JavaScript功能与他们的后端验证结合在一起。 但是,大多数人使用不同的技术将这些形式的验证视为相同的任务。

严格来说,JavaScript验证不是验证-它是输入帮助。 任何人都可以绕过JavaScript; 这是一种帮助,而不是大门。 它只是有助于使您的用户有信心点击该大提交按钮。

与后端验证分开构建时,JavaScript输入帮助并不理想。 最糟糕的是,这两种功能的工作方式不同,并且客户端上有效的内容在服务器上无效。 充其量来说,它们起初工作得很好。 但是,由于验证逻辑位于多个位置,因此当需要更改时,只有一个更新的可能性越来越大,这时我们会得到不一致的结果。

最后, 需要后端验证。 JavaScript帮助非常

编码时间

考虑到所有这些,我创建了Y-Validator,并使用PHP5作为后端。 有一个可用的

测试版本 ,您可以根据需要下载代码以遵循 。

在PHP中,我们通过实例化yValidate对象来指定验证:

<?php

  require('y-validate.php'); 

  $v = new yValidate(); 

  $v->add('name','+NAME','namefeedback','Required, valid names are letters, numbers and '-()?'');?>




y-validate.php库包含yValidate类。 我们首先通过add()函数向对象提供需要验证的各种输入:

  • 第一个参数是字段的ID或Name ; 单选按钮和复选框使用Name(而[]用于复选框,以便PHP接收值数组),而所有其他字段使用ID。
  • 第二个参数是在私有对象变量regValidations定义的验证类型,该类型将参数字符串与正则表达式进行映射以进行验证。 必填字段的前缀为+
  • 第三个参数指定放置反馈的标签的ID。
  • 第四个参数是告诉用户期望的消息文本。

从这一点来看,验证提交的代码只需通过$v->validateAll($_POST)传递$_POST变量即可。 它使用$v->add(...)定义的映射来验证输入,验证时返回true或false,以及适用的错误数组。 这就是所有缝制的后端!

<script type="text/javascript" src="y-validate/js/y-validate.js"></script>

<script type="text/javascript"> 

  <?php echo $v->buildJS(); ?> 

  <?php $v->jsValidations(); ?> 

</script>

当我们构建前端以捕获输入时,我们包括前端脚本y-validate.js 。 这将创建一个类似于上面PHP脚本的类。 为了链接这两个验证,我们调用PHP对象的两个方法。 首先, $v->buildJS将JavaScript验证类实例化为一个对象,并将验证类型检查附加到使用$v->add(...)附加到PHP对象的字段和提交按钮。 其次, jsValidations准备window.onload将PHP对象中保持的相同的Name + Regular Expression关系添加到表单中的字段。

重要的是, jsValidations方法确保对后端的验证成为对前端的辅助检查。 更新后端,前端也更新,这意味着验证不会步履维艰。

<label for="name">Your name <?php echo $v->fieldFeedback('name','namefeedback',$namefeedback);?></label>

<input type="text" name="name" id="name" value="<?php if (isset($name)) echo $name;?>" />

后端代码和前端代码都需要能够通知用户是否出现输入问题。 当然,这些字段本身也具有标签,这是在输入需要校正时为用户提供反馈的理想场所。 fieldFeedback采用三个参数:

  1. 第一个是反馈适合的领域。

  2. 第二个是为捕获反馈而创建的<em>的ID。 这映射到$v->add(...)的第三个参数。

  3. 第三个参数是$v->add(...)的第四个参数中定义的初始提示。

因此,除了设置要使用的验证的$v->add(...)中的第二个参数外,两个映射之间的参数很好地组合在一起。

使用单个位置进行反馈意味着无论是否启用JavaScript,用户都可以在一个地方寻求帮助。 由于验证和输入辅助功能是从同一对象构建的,因此对于验证和输入辅助而言,反馈文本是相同的。 同样,为了突出前端验证的辅助性质,在发生任何交互之前,会将反馈消息放入反馈字段中。 这会提示用户事先输入期望的格式,让他们第一次正确使用它。

页面加载后,将触发window.onload事件并将JavaScript输入帮助链接到所有字段和“提交”按钮; 这是在$v->jsValidations 。 当用户更改字段时, window.onload附加JavaScript事件将触发,并使用配置的正则表达式检查值。

已经在那里

我已经将PHP用于自己的库(请参见下文),但是其他语言和框架也都在实现这一想法:

  • PHPCake有一个名为JS Validator的扩展; 它依靠AJAX进行后端验证。
  • Ruby on Rails使用AJAX将验证直接植入后端验证。
  • 目前正在CodeIgniter上进行工作。
  • Python的一个聪明人在我开始从事这个工作的同时发布了一个




java中什么是表单验证 javascript表单验证的目的_javascript

<source type="image/webp"><source><img src="https://s2.51cto.com/images/blog/202307/22093923_64bb334b8bab856091.png?x-oss-process=image/watermark,size_16,text_QDUxQ1RP5Y2a5a6i,color_FFFFFF,t_30,g_se,x_10,y_10,shadow_20,type_ZmFuZ3poZW5naGVpdGk=" alt="">



免费学习PHP!

全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费


免费获得这本书


除了Python解决方案,大多数用于此概念的验证器都依赖AJAX将字段发送回服务器以进行验证。 由于验证要求通常不会在页面请求和用户输入数据的几秒钟之内发生变化,因此这是按字段验证的额外开销。 同样,这些脚本没有加入帮助用户的最佳方法,而是告诉他们首先要期望什么。 通过将验证的英语描述附加到每个字段,并首先将其显示为有用的提示来提示用户输入内容,我们将帮助用户第一次正确输入。 您看过表格多少次,然后抱怨:“为什么我刚开始时不告诉我?”

结论

即使禁用了JavaScript,使用中央对象来管理验证和输入辅助任务也可以创建一致的最终用户体验。

  • 我们有一个地方可以同时更新增强功能(JavaScript帮助)和必需的功能(后端验证)。 因此,两者不能脱节,我们可以确保为用户带来无缝体验。
  • 我们有一个地方可以找到增强功能,因此对于我们的代码的未来维护者来说,在代码中实现各种验证和帮助的地方定位时,不会感到困惑。
  • 该代码还促进了行为与表示的分离。 程序员对验证进行编程,而设计人员实施反馈的表示。
  • 用户有更多的控制权,对点击大的提交按钮很有信心。

不要忘记:PHP-Validate的代码和示例表单可供下载 。


javascript验证