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 ...
随机推荐
- wget和curl
1 curl比wget支持更多的协议 2 wget是支持递归的,而curl不支持
- DataTabless Add rows
参考官网案例:https://datatables.net/examples/api/add_row.html JS: $(document).ready(function() { var t ...
- bzoj2743 [HEOI2012]采花——树状数组+离线
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=2743 和 HH的项链 那道题很像,也是类似的做法: 但不同的是这里的点只有有前驱时才起作用: ...
- 855E
数位DP 昨天的B题,excited 又学习了一下数位dp... 数位dp要考虑几个比较重要的东西:1.前导0,2.天际线,3.记忆化的条件,4.细节 经常数位dp会问我们l->r区间中满足某某 ...
- 关于spring cloud eureka整合ribbon实现客户端的负载均衡
1. 实现eureka整合ribbon非常简单, 1.1.首先引入所需maven依赖 <dependency> <groupId>org.springframework.boo ...
- php 和 js之间使用json通信
有时候我们需要用后台从数据库中得到的数据在js中进行处理,但是当从php中获取到数据的时候,使用的是键值对形式的多维关联数组.而我们知道,js只支持索引数组,不支持关联数组,这个时候从后台传递过来的数 ...
- Pascal之while
program Project1; {$APPTYPE CONSOLE} uses SysUtils; begin { TODO -oUser -cConsole Main : Insert code ...
- bzoj 3875: [Ahoi2014&Jsoi2014]骑士游戏【dp+spfa】
设f[i]为杀死i的最小代价,显然\( f[i]=min(k[i],s[i]+\sum f[to]) \) 但是这个东西有后效性,所以我们使用spfa来做,具体就是每更新一个f[i],就把能被它更新的 ...
- bzoj 3589: 动态树【树链剖分+容斥】
因为一开始调试不知道unsigned怎么输出就没有加\n结果WA了一上午!!!!!然而最后放弃了unsigned选择了&2147483647 首先链剖,因为它所给的链一定是某个点到根的路径上的 ...
- Elasticsearch的功能、使用场景以及特点
1.Elasticsearch的功能,干什么的 2.Elasticsearch的适用场景,能在什么地方发挥作用 3.Elasticsearch的特点,跟其他类似的东西不同的地方在哪里 1.Elasti ...