jQuery Validate 验证,校验规则写在控件中的具体实例


Posted in Javascript onFebruary 27, 2014

将校验规则写到控件中

<script src="../js/jquery.js" type="text/javascript"></script>
<script src="../js/jquery.validate.js" type="text/javascript"></script>
<script src="./js/jquery.metadata.js" type="text/javascript"></script>
$().ready(function() {
 $("#signupForm").validate();
});
<form id="signupForm" method="get" action="">
    <p>
        <label for="firstname">Firstname</label>
        <input id="firstname" name="firstname" class="required" />
    </p>
 <p>
  <label for="email">E-Mail</label>
  <input id="email" name="email" class="required email" />
 </p>
 <p>
  <label for="password">Password</label>
  <input id="password" name="password" type="password" class="{required:true,minlength:5}" />
 </p>
 <p>
  <label for="confirm_password">确认密码</label>
  <input id="confirm_password" name="confirm_password" type="password" class="{required:true,minlength:5,equalTo:'#password'}" />
 </p>
    <p>
        <input class="submit" type="submit" value="Submit"/>
    </p>
</form>

Tips:
使用class="{}"的方式,必须引入包:jquery.metadata.js

可以使用如下的方法,修改提示内容:
class="{required:true,minlength:5,messages:{required:'请输入内容'}}"

在使用equalTo关键字时,后面的内容必须加上引号,如下代码:
class="{required:true,minlength:5,equalTo:'#password'}"

Javascript 相关文章推荐
在线游戏大家来找茬II
Sep 30 Javascript
Javascript实现视频轮播在pc端与移动端均可
Sep 29 Javascript
Node.js和PHP根据ip获取地理位置的方法
Mar 14 Javascript
微信小程序 表单Form实例详解(附源码)
Dec 22 Javascript
使用openSpeDiv方法实现Ecshop登录弹窗框效果
Mar 13 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
Apr 20 Javascript
微信小程序实现收藏与取消收藏切换图片功能
Aug 03 Javascript
详解Vue SSR( Vue2 + Koa2 + Webpack4)配置指南
Nov 13 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 Javascript
js实现开关灯效果
Mar 30 Javascript
vue项目中播放rtmp视频文件流的方法
Sep 17 Javascript
jquery退出each循环的写法
Feb 26 #Javascript
jQuery中的val()示例应用
Feb 26 #Javascript
jquery live()调用不存在的解决方法
Feb 26 #Javascript
js获得参数的getParameter使用示例
Feb 26 #Javascript
父节点获取子节点的字符串示例代码
Feb 26 #Javascript
简单选项卡 js和jquery制作方法分享
Feb 26 #Javascript
display和visibility的区别示例介绍
Feb 26 #Javascript
You might like
为php4加入动态flash文件的生成的支持
2006/10/09 PHP
PHP读MYSQL中文乱码的解决方法
2006/12/17 PHP
PHP小教程之实现双向链表
2014/06/12 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP实现二叉树深度优先遍历(前序、中序、后序)和广度优先遍历(层次)实例详解
2018/04/20 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
PHP设计模式概论【概念、分类、原则等】
2020/05/01 PHP
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
Jquery弹出窗口插件 LeanModal的使用方法
2012/03/10 Javascript
JavaScript 参数中的数组展开 [译]
2012/09/21 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
从jquery的过滤器.filter()方法想到的
2013/09/29 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
浅谈JavaScript中变量和函数声明的提升
2016/08/09 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
2016/11/09 Javascript
jQuery+Ajax请求本地数据加载商品列表页并跳转详情页的实现方法
2017/07/12 jQuery
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
微信小程序使用setData修改数组中单个对象的方法分析
2018/12/30 Javascript
详解javascript 变量提升(Hoisting)
2019/03/12 Javascript
详解可以用在VS Code中的正则表达式小技巧
2019/05/14 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
2019/09/03 Javascript
[07:48]DOTA2上海特级锦标赛主赛事首日RECAP
2016/03/04 DOTA
python操作gmail实例
2015/01/14 Python
举例讲解Python中装饰器的用法
2015/04/27 Python
在NumPy中创建空数组/矩阵的方法
2018/06/15 Python
python读取文本中的坐标方法
2018/10/14 Python
PyQT5 QTableView显示绑定数据的实例详解
2019/06/25 Python
Python使用scrapy爬取阳光热线问政平台过程解析
2019/08/14 Python
python Jupyter运行时间实例过程解析
2019/12/13 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
python Autopep8实现按PEP8风格自动排版Python代码
2021/03/02 Python
Html5无刷新修改browser Url的方法
2014/01/15 HTML / CSS
日本最大的购物网站乐天市场国际版:Rakuten Global Market(支持中文)
2020/02/03 全球购物
小学语文继续教育研修日志
2015/11/13 职场文书
Vue全家桶入门基础教程
2021/05/14 Vue.js
利用Python实现翻译HTML中的文本字符串
2022/06/21 Python