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 $.ajax相关用法分享
Mar 16 Javascript
基于jQuery的烟花效果(运动相关)点击屏幕出烟花
Jun 14 Javascript
用JQuery在网页中实现分隔条功能的代码
Aug 09 Javascript
jQuery提交多个表单的小技巧
Jul 27 Javascript
javascript学习笔记(四)function函数部分
Sep 30 Javascript
js计算任意值之间随机数的方法
Jan 16 Javascript
JS动态显示表格上下frame的方法
Mar 31 Javascript
jquery实现动态改变div宽度和高度
May 08 Javascript
Window.Open打开窗体和if嵌套代码
Apr 15 Javascript
移动端触摸滑动插件swiper使用方法详解
Aug 11 Javascript
js 发布订阅模式的实例讲解
Sep 10 Javascript
js+html实现点名系统功能
Nov 05 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中的时间处理
2006/10/09 PHP
PHP 简易输出CSV表格文件的方法详解
2013/06/20 PHP
php使用curl发送json格式数据实例
2013/12/17 PHP
smarty简单入门实例
2014/11/28 PHP
Yii框架结合sphinx,Ajax实现搜索分页功能示例
2016/10/18 PHP
PHP实现中国公民身份证号码有效性验证示例代码
2017/05/03 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
常用简易JavaScript函数
2009/04/09 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
javascript中xml操作实现代码
2011/11/21 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
2013/02/01 Javascript
详述JavaScript实现继承的几种方式(推荐)
2016/03/22 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
2016/08/31 Javascript
js对象浅拷贝和深拷贝详解
2016/09/05 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
使用JavaScript中的lodash编写双色球效果
2018/06/24 Javascript
JS实现简单的点赞与踩功能示例
2018/12/05 Javascript
Bootstrap 时间日历插件bootstrap-datetimepicker配置与应用小结
2019/05/28 Javascript
python实现博客文章爬虫示例
2014/02/26 Python
Python字典数据对象拆分的简单实现方法
2017/12/05 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Python中字符串String的基本内置函数与过滤字符模块函数的基本用法
2019/05/27 Python
Django 对象关系映射(ORM)源码详解
2019/08/06 Python
HTML5 3D衣服摇摆动画特效
2016/03/17 HTML / CSS
全球性的在线商店:Vogca
2019/05/10 全球购物
应届医学毕业生求职信分享
2013/12/02 职场文书
大学毕业感言50字
2014/02/07 职场文书
细节决定成败演讲稿
2014/05/12 职场文书
英语专业求职信
2014/07/08 职场文书
党性教育心得体会
2014/09/03 职场文书
化学专业大学生职业生涯规划范文
2014/09/13 职场文书
2014年采购员工作总结
2014/11/18 职场文书
2015年“七七卢沟桥事变”纪念活动总结
2015/03/24 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
SQL语句多表联合查询的方法示例
2022/04/18 MySQL