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 基础篇2 数据类型,语句,函数
Mar 14 Javascript
javascript制作坦克大战全纪录(2)
Nov 27 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
Bootstrap每天必学之导航条
Nov 27 Javascript
javascript瀑布流式图片懒加载实例解析与优化
Feb 23 Javascript
js字符串截取函数slice、substring和substr的比较
May 17 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
Vue.js双向绑定操作技巧(初级入门)
Dec 27 Javascript
node.js入门教程之querystring模块的使用方法
Feb 27 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
详解在Vue中通过自定义指令获取dom元素
Mar 04 Javascript
vue表单自定义校验规则介绍
Aug 28 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 批量删除 sql语句
2009/06/05 PHP
php cookies中删除的一般赋值方法
2011/05/07 PHP
thinkPHP5框架闭包函数与子查询传参用法示例
2018/08/02 PHP
PHP 8新特性简介
2020/08/18 PHP
JQuery 浮动导航栏实现代码
2009/08/27 Javascript
超级酷和最实用的jQuery实例收集(20个)
2010/04/21 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
使用ImageMagick进行图片缩放、合成与裁剪(js+python)
2013/09/16 Javascript
JS 页面计时器示例代码
2013/10/28 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
基于jQuery实现Ajax验证用户名是否存在实例
2016/03/30 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
让DIV的滚动条自动滚动到最底部的3种方法(推荐)
2016/09/24 Javascript
javascript使用递归算法求两个数字组合功能示例
2017/01/03 Javascript
老生常谈的跨域处理
2017/01/11 Javascript
集合Bootstrap自定义confirm提示效果
2017/09/19 Javascript
Bootstrap框架建立树形菜单(Tree)的实例代码
2017/10/30 Javascript
详解JavaScript的BUG和错误
2018/05/07 Javascript
Vue 报错TypeError: this.$set is not a function 的解决方法
2018/12/17 Javascript
node中短信api实现验证码登录的示例代码
2021/01/20 Javascript
Python中获取网页状态码的两个方法
2014/11/03 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
简单介绍Python中的len()函数的使用
2015/04/07 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python基于C/S模式实现聊天室功能
2019/01/09 Python
python实现彩色图转换成灰度图
2019/01/15 Python
django 做 migrate 时 表已存在的处理方法
2019/08/31 Python
专注澳大利亚特产和新西兰特产的澳洲中文网:0061澳洲制造
2019/03/24 全球购物
中科软笔试题和面试题
2014/10/07 面试题
编程输出如下图形
2013/11/24 面试题
化学教师自荐信范文
2013/12/28 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
慰问信范文
2015/02/14 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
Python的这些库,你知道多少?
2021/06/09 Python