jquery表单验证插件validation使用方法详解


Posted in Javascript onJanuary 20, 2017

一、如何使用

引入js文件

<script src="jquery.js"></script>
<script src="jquery.validate-1.13.1.js"></script>

编写html页面,这里仅以用户名、密码为例

<body>
 <form id="demoForm">
  <fieldset>
   <legend>用户登录</legend>
   <p>
    <label for="username">用户名</label>
    <input type="text" id="username" name="username">
   </p>
   <p>
    <label for="password">密码</label>
    <input type="text" id="password" name="password">
   </p>
  </fieldset>
 </form>
</body>

编写script脚

$(document).ready(function(){
 $("#demoForm").validate({
  rules:{
   username:{
    required:true,// 是否必填
    minlength:2, // 最小长度
    maxlength:10 // 最大长度
   },
   password:{
    required:true,
    minlength:2,
    maxlength:16
   }
  }
 });
});

二、测试

jquery表单验证插件validation使用方法详解

如果大家还想深入学习,可以点击两个精彩的专题:jquery表单验证大全 JavaScript表单验证大全

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
自己的js工具_Form 封装
Aug 21 Javascript
JQuery index()方法使用代码
Jun 02 Javascript
基于jQuery中对数组进行操作的方法
Apr 16 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
Mar 02 Javascript
JavaScript提高加载和执行效率的方法
Feb 03 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
使用jquery的jsonp如何发起跨域请求及其原理详解
Aug 17 jQuery
vue2使用keep-alive缓存多层列表页的方法
Sep 21 Javascript
JavaScript多种页面刷新方法小结
Apr 04 Javascript
JS 数组和对象的深拷贝操作示例
Jun 06 Javascript
jquery表单插件form使用方法详解
Jan 20 #Javascript
AngularJs上传前预览图片的实例代码
Jan 20 #Javascript
详解JavaScript中this的指向问题
Jan 20 #Javascript
详解微信小程序入门五: wxml文件引用、模版、生命周期
Jan 20 #Javascript
浅谈JavaScript异步编程
Jan 20 #Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
Jan 20 #Javascript
小程序开发实战:实现九宫格界面的导航的代码实现
Jan 19 #Javascript
You might like
php zend 相对路径问题
2009/01/12 PHP
ajax在joomla中的原生态应用代码
2012/07/19 PHP
解析PHP对现有搜索引擎的调用
2013/06/25 PHP
摘自织梦CMS中的图片处理类
2015/08/08 PHP
php处理抢购类功能的高并发请求
2018/02/08 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
PHP检查URL包含特定字符串实例方法
2019/02/11 PHP
js 操作css实现代码
2009/06/11 Javascript
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
2011/02/23 Javascript
javascript学习笔记(五)正则表达式
2011/04/08 Javascript
读jQuery之七 判断点击了鼠标哪个键的代码
2011/06/21 Javascript
在子窗口中关闭父窗口的一句代码
2013/10/21 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
2013/10/23 Javascript
使用POST方式弹出窗口的两种方法示例介绍
2014/01/29 Javascript
前端必备神器 Snap.svg 弹动效果
2014/11/10 Javascript
js判断某个方法是否存在实例代码
2015/01/10 Javascript
jQuery仿360导航页图标拖动排序效果代码分享
2015/08/24 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
JavaScript调试之console.log调试的一个小技巧分享
2017/08/07 Javascript
Vue中建立全局引用或者全局命令的方法
2017/08/21 Javascript
简单实现jQuery弹窗效果
2017/10/30 jQuery
webstorm中vue语法的支持详解
2018/05/09 Javascript
JS使用tween.js动画库实现轮播图并且有切换功能
2018/07/17 Javascript
说说Vue.js中的functional函数化组件的使用
2019/02/12 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
[02:01]2018完美盛典-开场舞《双子星》
2018/12/16 DOTA
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
CSS3 animation ? steps 函数详解
2019/08/30 HTML / CSS
英国一家专门出售品牌鞋子的网站:Allsole
2016/08/07 全球购物
党员干部一句话承诺
2014/05/30 职场文书
浅谈Python从全局与局部变量到装饰器的相关知识
2021/06/21 Python
浅谈克隆 JavaScript
2021/11/02 Javascript
Python 多线程处理任务实例
2021/11/07 Python
Java Spring Lifecycle的使用
2022/05/06 Java/Android