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 相关文章推荐
Json序列化和反序列化方法解析
Dec 19 Javascript
JavaScript实现复制内容到粘贴板代码
Mar 31 Javascript
JS模拟实现ECMAScript5新增的数组方法
Mar 20 Javascript
Angular.JS利用ng-disabled属性和ng-model实现禁用button效果
Apr 05 Javascript
Angular 2父子组件之间共享服务通信的实现
Jul 04 Javascript
laydate日历控件使用方法详解
Nov 20 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
微信小程序如何获取用户收货地址
Nov 27 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解
Aug 07 Javascript
解决vue语法会有延迟加载显现{{xxx}}的问题
Nov 14 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
laravel 解决强制跳转 https的问题
2019/10/22 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
2013/12/11 Javascript
原生Javascript封装的一个AJAX函数分享
2014/10/11 Javascript
JS代码防止SQL注入的方法(超简单)
2016/04/12 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
详解如何在vue-cli中使用vuex
2018/08/07 Javascript
vueJs实现DOM加载完之后自动下拉到底部的实例代码
2018/08/31 Javascript
微信小程序入门之广告条实现方法示例
2018/12/05 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
vue在自定义组件中使用v-model进行数据绑定的方法
2019/03/25 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
2019/04/26 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
一文了解vue-router之hash模式和history模式
2019/05/31 Javascript
layer弹出层自定义提交取消按钮的例子
2019/09/10 Javascript
js绘制一条直线并旋转45度
2020/08/21 Javascript
[08:42]DOTA2每周TOP10 精彩击杀集锦vol.2
2014/06/25 DOTA
[47:02]2018DOTA2亚洲邀请赛3月29日 小组赛B组 VP VS paiN
2018/03/30 DOTA
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python2.7 json 转换日期的处理的示例
2018/03/07 Python
高效使用Python字典的清单
2018/04/04 Python
运用Python的webbrowser实现定时打开特定网页
2019/02/21 Python
python分布式编程实现过程解析
2019/11/08 Python
mac在matplotlib中显示中文的操作方法
2020/03/06 Python
用CSS3打造HTML5的Logo(实现代码)
2016/06/16 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
Jacadi Paris美国官方网站:法国童装品牌
2017/10/15 全球购物
JOSEPH官网:英国奢侈时尚品牌
2018/01/31 全球购物
DataReader和DataSet的异同
2014/12/31 面试题
局域网标准
2016/09/10 面试题
幼儿园中班评语大全
2014/04/17 职场文书
教师民族团结演讲稿
2014/08/27 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
用python批量解压带密码的压缩包
2021/05/31 Python
nginx配置虚拟主机的详细步骤
2021/07/21 Servers