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 相关文章推荐
无阻塞加载脚本分析[全]
Jan 20 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
Aug 23 Javascript
javascript date格式化示例
Sep 25 Javascript
JS 删除字符串最后一个字符的实现代码
Feb 20 Javascript
js获取日期:昨天今天和明天、后天
Jun 11 Javascript
浅析node连接数据库(express+mysql)
Nov 30 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
基于JSON数据格式详解
Aug 31 Javascript
使用Vue.js开发微信小程序开源框架mpvue解析
Mar 20 Javascript
解决vue 单文件组件中样式加载问题
Apr 24 Javascript
分享一款超好用的JavaScript 打包压缩工具
Apr 26 Javascript
解决nuxt页面中mounted、created、watch执行两遍的问题
Nov 05 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
全国FM电台频率大全 - 29 青海省
2020/03/11 无线电
关于php操作mysql执行数据库查询的一些常用操作汇总
2013/06/24 PHP
PDO的安全处理与事物处理方法
2016/10/31 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
jQuery 行级解析读取XML文件(附源码)
2009/10/12 Javascript
基于jquery的一个简单的脚本验证插件
2010/04/05 Javascript
基于jQuery的为attr添加id title等效果的实现代码
2011/04/20 Javascript
读jQuery之四(优雅的迭代)
2011/06/20 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
node.js中的events.emitter.listeners方法使用说明
2014/12/10 Javascript
flash+jQuery实现可关闭及重复播放的压顶广告
2015/04/15 Javascript
jquery使整个div区域可以点击的方法
2015/06/24 Javascript
JavaScript实现节点的删除与序号重建实例
2015/08/05 Javascript
基于RequireJS和JQuery的模块化编程日常问题解析
2016/04/14 Javascript
js实现图片缓慢放大缩小效果
2016/08/02 Javascript
利用js获取下拉框中所选的值
2016/12/01 Javascript
nodejs的压缩文件模块archiver用法示例
2017/01/18 NodeJs
js实现移动端导航点击自动滑动效果
2017/07/18 Javascript
React路由管理之React Router总结
2018/05/10 Javascript
JavaScript实现的3D旋转魔方动画效果实例代码
2019/07/31 Javascript
JS sort方法基于数组对象属性值排序
2020/07/10 Javascript
uniapp微信小程序:key失效的解决方法
2021/01/20 Javascript
Python开发编码规范
2006/09/08 Python
初步认识Python中的列表与位运算符
2015/10/12 Python
Pycharm导入Python包,模块的图文教程
2018/06/13 Python
Python爬虫抓取技术的一些经验
2019/07/12 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
python实现电子词典
2020/03/03 Python
python多进程使用函数封装实例
2020/05/02 Python
Pat McGrath Labs官网:世界上最有影响力的化妆师推出的彩妆品牌
2018/01/07 全球购物
Fanatics官网:运动服装、球衣、运动装备
2020/10/12 全球购物
2014年机关植树节活动方案
2014/02/27 职场文书
少先队学雷锋活动月总结
2014/03/09 职场文书
小学六一主持词开场白
2015/05/28 职场文书
圆明园观后感
2015/06/03 职场文书
Python+OpenCV实现在图像上绘制矩形
2022/03/21 Python