jQuery之Validation表单验证插件使用
<!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表单验证插件使用的更多相关文章
- jQuery学习之:Validation表单验证插件
http://polaris.blog.51cto.com/1146394/258781/ 最近由于公司决定使用AJAX + Struts2来重构项目,让我仔细研究一下这两个,然后集中给同事讲讲,让每 ...
- Jquery.validate.js表单验证插件的使用
作为一个网站web开发人员,以前居然不知道还有表单验证这样好呀的插件,还在一行行写表单验证,真是后悔没能早点知道他们的存在. 最近公司不忙,自己学习一些东西的时候,发现了validation的一个实例 ...
- jQuery.validate.js表单验证插件
jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...
- 表单验证代码实例:jquery.validate.js表单验证插件
jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...
- jquery validation表单验证插件。
这个是刚学的,觉得对以后挺有用的,就想把自己所学的分享一下. 校验规则: (1)required:true 必输字段 (2)number:true 必须输入合法的数字(负数,小数) (3)digits ...
- jquery validation表单验证插件2。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- jquery validate强大的jquery表单验证插件
jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...
- 【jQuery基础学习】06 jQuery表单验证插件-Validation
jQuery的基础部分前面都讲完了,那么就看插件了. 关于jQuery表单验证插件-Validation validation特点: 内置验证规则:拥有必填.数字.E-Mail.URL和信用卡号码等1 ...
- jQuery 表单验证插件 jQuery Validation Engine 使用
jQuery 表单验证插件 jQuery Validation Engine 使用方式如下: 1.引入头文件(注意一定要把jQuery放在前面),指定使用 jQuery Validation Engi ...
随机推荐
- POJ 3104 Drying (二分+精度)
题目链接:click here~~ [题目大意]: 题意:有一些衣服,每件衣服有一定水量,有一个烘干机,每次能够烘一件衣服,每分钟能够烘掉k单位水. 每件衣服没分钟能够自己主动蒸发掉一单位水, 用烘干 ...
- HTTP要点概述:三,客户端和服务器,请求和响应
一,客户端和服务器: HTTP协议主要用于客户端和服务器之间的通信. 1,客户端(client):请求访问资源的一端.(知道为啥用C表示客户端了吧) 2,服务器(server):提供资源响应的一端. ...
- publish and submit
http://blog.csdn.net/w_jewelry/article/details/8123639 1.Gerrit里点击“publish and submit”提示如下:Your chan ...
- Android NDK生成及连接静态库与动态库
对于Android应用开发,大部分情况下我们使用Java就能完整地实现一个应用.但是在某些情况下,我们需要借助C/C++来写JNI本地代码.比如,在使用跨平台的第三方库的时候:为了提升密集计算性能的时 ...
- centOS安装mysql---glibc方式
写在前面: 首先,centos是自己集成mysql的.但是我要用的服务器人家没给装. 其次,centos是可以yum安装mysql的,我很高兴而且轻松的用yum把mysql安装上了.但是,运行的时候很 ...
- 唯一性校验 impl 和 action
IMPL方法实现 // 这个方法是通过ID修改数据 如果得到结果大于0 表明结果有重复 如果得到结果小于0 表明结果正确 @Override public boolean checkVersion( ...
- Java-Maven:Maven百科
ylbtech-Java-Maven:Maven百科 1.返回顶部 1. Maven项目对象模型(POM),可以通过一小段描述信息来管理项目的构建,报告和文档的软件项目管理工具.Maven 除了以程序 ...
- 【415】C语言文件读写
A program can open and close, and read from, and write to, a file that is defined by the user This i ...
- RelativeLayout和layout_weight的异曲同工之妙(转载)
转自:http://ericbaner.iteye.com/blog/1161751 Android应用UI开发,对以上布局,可以使用RelativeLayout, 即: Xml代码 <Rela ...
- 洛谷 P3825 [NOI2017]游戏 【2-SAT+状压】
UOJ和洛谷上能A,bzoj 8ms即WA,现在也不是知道为啥--因为我太弱了 先看数据范围发现d非常小,自然想到了状压. 所以先假装都是只能跑两种车的,这显然就是个2-SAT问题了:对于x场没有hx ...