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中实现简单Formatter函数示例代码
Aug 19 Javascript
jQuery中:image选择器用法实例
Jan 03 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
基于JavaScript实现瀑布流效果(循环渐近)
Jan 27 Javascript
JavaScript 对象字面量讲解
Jun 06 Javascript
Node.js + Redis Sorted Set实现任务队列
Sep 19 Javascript
JS返回只包含数字类型的数组实例分析
Dec 16 Javascript
微信小程序 出现错误:{&quot;baseresponse&quot;:{&quot;errcode&quot;:-80002,&quot;errmsg&quot;:&quot;&quot;}}解决办法
Feb 23 Javascript
ES6小技巧之代替lodash
Jun 07 Javascript
详解用async/await来处理异步
Aug 28 Javascript
vue实现鼠标经过动画
Oct 16 Javascript
解决Vue @submit 提交后不刷新页面问题
Jul 18 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
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
php下使用curl模拟用户登陆的代码
2010/09/10 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
各种快递查询--Api接口
2016/04/26 PHP
PHP利用Mysql锁解决高并发的方法
2018/09/04 PHP
php与阿里云短信接口接入操作案例分析
2020/05/27 PHP
js验证表单大全
2006/11/25 Javascript
jquery 常用操作方法
2010/01/28 Javascript
基于jquery的3d效果实现代码
2011/03/23 Javascript
javascript检查浏览器是否已经启用XX功能
2015/07/10 Javascript
基于jQuery实现多层次的手风琴效果附源码
2015/09/21 Javascript
HTML5 实现的一个俄罗斯方块实例代码
2016/09/19 Javascript
vue.js整合mint-ui里的轮播图实例代码
2017/12/27 Javascript
详解js的视频和音频采集
2018/08/09 Javascript
vue 中滚动条始终定位在底部的方法
2018/09/03 Javascript
vue如何截取字符串
2019/05/06 Javascript
微信小程序自定义弹窗滚动与页面滚动冲突的解决方法
2019/07/16 Javascript
vue 需求 data中的数据之间的调用操作
2020/08/05 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
2020/11/03 Javascript
vue如何使用rem适配
2021/02/06 Vue.js
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
python采集博客中上传的QQ截图文件
2014/07/18 Python
详解在Python程序中自定义异常的方法
2015/10/16 Python
Python随手笔记之标准类型内建函数
2015/12/02 Python
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
TensorFlow数据输入的方法示例
2018/06/19 Python
python中时间模块的基本使用教程
2019/05/14 Python
使用tqdm显示Python代码执行进度功能
2019/12/08 Python
python 识别登录验证码图片功能的实现代码(完整代码)
2020/07/03 Python
MCM英国官网:奢侈皮具制品
2017/04/18 全球购物
银行会计主管岗位职责
2014/10/01 职场文书
专家推荐信范文
2015/03/26 职场文书
2015年组织部工作总结
2015/04/03 职场文书
讲文明倡议书
2015/04/29 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书