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实现window.open不被拦截的解决方法汇总
Oct 30 Javascript
javascript实现博客园页面右下角返回顶部按钮
Feb 22 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
jQuery插件扩展extend的简单实现原理
Jun 24 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
基于Vue、Vuex、Vue-router实现的购物商城(原生切换动画)效果
Jan 09 Javascript
vue 动态绑定背景图片的方法
Aug 10 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
Nov 12 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
JS实现纵向轮播图(初级版)
Jan 18 Javascript
小程序双头slider选择器的实现示例
Mar 31 Javascript
Angular CLI发布路径的配置项浅析
Mar 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中使用Imagick实现各种图片效果实例
2015/01/21 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
php的无刷新操作实现方法分析
2020/02/28 PHP
window.onload 加载完毕的问题及解决方案(下)
2009/07/09 Javascript
让你的网站可编辑的实现js代码
2009/10/19 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
jquery中获取id值方法小结
2013/09/22 Javascript
讨论html与javascript在浏览器中的加载顺序问题
2013/11/27 Javascript
js中的eventType事件及其浏览器支持性介绍
2013/11/29 Javascript
javascript模拟订火车票和退票示例
2014/04/24 Javascript
常见JS验证脚本汇总
2015/12/01 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
JavaScript原生对象常用方法总结(推荐)
2016/05/13 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
简单实现Vue的observer和watcher
2016/12/21 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
js,jq,css多方面实现简易下拉菜单功能
2017/05/13 Javascript
微信小程序 websocket 实现SpringMVC+Spring+Mybatis
2017/08/04 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[01:33:14]LGD vs VP Supermajor 败者组决赛 BO3 第二场 6.10
2018/07/04 DOTA
Python爬取国外天气预报网站的方法
2015/07/10 Python
利用Python进行数据可视化常见的9种方法!超实用!
2018/07/11 Python
css3+伪元素实现鼠标移入时下划线向两边展开的效果
2017/04/25 HTML / CSS
台湾流行服饰购物平台:OB严选
2018/01/21 全球购物
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
计算机专业优秀大学生自我总结
2014/01/21 职场文书
军训自我鉴定范文
2014/02/13 职场文书
优秀技术工人先进材料
2014/02/17 职场文书
庆六一活动总结
2014/08/29 职场文书
服务员岗位职责范本
2015/04/09 职场文书
八年级作文之感悟亲情
2019/11/20 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
MySQL数字类型自增的坑
2021/05/07 MySQL