<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<script src="jquery-3.2.1.js"></script>
<script src="jquery-validation-1.17.0/dist/jquery.validate.js"></script>
<script src="jquery.metadata.js"></script>
<script src="jquery-validation-1.17.0/dist/localization/messages_zh.js"></script>
<script>
$(function () {
//$("#addForm").validate({
// rules: {
// username: {
// required: true,
// minlength: 4
// },
// email: {
// required: true,
// email: true
// },
// address: "url",
// content: "required"
// }
//});
$("#addForm").validate({
rules: {
username: { required: true, minlength: 2 },
email: { required: true, email: true },
address: "url",
content: "required",
cvalcode: { formual: "7+9" }
}
});
});
$.validator.addMethod(
"formual",
function (value, element, param) {
return value == eval(param);
},
'请输入正确的结果'
);
</script>
</head>
<body>
<form action="#" method="post" id="addForm">
<p>
姓名：
<input type="text" name="username" value=" " />
</p>
<p>
电子邮件：
<input type="text" name="email" value=" " />
</p>
<p>
网址：
<input type="text" name="address" value=" " />
</p>
<p>
我的评论：
<textarea name="content"></textarea>
</p>
<label for="cvalcode">验证码</label>
<input type="text" name="cvalcode" id="cvalcode" value=" " />=7+9
<p>
<input type="submit" name="tijiao" value="提交" />
</p>
</form>
</body>
</html>

代码详情如下：

 <!DOCTYPE html>

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

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

     <title></title>

     <script src="jquery-3.2.1.js"></script>

     <script src="jquery-validation-1.17.0/dist/jquery.validate.js"></script>

     <script src="jquery.metadata.js"></script>

     <script src="jquery-validation-1.17.0/dist/localization/messages_zh.js"></script>

     <script>

         $(function () {

             //$("#addForm").validate({

             //    rules: {

             //        username: {

             //            required: true,

             //            minlength: 4

             //        },

             //        email: {

             //            required: true,

             //            email: true

             //        },

             //        address: "url",

             //        content: "required"

             //    }

             //});

             $("#addForm").validate({

                 rules: {

                     username: { required: true, minlength: 2 },

                     email: { required: true, email: true },

                     address: "url",

                     content: "required",

                     cvalcode: { formual: "7+9" }

                 }

             });

         });

         $.validator.addMethod(

                 "formual",

                 function (value, element, param) {

                     return value == eval(param);

                 },

                 '请输入正确的结果'

             );

     </script>

 </head>

 <body>

     <form action="#" method="post" id="addForm">

         <p>

             姓名：

             <input type="text" name="username" value=" " />

         </p>

         <p>

             电子邮件：

             <input type="text" name="email" value=" " />

         </p>

         <p>

             网址：

             <input type="text" name="address" value=" " />

         </p>

         <p>

             我的评论：

             <textarea name="content"></textarea>

         </p>

         <label for="cvalcode">验证码</label>

         <input type="text" name="cvalcode" id="cvalcode" value=" " />=7+9

         <p>

             <input type="submit" name="tijiao" value="提交" />

         </p>

     </form>

 </body>

 </html>

jQuery之Validation表单验证插件使用的更多相关文章

  1. jQuery学习之：Validation表单验证插件

    http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...

  2. Jquery.validate.js表单验证插件的使用

    作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...

  3. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  4. 表单验证代码实例:jquery.validate.js表单验证插件

    jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...

  5. jquery validation表单验证插件。

    这个是刚学的,觉得对以后挺有用的,就想把自己所学的分享一下. 校验规则: (1)required:true 必输字段 (2)number:true 必须输入合法的数字(负数,小数) (3)digits ...

  6. jquery validation表单验证插件2。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  8. 【jQuery基础学习】06 jQuery表单验证插件-Validation

    jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...

  9. jQuery 表单验证插件 jQuery Validation Engine 使用

    jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...

随机推荐

  1. 更改Mysql登录密码

    版本号49之前的跨域设置 在Windows命令行下修改mysql数据库密码步骤如下: 1.通过dos命令进入mysql的bin目录: 2.输入“mysql -uroot -p”,回车进入mysql命令 ...

  2. form标签中id和name属性的区别

    HTML元素的ID和Name属性的区别 一直认为ID和NAME是一样的,两个又可以一起出现,甚是疑惑. 今天BAIDU了一下,才发现里面大有文章.发出来研究研究: 最classical的答案:ID就像 ...

  3. Android沉浸式状态栏(透明状态栏)最佳实现

    Android沉浸式状态栏(透明状态栏)最佳实现 在Android4.4之前,我们的应用没法改变手机的状态栏颜色,当我们打开应用时,会出现上图中左侧的画面,在屏幕的顶部有一条黑色的状态栏,和应用的风格 ...

  4. VMware克隆虚拟机后网络配置

    修复克隆虚拟机文件 # vi /etc/udev/rules.d/70-persistent-net.rules # PCI device 0x8086:0x100f (e1000) SUBSYSTE ...

  5. 七.OC基础加强--1.内存管理 2.野指针,内存泄露 3.set方法的内存管理 4.@property参数 5.@class和循环retain的使用 6.NSString的内存管理

    1,内存管理简单介绍 1,为什么要有内存管理? malloc selloc dealloc```需要回头复习 一般的内存 4s 是512m内存:6 是1024m内存: 当内存过大时,会耗尽内存.出现程 ...

  6. Go实战--通过gin-gonic框架搭建restful api服务(github.com/gin-gonic/gin)

    生命不止,继续 go go go !!! 先插播一条广告,给你坚持学习golang的理由: <2017 软件开发薪酬调查:Go 和 Scala 是最赚钱的语言> 言归正传! 之前写过使用g ...

  7. JS事件流与DOM事件处理程序

    在Javascript的DOM中,关于事件Event对象的知识是一定要掌握的.Event对象模型主要分为两个部分,一个是Event对象本身具有的属性和方法,这个参照API就可以学得:另一个是在DOM节 ...

  8. 【180】IDL 读写 HDF 文件

    HDF(Hierarchical Data Formats)数据格式由 NCSA 开发.HDF 提供了大量的数据模式,包括多维数组.表格.图像.注解和调色板.在下面的章节中,将描述 HDF 科学数据系 ...

  9. c的free注意事项和c++的简洁(析构大哥)

    #include <iostream> using namespace std; // ////c语言版本 //struct stu //{ // char *name; // int a ...

  10. 【黑金教程笔记之006】【建模篇】【Lab 05 SOS信号之一】—笔记

    sos_module.v是产生SOS信号的功能模块.即有次序的输出莫斯码:点.画.间隔.control_module.v是一个定时触发器,每一段时间使能sos_module.v. 模块: /***** ...