jquery内置验证(validate)使用方法示例(表单验证)


Posted in Javascript onDecember 04, 2013

(1)required:true 必输字段
(2)remote:"check.php" 使用ajax方法调用check.php验证输入值
(3)email:true 必须输入正确格式的电子邮件
(4)url:true 必须输入正确格式的网址
(5)date:true 必须输入正确格式的日期
(6)dateISO:true 必须输入正确格式的日期(ISO),例如:2009-06-23,1998/01/22 只验证格式,不验证有效性
(7)number:true 必须输入合法的数字(负数,小数)
(8)digits:true 必须输入整数
(9)creditcard: 必须输入合法的信用卡号
(10)equalTo:"#field" 输入值必须和#field相同
(11)accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(12)maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(13)minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(14)rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(15)range:[5,10] 输入值必须介于 5 和 10 之间
(16)max:5 输入值不能大于5
(17)min:10 输入值不能小于10

实例Demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>validate.js内置验证规则的使用</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
</head>
<body>
<form action=""  method="get" id="tinyphp">
<input type="text" value="" name="userName" />
<input type="submit" value="提交" />
</form>
<script type="text/javascript">
$("#tinyphp").validate({
    // 添加验证规则
    rules: {
        userName:{
            required: true,
            digits:true,
            userName: true,
            rangelength: [5,10]    
        }
    },    //重设提示信息
    messages:{
        userName: {
            required: "请填写用户名",
            digits:"请输入整数",
            rangelength: "用户名必须在5-10个字符之间" 
        }       
    }
});  
    </script>
</body>
</html>
Javascript 相关文章推荐
jquery加载页面的方法(页面加载完成就执行)
Jun 21 Javascript
json的定义、标准格式及json字符串检验
May 11 Javascript
深入分析JSON编码格式提交表单数据
Jun 25 Javascript
在 Express 中使用模板引擎
Dec 10 Javascript
简单讲解AngularJS的Routing路由的定义与使用
Mar 05 Javascript
微信小程序 wx.uploadFile在安卓手机上面the same task is working问题解决
Dec 14 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
webpack external模块的具体使用
Mar 10 Javascript
ES6 系列之 Generator 的自动执行的方法示例
Oct 19 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
微信小程序实现拼图小游戏
Oct 22 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 Javascript
两个数组去重的JS代码
Dec 04 #Javascript
jquery使用jquery.zclip插件复制对象的实例教程
Dec 04 #Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 #Javascript
快速解决FusionCharts联动的中文乱码问题
Dec 04 #Javascript
js跑步算法的实现代码
Dec 04 #Javascript
如何在JavaScript中实现私有属性的写类方式(二)
Dec 04 #Javascript
如何在JavaScript中实现私有属性的写类方式(一)
Dec 04 #Javascript
You might like
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
Extjs在exlipse中设置自动提示的方法
2010/04/07 Javascript
jQuery的实现原理的模拟代码 -1 核心部分
2010/08/01 Javascript
JavaScript中通过闭包解决只能取得包含函数中任何变量最后一个值的问题
2010/08/12 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
2012/01/03 Javascript
DOM和XMLHttpRequest对象的属性和方法整理
2012/01/04 Javascript
js/ajax跨越访问-jsonp的原理和实例(javascript和jquery实现代码)
2012/12/27 Javascript
JS实现点击链接取消跳转效果的方法
2014/01/24 Javascript
javascript如何判断输入的url是否正确
2014/04/11 Javascript
Sort()函数的多种用法
2016/03/20 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
手机端图片缩放旋转全屏查看PhotoSwipe.js插件实现
2016/08/25 Javascript
ES6新特性之Object的变化分析
2017/03/31 Javascript
AngularJS中的promise用法分析
2017/05/19 Javascript
D3.js实现拓扑图的示例代码
2018/06/30 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
2019/03/07 Javascript
vue+egg+jwt实现登录验证的示例代码
2019/05/18 Javascript
ES6 Generator函数的应用实例分析
2019/06/26 Javascript
基于JavaScript实现单例模式
2019/10/30 Javascript
JS实现移动端可折叠导航菜单(现代都市风)
2020/07/07 Javascript
[01:03:41]完美世界DOTA2联赛PWL S3 DLG vs Phoenix 第一场 12.17
2020/12/19 DOTA
K-近邻算法的python实现代码分享
2017/12/09 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
logging level级别介绍
2020/02/21 Python
python+opencv边缘提取与各函数参数解析
2020/03/09 Python
Python eval函数介绍及用法
2020/11/09 Python
CSS3实现翘边的阴影效果的代码示例
2016/06/13 HTML / CSS
英国异国风情旅游网站:Travel Talk Tours(团体旅游、探险旅游、帆船假期)
2018/07/26 全球购物
4s客服专员岗位职责
2013/12/01 职场文书
七一党建活动方案
2014/01/28 职场文书
机械电子工程专业自荐书
2014/06/10 职场文书
小学网上祭英烈活动总结
2014/07/05 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
夫妻双方自愿离婚协议书怎么写
2014/12/01 职场文书
Python爬虫进阶之Beautiful Soup库详解
2021/04/29 Python
redis lua限流算法实现示例
2022/07/15 Redis