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 相关文章推荐
初学JavaScript_03(ExtJs Grid的简单使用)
Oct 02 Javascript
一个cssQuery对象 javascript脚本实现代码
Jul 21 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
AngularJS中如何使用echart插件示例详解
Oct 26 Javascript
JavaScript 数据类型详解
Mar 13 Javascript
Node.js 使用命令行工具检查更新
Jun 08 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
微信小程序自定义多选事件的实现代码
May 17 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
js面向对象之实现淘宝放大镜
Jan 15 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
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
5种PHP创建数组的实例代码分享
2014/01/17 PHP
php网页病毒清除类
2014/12/08 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
浅谈php://filter的妙用
2019/03/05 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
精通JavaScript 纠正 cleanWhitespace函数
2010/03/11 Javascript
jQuery 学习第五课 Ajax 使用说明
2010/05/17 Javascript
jQuery+.net实现浏览更多内容(改编php版本)
2013/03/28 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
2016/10/28 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
Vue2.0中三种常用传值方式(父传子、子传父、非父子组件传值)
2018/08/16 Javascript
详解Eslint 配置及规则说明
2018/09/10 Javascript
IE9 elementUI文件上传的问题解决
2018/10/17 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
2018/11/06 Javascript
vue2 拖动排序 vuedraggable组件的实现
2019/08/08 Javascript
Vue图片浏览组件v-viewer用法分析【支持旋转、缩放、翻转等操作】
2019/11/04 Javascript
uni-app微信小程序登录授权的实现
2020/05/22 Javascript
[01:04:39]OG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
Django中处理出错页面的方法
2015/07/15 Python
python基于pygame实现响应游戏中事件的方法(附源码)
2015/11/11 Python
centos6.7安装python2.7.11的具体方法
2017/01/16 Python
解决python升级引起的pip执行错误的问题
2018/06/12 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
CSS 3.0文字悬停跳动特效代码
2020/10/26 HTML / CSS
纽约手袋品牌:KARA
2018/03/18 全球购物
行政经理的岗位职责
2013/11/23 职场文书
酒后驾驶检讨书
2014/01/27 职场文书
党员领导干部廉洁从政承诺书
2014/03/27 职场文书
经济担保书范文
2014/04/02 职场文书
承诺书模板
2014/08/30 职场文书
2015年语文教研组工作总结
2015/05/23 职场文书
幼儿园托班开学寄语(2015秋季)
2015/05/27 职场文书
幼儿园教师教育随笔
2015/08/14 职场文书