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 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
JQuery 拾色器插件发布-jquery.icolor.js
Oct 20 Javascript
面向对象的Javascript之三(封装和信息隐藏)
Jan 27 Javascript
jquery实现metro效果示例代码
Sep 06 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
jquery实现带渐变淡入淡出并向右依次展开的多级菜单效果实例
Aug 22 Javascript
JavaScript中Function函数与Object对象的关系
Dec 17 Javascript
全面了解函数声明与函数表达式、变量提升
Aug 09 Javascript
详解angularjs popup-table 弹出框表格指令
Sep 20 Javascript
简述vue状态管理模式之vuex
Aug 29 Javascript
详细分析React 表单与事件
Jul 08 Javascript
在Uni中使用Vue的EventBus总线机制操作
Jul 31 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查看session内容的函数
2008/08/27 PHP
PHP Squid中可缓存的动态网页设计
2008/09/17 PHP
php中curl、fsocket、file_get_content三个函数的使用比较
2014/05/09 PHP
php libevent 功能与使用方法详解
2020/03/04 PHP
JavaScript实现按照指定长度为数字前面补零输出的方法
2015/03/19 Javascript
JQuery入门基础小实例(1)
2015/09/17 Javascript
jQuery常用的一些技巧汇总
2016/03/26 Javascript
Bootstrap布局之栅格系统详解
2016/06/13 Javascript
PHP+jquery+ajax实现分页
2016/12/09 Javascript
angularJS之$http:与服务器交互示例
2017/03/17 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
如何在js代码中消灭for循环实例详解
2018/07/29 Javascript
JavaScript数组方法的错误使用例子
2018/09/13 Javascript
vue列表单项展开收缩功能之this.$refs的详解
2019/05/05 Javascript
JavaScript实现页面中录音功能的方法
2019/06/04 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
vuex存取值和映射函数使用说明
2020/07/24 Javascript
原生js实现放大镜组件
2021/01/22 Javascript
[44:01]2018DOTA2亚洲邀请赛3月30日 小组赛B组 EG VS paiN
2018/03/31 DOTA
Python获取邮件地址的方法
2015/07/10 Python
python遍历目录的方法小结
2016/04/28 Python
Pyinstaller 打包exe教程及问题解决
2019/08/16 Python
Python3分析处理声音数据的例子
2019/08/27 Python
python不使用for计算两组、多个矩形两两间的iou方式
2020/01/18 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
Godiva巧克力英国官网:比利时歌帝梵巧克力
2018/08/28 全球购物
一些Solaris面试题
2013/03/22 面试题
工作的心得体会
2013/12/31 职场文书
文秘求职信范文
2014/04/10 职场文书
应届大学生自荐书
2014/06/17 职场文书
井冈山红色之旅心得体会
2014/10/07 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
Python爬虫实战之爬取携程评论
2021/06/02 Python
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS