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 相关文章推荐
用于table内容排序
Jul 21 Javascript
JavaScript 对Cookie 操作的封装小结
Dec 31 Javascript
jquery动画3.创建一个带遮罩效果的图片走廊
Aug 24 Javascript
Angularjs编写KindEditor,UEidtor,jQuery指令
Jan 28 Javascript
理解Javascript的动态语言特性
Jun 17 Javascript
基于jquery实现表格内容筛选功能实例解析
May 09 Javascript
JS实现动态增加和删除li标签行的实例代码
Oct 16 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
Dec 08 Javascript
微信小程序录音与播放录音功能
Dec 25 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
深入解析微信小程序开发中遇到的几个小问题
Jul 11 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
laravel学习笔记之模型事件的几种用法示例
2017/08/15 PHP
在Javascript中为String对象添加trim,ltrim,rtrim方法
2006/09/22 Javascript
cnblogs csdn 代码运行框实现代码
2009/11/02 Javascript
javascript suggest效果 自动完成实现代码分享
2012/02/17 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
2014/02/28 Javascript
node+express+jade制作简单网站指南
2014/11/26 Javascript
js获取时间并实现字符串和时间戳之间的转换
2015/01/05 Javascript
原生js和jquery实现图片轮播特效
2015/04/23 Javascript
JavaScript实现的多个图片广告交替显示效果代码
2015/09/04 Javascript
谈谈jQuery Ajax用法详解
2015/11/27 Javascript
jQuery插件Flexslider实现图片轮播、图文结合滑动切换效果
2020/04/16 Javascript
完美实现八种js焦点轮播图(上篇)
2016/07/18 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
基于Vue实现timepicker
2017/04/25 Javascript
vue vuex vue-rouert后台项目——权限路由(适合初学)
2017/12/29 Javascript
AngularJS 事件发布机制
2018/08/28 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
python mysqldb连接数据库
2009/03/16 Python
Python函数可变参数定义及其参数传递方式实例详解
2015/05/25 Python
浅谈Python的Django框架中的缓存控制
2015/07/24 Python
Python Flask基础教程示例代码
2018/02/07 Python
基于torch.where和布尔索引的速度比较
2020/01/02 Python
Python实现异步IO的示例
2020/11/05 Python
澳大利亚婴儿、幼儿和儿童在线设计师商店:Smooch Baby
2019/02/16 全球购物
Yankee Candle官网:美国最畅销蜡烛品牌之一
2020/01/05 全球购物
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
教师年度考核自我鉴定
2014/01/19 职场文书
《孔繁森》教学反思
2014/04/17 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
初中差生评语
2014/12/29 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
金陵十三钗观后感
2015/06/04 职场文书
电力安全学习心得体会
2016/01/18 职场文书
python3.9之你应该知道的新特性详解
2021/04/29 Python
修改并编译golang源码的操作步骤
2021/07/25 Golang
Golang日志包的使用
2022/04/20 Golang