`

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

    博客分类：
  • 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简单的入门例子
评论
发表评论

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

相关推荐

    net验证控件的气泡提示例子

    [使用方法:] 1. 将WinValidator.dll引入到项目中； 2. 将WinValidator文件夹拷贝到web项目的根目录下； 2. 在.cs文件中加入引用using WinValidator; 3. 在Page_Load事件中插入如下代码： WinVal validtor = new ...

    一个Ajax表单检测验证实例.rar

    一个Ajax表单检测验证实例，在不刷新网页的情况下对表单中的各个输入项进行检查，并显示出错误提示，在众多ajax表单中，本示例并不是最复杂的，因此对于学习研究类似表单的实现方法很有参考价值。ajax无刷新表单验证...

    AJAX实现注册验证的例子

    AJAX实现注册验证的例子 基础的AJAX 、适合 初学者学习 。注释很详细。

    客户端统一验证JavaScript函数库及示例源码

    该函数库提供许多函数库，就不一一列举了，这里举几个代表性的函数例子加以解释说明，先介绍一个频率用的最多的函数，如函数verifyAll，定义如下： function verifyAll(myform) {…………..} 参数myform指代验证的...

    【网页设计作业】html数字计算机器人验证测试

    下面是关于 HTML 数字计算和机器人验证测试的设计步骤： 对于数字计算的设计步骤 创建一个包含两个数字的算术表达式，使用 ...以下是一个简单的例子，展示了如何使用 HTML、CSS 和 JavaScript 创建数字计算的表单：

    vue表单验证validate.min.js使用例子，formdata 文件上传表单提交

    1、validate.min.js 表单验证，自定义规则，自定义中文错误提示 2、formdata 表单文件上传 3、文件上传获取缩略图 FileReader

    jquery 表单验证实例

    jquery 表单验证实例，自动验证简单方便。 是.net 实例，VS2010版实例。 直接拷贝vail文件到你的网站根目录下即可。文件test.aspx是测试实例!messages_cn.js是中文提示，也可以通过该文件查看验证的字段，比如日期是...

    php ajax 验证代码 ajax 不刷新验证

    php ajax 验证代码 很好的例子 不刷新验证 详细的解释 还有源代码

    laravel validate 设置为中文的例子(验证提示为中文)

    今天小编就为大家分享一篇laravel validate 设置为中文的例子(验证提示为中文)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

    Struts2的validate验证框架

    这个validate验证框架中的actiionerror级别的错误的验证提示，并包含了如何在一个Action中处理多个业务逻辑，（struts1.x 中的DispatcheAction),例子比较简单，希望对大家学习struts有所帮助。

    登路验证用户名和密码

    SSH2登陆时验证用户名和密码是否已经存在的小例子。

    C#.net_经典编程例子400个

    5 实例006　菜级联菜单　7 1.2　工具栏设计　7 实例007　带背景的工具栏　7 实例008　浮动工具栏　8 实例009　带下拉菜单的工具栏　9 实例010　具有提示功能的工具栏　9 1.3　状态栏设计　10...

    Flex from_validator_表单验证

    提供： 表单的验证 基本流程 和处理方法 小小例子

    jquery validation插件表单验证的一个例子

    –验证国际化，中文–&gt; （不引用messages_cn.js是英文的提示，用了是中文） 代码如下: required: “This field is required.”, remote: “Please fix this field.”, email: “Please enter a valid email address....

    layui自定义验证,用ajax查询后台是否有重复数据,form.verify的例子

    2.有时后台返回结果没问题，但不提示验证结果，查了查网上资料后，发现是在ajax最后return时出的问题，ajax改为同步，最后把验证提示信息return，而不能在success或error中return。 form.verify({ account: ...

    HTML5利用约束验证API来检查表单的输入数据的代码实例

    如果说唯一的缺陷，就是提示框的样式是浏览器默认的，你无法改变，好吧，如果你相信浏览器厂商的设计师的审美水平的话（我相信他们的设计水平比绝大部分普通人要好，如果不考虑风格兼容的话），抓紧学就对了！...

    validation_hints:验证提示

    验证提示 提供源自模型验证的提示。 安装 gem 'validation_hints' 例子 class Person &lt; ActiveRecord xss=removed&gt; true validates :password , :length =&gt; { :within =&gt; 1 ... 5 } end Person . new . hints ...

    ask-for-github-auth:提示用户输入其github身份验证凭据并保存结果

    提示用户输入其github身份验证凭据并保存结果。 用安装 $ npm i ask-for-github-auth --save 用法 var ask = require ( 'ask-for-github-auth' ) ; 原料药 提示用户输入其github身份验证凭据。 保存答案，以便只...

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