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 iframe中打开文件,并检测iframe存在否
Dec 28 Javascript
Javascript面向对象编程(二) 构造函数的继承
Aug 28 Javascript
JavaScript实现复制功能各浏览器支持情况实测
Jul 18 Javascript
JavaScript中的类数组对象介绍
Dec 30 Javascript
JavaScript中的cacheStorage使用详解
Jul 29 Javascript
学习JavaScript设计模式(继承)
Nov 26 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
Nov 16 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
提升node.js中使用redis的性能遇到的问题及解决方法
Oct 30 Javascript
vue实现与安卓、IOS交互的方法
Nov 02 Javascript
JS module的导出和导入的实现代码
Feb 25 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 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将向Java靠拢
2006/10/09 PHP
PHP4引用文件语句的对比
2006/10/09 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP学习笔记之三 数据库基本操作
2011/01/17 PHP
PHP使用数组依次替换字符串中匹配项
2016/01/08 PHP
PHP编程实现阳历转换为阴历的方法实例
2017/08/08 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
Javascript 按位与运算符 (&amp;)使用介绍
2014/02/04 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
Listloading.js移动端上拉下拉刷新组件
2016/08/04 Javascript
vue调用高德地图实例代码
2017/04/28 Javascript
jquery中each循环的简单回滚操作
2017/05/05 jQuery
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
使用Vue开发一个实时性时间转换指令
2018/01/17 Javascript
vue实现弹幕功能
2019/10/25 Javascript
浅谈javascript事件环微任务和宏任务队列原理
2020/09/12 Javascript
[01:05:41]EG vs Optic Supermajor 败者组 BO3 第二场 6.6
2018/06/07 DOTA
python在linux中输出带颜色的文字的方法
2014/06/19 Python
Python对列表排序的方法实例分析
2015/05/16 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
python3 pillow生成简单验证码图片的示例
2017/09/19 Python
python生成二维码的实例详解
2017/10/29 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
django 发送邮件和缓存的实现代码
2018/07/18 Python
深入理解Django自定义信号(signals)
2018/10/15 Python
戴尔加拿大官网:Dell加拿大
2016/09/17 全球购物
小学生获奖感言范文
2014/02/02 职场文书
军训 自我鉴定
2014/02/03 职场文书
房地产公司见习自我鉴定
2014/04/28 职场文书
爱晚亭导游词
2015/02/09 职场文书
教师个人自我评价
2015/03/04 职场文书
大队委员竞选稿
2015/11/20 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
php png失真的原因及解决办法
2021/10/24 PHP