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 相关文章推荐
JavaScript性能陷阱小结(附实例说明)
Dec 28 Javascript
JavaScript对象和字串之间的转换实例探讨
Apr 21 Javascript
对frameset、frame、iframe的js操作示例代码
Aug 16 Javascript
将文本输入框内容加入表中的js代码
Aug 18 Javascript
关于js内存泄露的一个好例子
Dec 09 Javascript
javascript实现 百度翻译 可折叠的分享按钮列表
Mar 12 Javascript
JS实现的验证身份证及获取地区功能示例
Jan 16 Javascript
React简单介绍
May 24 Javascript
为输入框加入数字js校验代码分享
Nov 02 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
Apr 26 Javascript
SpringBoot+Vue开发之Login校验规则、实现登录和重置事件
Oct 19 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
PHP测试程序运行时间的类
2012/02/05 PHP
phpmailer在服务器上不能正常发送邮件的解决办法
2014/07/08 PHP
Symfony数据校验方法实例分析
2015/01/26 PHP
基于OpenCart 开发支付宝,财付通,微信支付参数错误问题
2015/10/01 PHP
推荐40个非常优秀的jQuery插件和教程【系列三】
2011/11/09 Javascript
jquery cookie实现的简单换肤功能适合小网站
2013/08/25 Javascript
jQuery实现动态文字搜索功能
2017/01/05 Javascript
bootstrap Table插件使用demo
2017/08/07 Javascript
Angular4实现鼠标悬停3d倾斜效果
2017/10/25 Javascript
React如何解决fetch跨域请求时session失效问题
2018/11/02 Javascript
细说webpack6 Babel的使用详解
2019/09/26 Javascript
微信小程序自定义navigationBar顶部导航栏适配所有机型(附完整案例)
2020/04/26 Javascript
js+css3实现炫酷时钟
2020/08/18 Javascript
[01:14:10]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Orenda
2014/05/22 DOTA
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
Python基于pygame实现的font游戏字体(附源码)
2015/11/11 Python
Python获取二维数组的行列数的2种方法
2020/02/11 Python
TensorFlow的reshape操作 tf.reshape的实现
2020/04/19 Python
Fashion Eyewear美国:英国线上设计师眼镜和太阳镜的零售商
2016/08/15 全球购物
国际象棋商店:The Chess Store
2018/07/09 全球购物
英国领先的独立酒精饮料零售商:DrinkSupermarket
2021/01/13 全球购物
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
中间件分为哪几类
2012/03/14 面试题
家佳咖啡店创业计划书
2013/12/27 职场文书
廉政教育心得体会
2014/01/01 职场文书
闭幕式主持词
2014/04/02 职场文书
优秀大学生求职自荐信范文
2014/04/19 职场文书
奥巴马开学演讲稿
2014/05/15 职场文书
行政求职信
2014/07/04 职场文书
小学清明节活动总结
2014/07/04 职场文书
停车场管理协议书范本
2014/10/08 职场文书
正风肃纪剖析材料范文
2014/10/10 职场文书
付款承诺函范文
2015/01/21 职场文书
城管年度个人总结
2015/02/28 职场文书
postgresql中如何执行sql文件
2023/05/08 PostgreSQL