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 相关文章推荐
jquery 弹出登录窗口实现代码
Dec 24 Javascript
js注意img图片的onerror事件的分析
Jan 01 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
jquery实现超简洁的TAB选项卡效果代码
Aug 28 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
针对后台列表table拖拽比较实用的jquery拖动排序
Oct 10 Javascript
js判断一个字符串是以某个字符串开头的简单实例
Dec 27 Javascript
微信小程序组件之srcoll-view的详解
Oct 19 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
vue 父组件通过v-model接收子组件的值的代码
Oct 27 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 Javascript
Javascript confirm多种使用方法解析
Sep 25 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利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
微信支付开发发货通知实例
2016/07/12 PHP
yii2 RBAC使用DbManager实现后台权限判断的方法
2016/07/23 PHP
PHP+Apache环境中如何隐藏Apache版本
2017/11/24 PHP
javascript编程起步(第三课)
2007/02/27 Javascript
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
StringTemplate遇见jQuery冲突的解决方法
2011/09/22 Javascript
innerText 使用示例
2014/01/23 Javascript
Javascript中arguments对象详解
2014/10/22 Javascript
JQuery实现带排序功能的权限选择实例
2015/05/18 Javascript
Vuex2.0+Vue2.0构建备忘录应用实践
2016/11/30 Javascript
layui中table表头样式修改方法
2018/08/15 Javascript
node+express框架中连接使用mysql(经验总结)
2018/11/10 Javascript
深入了解JavaScript代码覆盖
2019/06/13 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
Python 时间处理datetime实例
2008/09/06 Python
python 基本数据类型占用内存空间大小的实例
2018/06/12 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
python微信聊天机器人改进版(定时或触发抓取天气预报、励志语录等,向好友推送)
2019/04/25 Python
Django MEDIA的配置及用法详解
2019/07/25 Python
python3.7实现云之讯、聚合短信平台的短信发送功能
2019/09/26 Python
PyCharm2019安装教程及其使用(图文教程)
2019/09/29 Python
python下载的库包存放路径
2020/07/27 Python
css3实现动画的三种方式
2020/08/24 HTML / CSS
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
TripAdvisor台湾:全球最大旅游网站
2018/08/26 全球购物
Rentalcars.com中国:世界上最大的在线汽车租赁服务
2019/08/22 全球购物
客户代表自我评价范例
2013/09/24 职场文书
会计学自我鉴定
2014/02/06 职场文书
国培计划培训感言
2014/03/11 职场文书
项目投资合作意向书
2014/07/29 职场文书
小学国旗下的演讲稿
2014/08/28 职场文书
高中数学课堂教学反思
2016/02/18 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
Grafana可视化监控系统结合SpringBoot使用
2022/04/19 Redis
Python使用plt.boxplot()函数绘制箱图、常用方法以及含义详解
2022/08/14 Python