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 相关文章推荐
2007/12/23更新创意无限,简单实用(javascript log)
Dec 24 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
深入理解jQuery中live与bind方法的区别
Dec 18 Javascript
高性能JavaScript循环语句和条件语句
Jan 20 Javascript
浅谈jQuery 中的事件冒泡和阻止默认行为
May 28 Javascript
前端开发之CSS原理详解
Mar 11 Javascript
详解vue组件中使用路由方法
Feb 12 Javascript
原生js实现的金山打字小游戏(实例代码详解)
Mar 16 Javascript
详解JS函数防抖
Jun 05 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php 文章调用类代码
2011/08/11 PHP
PHP文章按日期(月日)SQL归档语句
2012/11/29 PHP
微信开发之php表单微信中自动提交两次问题解决办法
2017/01/08 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
yii框架结合charjs实现统计30天数据的方法
2020/04/04 PHP
php回调函数处理数组操作示例
2020/04/13 PHP
跨浏览器的 mouseenter mouseleave 以及 compareDocumentPosition的使用说明
2010/05/04 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
jquery操作select方法汇总
2015/02/05 Javascript
localResizeIMG先压缩后使用ajax无刷新上传(移动端)
2015/08/11 Javascript
jQuery检测滚动条是否到达底部
2015/12/15 Javascript
JavaScript实现复制内容到粘贴板代码
2016/03/31 Javascript
改变checkbox默认选中状态及取值的实现代码
2016/05/26 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
jQuery.Callbacks()回调函数队列用法详解
2016/06/14 Javascript
jquery获取transform里的值实现方法
2017/12/12 jQuery
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
原生JS实现$.param() 函数的方法
2018/08/10 Javascript
JavaScript使用ul中li标签实现删除效果
2019/04/15 Javascript
解决微信小程序云开发中获取数据库的内容为空的方法
2019/05/15 Javascript
vue实现图片上传到后台
2020/06/29 Javascript
javascript实现支付宝滑块验证码效果
2020/07/24 Javascript
[44:47]Ti4 循环赛第三日 iG vs NaVi
2014/07/12 DOTA
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python调用命令行进度条的方法
2015/05/05 Python
详谈python中冒号与逗号的区别
2018/04/18 Python
django数据库自动重连的方法实例
2019/07/21 Python
tensorflow实现打印ckpt模型保存下的变量名称及变量值
2020/01/04 Python
python 写函数在一定条件下需要调用自身时的写法说明
2020/06/01 Python
澳大利亚电子产品购物网站:Dick Smith
2017/02/02 全球购物
基层干部2014全国两会学习心得体会
2014/03/10 职场文书
大学生工作自荐书
2014/06/16 职场文书
三八节活动简报
2015/07/20 职场文书
python中if和elif的区别介绍
2021/11/07 Python
CentOS7设置ssh服务以及端口修改方式
2022/12/24 Servers