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 相关文章推荐
超级简单的图片防盗(HTML),好用
Apr 08 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
javascript操作referer详细解析
Mar 10 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
javascript HTML+CSS实现经典橙色导航菜单
Feb 16 Javascript
Google 地图API资料整理及详细介绍
Aug 06 Javascript
vue.js从安装到搭建过程详解
Mar 17 Javascript
详解项目升级到vue-cli3的正确姿势
Jan 28 Javascript
Vue实现类似Spring官网图片滑动效果方法
Mar 01 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
Mar 11 Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 Javascript
为react组件库添加typescript类型提示的方法
Jun 15 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实现图片自动清理的方法
2015/07/08 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
Javasipt:操作radio标签详解
2013/12/30 Javascript
JavaScript中的setMilliseconds()方法使用详解
2015/06/11 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
2016/03/05 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
2018/02/10 Javascript
原生JS实现前端本地文件上传
2018/09/08 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
vue里的data要用return返回的原因浅析
2019/05/28 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
Vue如何将页面导出成PDF文件
2020/08/17 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
python模块smtplib学习
2018/05/22 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python字典遍历操作实例小结
2019/03/05 Python
python程序控制NAO机器人行走
2019/04/29 Python
Django models.py应用实现过程详解
2019/07/29 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
python cv2读取rtsp实时码流按时生成连续视频文件方式
2019/12/25 Python
基于OpenCV的路面质量检测的实现
2020/11/04 Python
python 数据类型强制转换的总结
2021/01/25 Python
Ted Baker英国官网:男士和女士服装及配件
2017/03/13 全球购物
Rhone官方网站:男士运动服装、健身服装和高级运动服
2019/05/01 全球购物
利物浦足球俱乐部官方商店(美国):Liverpool FC US
2019/10/09 全球购物
美国在线医疗分销商:MedEx Supply
2020/02/04 全球购物
超市优秀员工事迹材料
2014/05/01 职场文书
审计班子对照检查材料
2014/08/27 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2016年“5.12”护士节致辞
2015/07/31 职场文书
2020优秀员工演讲稿(三篇)
2019/10/17 职场文书
Python基础之tkinter图形化界面学习
2021/04/29 Python
 Python 中 logging 模块使用详情
2022/03/03 Python
vue如何清除浏览器历史栈
2022/05/25 Vue.js