`

一个简单的验证带验证提示例子

    博客分类：
  • ajax
jQueryJavaScript编程CSS脚本 
阅读更多

该例子的源码来源于《锋利的JQuery》这本书。Jquery，怎么说呢？不说别的，开发基于js脚本的web页面的人，真的很值得看看。它对js原生代码的封装的很好，有点面向接口编程的思想，不用知道具体的实现，对于很多方法直接拿来用就OK了。而且还有行为和表现的分离这层思想。。。感觉学了点皮毛，又感觉收获很多。

还有很多的plugins可供学习。。。下面是Validate插件的简单使用代码：

Code:
  1. <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html>
  3. <head>
  4. <metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
  5. <title></title>
  6. <scriptsrc="../../scripts/jquery-1.3.1.js"type="text/javascript"></script>
  7. <scriptsrc="../../scripts/jquery.validate.js"type="text/javascript"></script>
  8. <scriptsrc="../../scripts/jquery.metadata.js"type="text/javascript"></script>
  9. <styletype="text/css">
  10. *{font-family:Verdana;font-size:96%;}
  11. label{width:10em;float:left;}
  12. label.error{float:none;color:red;padding-left:.5em;vertical-align:top;}
  13. p{clear:both;}
  14. .submit{margin-left:12em;}
  15. em{font-weight:bold;padding-right:1em;vertical-align:top;}
  16. </style>
  18. <scripttype="text/javascript">
  19. $(document).ready(function(){
  21. $("#commentForm").validate({meta:"validate"});
  23. });
  24. </script>
  26. </head>
  27. <body>
  30. <formclass="cmxform"id="commentForm"method="get"action="">
  31. <fieldset>
  32. <legend>一个简单的验证带验证提示的评论例子</legend>
  33. <p>
  34. <labelfor="cusername">姓名</label>
  35. <em>*</em><inputid="cusername"name="username"size="25"class="{validate:{required:true,minlength:2,messages:{required:'请输入姓名',minlength:'请至少输入两个字符'}}}"/>
  36. </p>
  37. <p>
  38. <labelfor="cemail">电子邮件</label>
  39. <em>*</em><inputid="cemail"name="email"size="25"class="{validate:{required:true,email:true,messages:{required:'请输入电子邮件',email:'请检查电子邮件的格式'}}}"/>
  40. </p>
  41. <p>
  42. <labelfor="curl">网址</label>
  43. <em></em><inputid="curl"name="url"size="25"value=""class="{validate:{url:true,messages:{url:'请检查网址的格式'}}}"/>
  44. </p>
  45. <p>
  46. <labelfor="ccomment">你的评论</label>
  47. <em>*</em><textareaid="ccomment"name="comment"cols="22"class="{validate:{required:true,messages:{required:'请输入您的评论'}}}"></textarea>
  48. </p>
  49. <p>
  50. <inputclass="submit"type="submit"value="提交"/>
  51. </p>
  52. </fieldset>
  53. </form>
  54. </body>
  55. </html>

需要引入的包，自行下载。

分享到：
| freemarker简单的入门例子
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery表单验证例子

    jQuery的validate插件是进行客户端表单验证的有力工具，尤其对于初学者来说，它提供了一个简单易用的接口来实现复杂的验证规则。 `jQuery.validate.js` 是这个插件的核心文件，它包含了所有验证功能的实现。通过...

    表单注册验证例子

    在网页开发中，表单注册验证是至关重要的一个环节，它确保了用户输入的数据符合预设的规则，从而保证数据的准确性和安全性。本例子旨在详细介绍如何实现一个全面的表单注册验证机制。 首先，我们需要理解表单验证的...

    JQuer用户名验证例子-java

    以下是一个简单的例子： ```javascript function validateUsername() { var username = $('#username').val(); if (username.length || username.length &gt; 20) { alert('用户名长度应在6到20个字符之间'); ...

    struts2官方例子7-表单验证 xml形式的验证

    在Struts2中，表单验证是非常重要的一个环节，它确保了用户输入的数据符合预设的规则，从而保证了应用程序的数据质量和安全性。本示例主要讲解的是使用XML文件进行表单验证的方法。 首先，让我们理解表单验证的基本...

    表单验证例子

    "表单验证例子"这个项目提供了一个简单的示例，演示了如何进行前端表单验证，特别是针对单选按钮和电子邮件地址的验证。 首先，表单验证的基本目标是预防无效数据的提交。例如，如果你有一个要求用户输入电子邮件...

    XForms用schema(xsd)验证的一个简单的例子

    它将传统的HTML表单提升到一个新的水平，提供了更强大、更灵活的数据验证和处理能力。在这个例子中，我们将深入探讨如何使用XForms结合XML Schema (xsd)进行数据验证。 首先，XML Schema（通常缩写为XSD）是XML文档...

    dwr用户登陆验证的例子

    Direct Web Remoting (DWR) 是一个开源的Java库，允许Web应用程序在客户端JavaScript和服务器端Java之间进行安全、简单的异步通信。这个"dwf用户登陆验证的例子"是一个示例项目，旨在帮助新手理解如何在DWR框架下...

    html、js简单表单验证

    此外，CSS可以用于美化验证提示信息，比如错误提示的样式。通过设置`::invalid`伪类，我们可以自定义样式： ```css input:invalid { border-color: red; } input:valid { border-color: green; } ``` 在这个...

    modeljs模型验证插件让数据验证更简单

    以下是一个简单的`modeljs-validator`使用示例，展示如何为模型属性添加验证规则： ```javascript const Model = require('modeljs'); const { createValidator } = require('modeljs-validator'); class User ...

    一个简单的shiro例子

    标题"一个简单的shiro例子"表明这是一个关于Apache Shiro的实践案例，Shiro是一个强大且易用的Java安全框架，用于处理认证、授权、加密和会话管理。 描述中的"一个简单的SSM框架"指的是Spring、Spring MVC和MyBatis...

    StevenZhang.FormValidateFrame一个很好自动验证例子

    StevenZhang.FormValidateFrame是一个由开发者Steven Zhang创建的框架，专门用于实现表单验证功能。在Web开发中，表单验证是必不可少的部分，它确保用户输入的数据符合预设的规则和标准，从而防止错误的数据提交到...

    AJAX实现注册验证的例子

    **标题解析：** "AJAX实现注册验证的例子" 这个标题表明了我们要探讨的是一个使用AJAX技术来实现用户注册时的实时验证的示例。在网页应用中，AJAX（Asynchronous JavaScript and XML）允许我们在不刷新整个页面的...

    jquery.validate表单验证密码完整例子(带密码强度显示）

    总的来说，`jQuery Validate`的这个实例提供了一个实用的方法来增强表单验证体验，特别是对于密码安全性的强调。它不仅确保了用户输入的有效性，还鼓励他们创建更强大的密码，从而提高了整体的网络安全。通过理解并...

    .net邮箱验证，登录注册简单例子

    本示例通过使用.NET三层架构，结合JavaScript（js）和AJAX技术，为用户提供了一个高效且用户友好的验证和注册流程。以下是这个简单例子中的关键知识点： 1. **.NET三层架构**：这是一种软件设计模式，将业务逻辑、...

    javascript简单验证框架

    "javascript简单验证框架"就是这样一个工具，它简化了JavaScript表单验证的过程。 这个框架的核心是`CheckForm.js`文件，这通常是一个包含了各种验证规则和函数的JavaScript库。开发者可以通过调用这些预定义的方法...

    一个js验证表单

    【标题】"一个js验证表单"涉及到的是前端开发中的一个重要环节——表单验证。在网页设计中，用户输入的数据需要经过验证以确保其有效性和安全性。JavaScript是一种常用的客户端脚本语言，它允许我们在用户的浏览器上...

    一个 ajax 用户验证的例子

    - **checker.asp**：这是一个后端脚本，通常由ASP（Active Server Pages）编写，负责处理来自前端的验证请求。它接收到用户名参数，查询数据库确认该用户名是否已被注册，然后返回一个简洁的JSON或XML响应，表示...

    Flex实现非空验证小例子

    本例子提供了在Flex中实现非空验证的方法，通过下载的压缩包，你将得到一个实际运行的示例，包括可能的源代码、图片以及相关文档，帮助你直观地理解如何进行非空验证。 在Flex中，我们可以使用Validator类来创建...

    一个登录验证的例子-JSP开发

    在这个例子中，我们将会深入探讨如何利用JSP技术来实现一个简单的登录验证系统。 首先，我们来看一下提供的文件列表： 1. `check.jsp`：这是验证用户输入的登录信息的页面，它会处理用户从`index.jsp`提交的表单...

Magicbox
Global site tag (gtag.js) - Google Analytics