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 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
jqGrid jQuery 表格插件测试代码
Aug 23 Javascript
多浏览器兼容性比较好的复制到剪贴板的js代码
Oct 09 Javascript
利用JavaScript实现新闻滚动效果(实例代码)
Nov 27 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
jQuery查看选中对象HTML代码的方法
Jun 17 Javascript
javascript数据结构之串的概念与用法分析
Apr 12 Javascript
JavaScript表单验证实现代码
May 22 Javascript
Vue中计算属性computed的示例解读
Jul 26 Javascript
简单的React SSR服务器渲染实现
Dec 11 Javascript
vue不操作dom实现图片轮播的示例代码
Dec 18 Javascript
Rust中的Struct使用示例详解
Aug 14 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版快速排序、冒泡排序
2014/04/09 PHP
解读PHP的Yii框架中请求与响应的处理流程
2016/03/17 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
PHP判断函数是否被定义的方法
2019/06/21 PHP
PHP 自动加载类原理与用法实例分析
2020/04/14 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
JavaScript 选中文字并响应获取的实现代码
2011/08/28 Javascript
jQuery打印图片pdf、txt示例代码
2014/07/22 Javascript
Angularjs 基础入门
2014/12/26 Javascript
JavaScript截断字符串的方法
2015/07/15 Javascript
Bootstrap Table的使用总结
2016/10/08 Javascript
JS实现touch 点击滑动轮播实例代码
2017/01/19 Javascript
微信小程序 this和that详解及简单实例
2017/02/13 Javascript
VUE实现表单元素双向绑定(总结)
2017/08/08 Javascript
简述JS控制台的使用
2018/07/15 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
JS实现的排列组合算法示例
2019/07/16 Javascript
小程序使用watch监听数据变化的方法详解
2019/09/20 Javascript
使用zrender.js绘制体温单效果
2019/10/31 Javascript
Vue3新特性之在Composition API中使用CSS Modules
2020/07/13 Javascript
Python单链表简单实现代码
2016/04/27 Python
Python Nose框架编写测试用例方法
2017/10/26 Python
Python实现一个简单的验证码程序
2017/11/03 Python
python实现人民币大写转换
2018/06/20 Python
在python 不同时区之间的差值与转换方法
2019/01/14 Python
python 基于TCP协议的套接字编程详解
2019/06/29 Python
python基于event实现线程间通信控制
2020/01/13 Python
Python flask路由间传递变量实例详解
2020/06/03 Python
《学会待客》教学反思
2014/02/22 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
房租涨价通知
2015/04/23 职场文书
恋恋笔记本观后感
2015/06/16 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
交通事故责任认定书
2015/08/06 职场文书
Netty分布式客户端接入流程初始化源码分析
2022/03/25 Java/Android