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 相关文章推荐
DWZ table的原生分页浅谈
Mar 01 Javascript
JavaScript作用域链示例分享
May 27 Javascript
初步了解javascript面向对象
Nov 09 Javascript
js代码实现点击按钮出现60秒倒计时
Jan 28 Javascript
浅析AngularJS Filter用法
Dec 28 Javascript
javascript 内置对象及常见API详细介绍
Nov 01 Javascript
微信小程序 picker 组件详解及简单实例
Jan 10 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
你真的了解BOM中的history对象吗
Feb 13 Javascript
浅谈Node 调试工具入门教程
Mar 20 Javascript
Vue ​v-model相关知识总结
Jan 28 Vue.js
JavaScript canvas实现流星特效
May 20 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中截取字符串支持utf-8
2007/01/18 PHP
Yii2.0高级框架数据库增删改查的一些操作
2015/11/16 PHP
如何解决PHP获取不到SESSION信息之一般情况
2019/10/10 PHP
JS的location.href跳出框架打开新页面的方法
2014/09/04 Javascript
jquery中cookie用法实例详解(获取,存储,删除等)
2016/01/04 Javascript
vue图片加载与显示默认图片实例代码
2017/03/16 Javascript
jQuery实现的手风琴侧边菜单效果
2017/03/29 jQuery
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
不使用 JS 匿名函数理由
2017/11/17 Javascript
JavaScript中发出HTTP请求最常用的方法
2018/07/12 Javascript
微信小程序自定义音乐进度条的实例代码
2018/08/28 Javascript
JavaScript 点击触发复制功能实例详解
2018/11/02 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
VUE+Element实现增删改查的示例源码
2020/11/23 Vue.js
在Python中marshal对象序列化的相关知识
2015/07/01 Python
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
基于Django filter中用contains和icontains的区别(详解)
2017/12/12 Python
Python lxml解析HTML并用xpath获取元素的方法
2019/01/02 Python
解决django 新增加用户信息出现错误的问题
2019/07/28 Python
python实现最大优先队列
2019/08/29 Python
解决django-xadmin列表页filter关联对象搜索问题
2019/11/15 Python
Html5监听手机摇一摇事件的实现
2019/11/07 HTML / CSS
小学新学期教师寄语
2014/01/18 职场文书
销售总经理岗位职责
2014/03/15 职场文书
地下停车场租赁协议范本
2014/10/07 职场文书
2014年村计划生育工作总结
2014/11/14 职场文书
旷课检讨书
2015/01/26 职场文书
2015年领导班子工作总结
2015/05/23 职场文书
孔子观后感
2015/06/08 职场文书
纪录片信仰观后感
2015/06/08 职场文书
傲慢与偏见读书笔记
2015/06/29 职场文书
python Django框架快速入门教程(后台管理)
2021/07/21 Python
RPM包方式安装Oracle21c的方法详解
2021/08/23 Oracle
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
win11电脑关机鼠标灯还亮怎么解决? win11关机后鼠标灯还亮解决方法
2023/01/09 数码科技