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 相关文章推荐
响应鼠标变换表格背景或者颜色的代码
Mar 30 Javascript
禁止js文件缓存的代码
Apr 09 Javascript
理解Javascript_03_javascript全局观
Oct 11 Javascript
artdialog的图片/标题以及关闭按钮不显示的解决方法
Jun 27 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
javaScript中的this示例学习详解及工作原理
Jan 13 Javascript
jQuery中的siblings用法实例分析
Dec 24 Javascript
前端面试知识点锦集(JavaScript篇)
Dec 28 Javascript
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
Jan 09 Javascript
vue2.0学习之axios的封装与vuex介绍
May 28 Javascript
JS实现压缩上传图片base64长度功能
Dec 03 Javascript
vue实现简单学生信息管理
May 30 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封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
PHP实现驼峰样式字符串(首字母大写)转换成下划线样式字符串的方法示例
2017/08/10 PHP
Laravel 错误提示本地化的实现
2019/10/22 PHP
PHP实现递归的三种方法
2020/07/04 PHP
JScript中的undefined和&quot;undefined&quot;的区别
2007/03/08 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
jQuery获取标签文本内容和html内容的方法
2015/03/27 Javascript
Jquery实现动态切换图片的方法
2015/05/18 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
理解javascript中的严格模式
2016/02/01 Javascript
深入理解AngularJs-scope的脏检查(一)
2017/06/19 Javascript
SeaJS中use函数用法实例分析
2017/10/10 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
2018/01/31 Javascript
vue-prop父组件向子组件进行传值的方法
2018/03/01 Javascript
webpack打包多页面的方法
2018/11/30 Javascript
重学JS 系列:聊聊继承(推荐)
2019/04/11 Javascript
php使用递归与迭代实现快速排序示例
2014/01/23 Python
python统计一个文本中重复行数的方法
2014/11/19 Python
在Python中使用itertools模块中的组合函数的教程
2015/04/13 Python
Python实现登录人人网并抓取新鲜事的方法
2015/05/11 Python
Python中的推导式使用详解
2015/06/03 Python
在Python的Django框架中生成CSV文件的方法
2015/07/22 Python
轻松掌握python设计模式之访问者模式
2016/11/18 Python
python制作mysql数据迁移脚本
2019/01/01 Python
numpy中生成随机数的几种常用函数(小结)
2020/08/18 Python
英国女性时尚鞋类的潮流制造者:Koi Footwear
2018/10/19 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
2014年元旦联欢会活动策划方案
2014/02/16 职场文书
小学数学教研活动总结
2014/07/01 职场文书
暑期学习心得体会
2014/09/02 职场文书
学校党的群众路线教育实践活动总结材料
2014/10/30 职场文书
靠谱准确的求职信
2019/04/02 职场文书
golang 实现并发求和
2021/05/08 Golang
golang内置函数len的小技巧
2021/07/25 Golang