• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > jquery validate.js表单验证入门实例(附源码)

jquery validate.js表单验证入门实例(附源码)

作者: 字体:[增加 减小] 来源:互联网

通过本文主要向大家介绍了jquery,validate.js,jquery,validate实例,jquery表单验证实例等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

小编上网查阅了许多关于jquery.validate的文章,大部门只是介绍它的api和用法,没有一个详细的的入门案例介绍,研究了半天还是无从下手。为此,小编自己做了一个jquery validate.js表单验证入门实例,写的不是特别好,但应该适用于初学者,分享给大家。

以下是validate.js表单验证入门实例参考源码,文章下面有源码下载地址:

<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>j2query.validate快速入门范例-代潇瑞博客</title>
 <meta name="keywords" content="" />
 <meta name="description" content="jquery.validate.js是一个强大的表单验证插件,这里将来个快速入门范例,展示它的快速易用性。" />
 <script src="jquery-1.8.0.min.js" type="text/javascript"></script>
 <script src="jquery.validate.min.js" type="text/javascript"></script>
 <style type="text/css">
 label.error{color:red;font-size:13px;}
 </style>
</head>
<body>
 <p>信息录入</p>
 <form action="" name="infos" id="infos">
 <p>用户名:<input type="text" name="username" /></p>
 <p>工作号:<input type="text" name="nums" /></p>
 <p>备 注:<input type="text" name="notes" /></p>
 <p><input type="submit" name="sub" /></p>
 </form>
 <script type="text/javascript">
 $(function(){
 $('#infos').validate({
 debug:false, //false表示验证通过后不要自动提交表单
 onkeyup:false, //表示关闭按键松开时候监听验证
 rules:{ //验证规则
 username:{
 required:true, //必填字段
 rangelength:[6,10] //长度在6-10之间
 },
 nums:{
 required:true,
 digits:true
 },
 notes:"required"
 },
 messages:{ //自定义错误信息,默认为英文,除了在这里配置以为,还可以通过配置文件进行配置
 username:{
 required:"用户名必填",
 rangelength:"用户名长度必须为6-10位"
 },
 nums:{
 required:"工作号必填",
 digits:"工作号必须为数字"
 },
 notes:"备注必填"
 },
 //验证通过可以在这里做你想做的事情
 submitHandler:function(form){
 alert("验证通过");
 }
 });
 });
 </script>
</body>
</html>

源码下载:jquery validate.js表单验证入门实例

演示地址:jquery validate.js表单验证入门实例

以上就是为大家提供的一个简单的jquery validate.js表单验证入门实例,欢迎大家共同学习,希望对大家的学习有所帮助。

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • 基于jQuery对象和DOM对象和字符串之间的转化实例
  • jquery+css实现简单的图片轮播效果
  • 使用jQuery实现鼠标点击左右按钮滑动切换
  • jQuery实现上传图片前预览效果功能
  • jQuery初级教程之网站品牌列表效果
  • 基于jquery实现多选下拉列表
  • jQuery接受后台传递的List的实例详解
  • 详解jquery选择器的原理
  • jQuery上传插件webupload使用方法
  • 关于jquery form表单序列化的注意事项详解

相关文章

  • jQuery点击按钮弹出遮罩层且内容居中特效
  • ajax异步刷新实现更新数据库
  • jQuery 移动端artEditor富文本编辑器
  • jQuery插件zTree实现删除树节点的方法示例
  • jQuery 获取/设置/删除DOM元素的属性以a元素为例
  • Jquery 跨域访问 Lightswitch OData Service的方法
  • 使用jquery制作弹出框效果
  • EasyUI中combobox默认值注意事项
  • jQuery 技巧大全(新手入门篇)
  • jQuery实现滚动切换的tab选项卡效果代码

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 概述jQuery的元素筛选
    • jQuery实现切换页面布局使用介绍
    • jQuery判断iframe中元素是否存在的方法
    • 快速学习jQuery插件 Form表单插件使用方法
    • 自写的jQuery异步加载数据添加事件
    • jquery实现可旋转可拖拽的文字效果代码
    • 谈谈jQuery之Deferred源码剖析
    • jQuery中wrapInner()方法用法实例
    • jquery 图片 上一张 下一张 链接效果(续篇)
    • jquery动画2.元素坐标动画效果(创建一个图片走廊)

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有