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静态的url如何传递
May 03 Javascript
判断iframe是否加载完成的完美方法
Jan 07 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
jQuery横向擦除焦点图特效代码分享
Sep 06 Javascript
JS+CSS实现仿支付宝菜单选中效果代码
Sep 25 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
JS获取元素多层嵌套思路详解
May 16 Javascript
JS获取填报扩展单元格控件的值的解决办法
Jul 14 Javascript
详解vue移动端日期选择组件
Feb 22 Javascript
Angular使用ControlValueAccessor创建自定义表单控件
Mar 08 Javascript
详解vue-cli+element-ui树形表格(多级表格折腾小计)
Apr 17 Javascript
浅谈react路由传参的几种方式
Mar 23 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
特详细的PHPMYADMIN简明安装教程
2008/08/01 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
微信扫描二维码登录网站代码示例
2013/12/30 PHP
PHP实现微信对账单处理
2018/10/01 PHP
jquery 插件学习(五)
2012/08/06 Javascript
JavaScript字符串对象的concat方法实例(用于连接两个或多个字符串)
2014/10/16 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
webpack常用配置项配置文件介绍
2016/11/07 Javascript
BootStrapTable服务器分页实例解析
2016/12/20 Javascript
详解Vue2中组件间通信的解决全方案
2017/07/28 Javascript
详解javascript 正则表达式之分组与前瞻匹配
2018/05/30 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
深入Node TCP模块的理解
2019/03/13 Javascript
vue组件中iview的modal组件爬坑问题之modal的显示与否应该是使用v-show
2019/04/12 Javascript
详解微信小程序图片地扯转base64解决方案
2019/08/18 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
Node使用koa2实现一个简单JWT鉴权的方法
2021/01/26 Javascript
微信小程序实现点赞业务
2021/02/10 Javascript
python del()函数用法
2013/03/24 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
学python安装的软件总结
2019/10/12 Python
Python tensorflow实现mnist手写数字识别示例【非卷积与卷积实现】
2019/12/19 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
让IE9以下版本的浏览器兼容HTML5的方法
2014/03/12 HTML / CSS
北美Newegg打造的全球尖货海购平台:tt海购
2018/09/28 全球购物
华为菲律宾官方网站:HUAWEI Philippines
2021/02/23 全球购物
户籍证明的格式
2014/01/13 职场文书
班组拓展活动方案
2014/08/14 职场文书
街道务虚会发言材料
2014/10/20 职场文书
离婚协议书范文
2015/01/26 职场文书
作息时间调整通知
2015/04/22 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
安全教育片观后感
2015/06/17 职场文书
教师病假条范文
2015/08/17 职场文书
《失物招领》教学反思
2016/02/20 职场文书
导游词之任弼时故居
2020/01/07 职场文书