<!DOCTYPE html>

<html>

  <head>

    <meta http-equiv="Content-Type" content="text/html; charset=ANSI"/>

    <title>Validation2</title>

    <script src="../Scripts/jquery-2.1.3.js"></script>

    <script src="../Scripts/jquery.metadata.js" type="text/javascript"></script>

    <script src="../Scripts/jquery.validate.js" type="text/javascript"></script>

    <script type="text/javascript">

      $(function(){

         $("#commentForm").validate({ meta : "validate" });

      });

    </script>

    <style type="text/css">

      *{font-family: Verdana; font-size:96%;}

      label{width: 10em; float: left;}

      label.error{float: none; color: red; padding-left: .5em; vertical-align: top;}

      p {clear: both;}

      .submit{margin-left: 12em;}

      em{font-weight: bold; padding-right: 1em; vertical-align: top;}

    </style>

  </head>

  <body>

    <form class="cmxform" id="commentForm" method="get" action="#">

      <fieldset>

        <legend>一个简单的验证带验证提示的评论例子</legend>

        <p>

           <label for="cusername">姓名</label><em>*</em>

           <input id="cusername" name="username" size="25" class="{validate: {required:true,minlength:2}}" />

        </p>

        <p>

           <label for="cemail">电子邮件</label><em>*</em>

           <input id="cemail" name="email" size="25" class="{validate:{required:true,email:true}}" />

        </p>

        <p>

           <label for="curl">网址</label><em>&nbsp;</em>

           <input id="curl" name="url" size="25" value="" class="{validate:{url:true}}" />

        </p>

        <p>

          <label for="ccoment">你的评论</label><em>*</em>

          <textarea id="ccoment" name="comment" cols="22" class="{validate:{required:true}}"></textarea>

        </p>

        <p>

           <input class="submit" type="submit" value="提交"/>

        </p>

      </fieldset>

    </form>

  </body>

</html>
    本人JS菜鸟，今天按照书本写代码，用jquery.metadata.js进行验证，结果失败了。调试多次，代码也检查一致，发现仍不能成功。后经大神指教调试，终于找到问题。
    原来是规则“空格”闯的祸，在获取规则的时候是按空格进行分割的，因此找不到规则了。
 
         
 
   修改如下：
         

 
       然后结果就可以出来了：
             
      看来还是要好好看看源码

【jQuery】jquery.metadata.js验证失效的更多相关文章

  1. JQuery Validate - 自定义js验证

    (function (window, $) { var validResult = {}; var checkObjs = { /** * 检查输入的一串字符是否全部是数字 * 输入:str Stri ...

  2. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  3. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  4. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  5. jQuery Validate验证框架详解(jquery.validate.min.js)

    原博客 jQuery Validate验证框架详解 jQuery校验官网地址:https://jqueryvalidation.org/ 一.导入js库 <script type="t ...

  6. JS验证控件jQuery Validate

    jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  7. jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式（jquery.validate.unobtrusive.js）

    最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...

  8. jQuery Validate 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.validate.messages_cn.js. ...

  9. aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)

    这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲     上面是效果,下面来说使用步骤 jQuery.Valid ...

随机推荐

  1. CentOS7安装MySQL8.0小计

    之前讲配置文件和权限的时候有很多MySQL8的知识,有同志说安装不太一样,希望发个文,我这边简单演示一下 1.环境安装 下载MySQL提供的CentOS7的yum源 官方文档:<https:// ...

  2. 关于Ninja中上传下载文件

    上传得时候 根据类型来判断一下: 然后下载的时候需要:在url的最后一个/ 后面加上你要下载的类型如/download/app.apk; 下载成功就是app.apk了;

  3. scala语法解析(解码指环)

    看惯了JAVA的语法,再看scala的语法,有的晦涩难懂.正好遇到一个介绍scala语法的文章,就直接截图留念.省的再临时抱佛脚了.

  4. linux 9 -- 交互式使用Bash Shell

    二十二. 交互式使用Bash Shell:     1.  用set命令设置bash的选项:     下面为set主要选项的列表及其表述: 选项名 开关缩写 描述 allexport -a 打开此开关 ...

  5. python利用wxpy监控微信公众号

    此次利用wxpy可以进行微信公众号的消息推送监测(代码超级简单),这样能进行实时获取链接.但是不光会抓到公众号的消息,好友的消息也会抓到(以后会完善的,毕竟现在能用了,而且做项目的微信号肯定是没有好友 ...

  6. 队列（Queue）

    队列(Queue) Queue: 先入先出(FIFO)的数据结构. offer,add区别: 一些队列有大小限制,因此如果想在一个满的队列中加入一个新项,多出的项就会被拒绝. 这时新的 offer 方 ...

  7. mysql设置有外键的主键自增及其他

    有外键的主键设置自增. ; ALTER TABLE `<table>` MODIFY COLUMN `id` ) NOT NULL AUTO_INCREMENT FIRST; 创建数据库, ...

  8. 现有exe转为服务_方式01

    1.安装X.exe服务: ...>路径\X.exe /install 2.卸载X.exe服务: ...>路径\X.exe /uninstall 3.开始运行XX(程序是X.exe,服务名是 ...

  9. .net短信接口调用示例（106短信通道）

    1. [代码]调用代理示例 using System;using System.Data;using System.Configuration;using System.Collections;usi ...

  10. HTML5 canvas save()和restore()方法讲解

    我们尝试用这个连续矩形的例子来描述 canvas 的状态堆是如何工作的.第一步是用默认设置画一个大四方形,然后保存一下状态.改变填充颜色画第二个小一点的白色四方形,然后再保存一下状态.再次改变填充颜色 ...