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动态改变img的src属性图片不显示的解决方法
Oct 20 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
javascript初学者常用技巧
Sep 02 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
js表头排序实现方法
Jan 16 Javascript
PHP结合jQuery实现的评论顶、踩功能
Jul 22 Javascript
jQuery实现简单的图片查看器
Sep 11 Javascript
微信小程序 Button 组件详解及简单实例
Jan 10 Javascript
Web前端框架Angular4.0.0 正式版发布
Mar 28 Javascript
angularjs中ng-bind-html的用法总结
May 23 Javascript
Webpack打包字体font-awesome的方法示例
Apr 26 Javascript
通过扫小程序码实现网站登陆功能
Aug 22 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
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
PHP批量生成静态HTML的简单原理和方法
2014/04/20 PHP
php实现mysql数据库连接操作及用户管理
2015/11/08 PHP
PHP函数超时处理方法
2016/02/14 PHP
验证token、回复图文\文本、推送消息的实用微信类php代码
2016/06/28 PHP
javascript中的undefined 与 null 的区别  补充篇
2010/03/17 Javascript
jQuery中调用WebService方法小结
2011/03/28 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
浅析jQuery(function(){})与(function(){})(jQuery)之间的区别
2014/01/09 Javascript
JQuery操作元素的css样式
2015/03/09 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/10/05 Javascript
浅谈Vue SPA 首屏加载优化实践
2017/12/15 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
JS动画实现回调地狱promise的实例代码详解
2018/11/08 Javascript
通过javascript实现扫雷游戏代码实例
2020/02/09 Javascript
vue框架中props的typescript用法详解
2020/02/17 Javascript
Element Cascader 级联选择器的使用示例
2020/07/27 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
[05:34]2014DOTA2国际邀请赛中国区预选赛精彩TOPPLAY第二弹
2014/06/25 DOTA
python中as用法实例分析
2015/04/30 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
详解Python中 sys.argv[]的用法简明解释
2017/12/20 Python
python读取视频流提取视频帧的两种方法
2020/10/22 Python
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
使用virtualenv创建Python环境及PyQT5环境配置的方法
2019/09/10 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
Node.js 和 Python之间该选择哪个?
2020/08/05 Python
用python写PDF转换器的实现
2020/10/29 Python
Mavi牛仔裤美国官网:土耳其著名牛仔品牌
2016/09/24 全球购物
毕业生自我鉴定
2013/12/04 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
公务员年度考核个人总结
2015/02/12 职场文书
2015年度质量工作总结报告
2015/04/27 职场文书
导游词之四川武侯祠
2019/10/21 职场文书
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python
Android Studio实现简易进制转换计算器
2022/05/20 Java/Android