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增加时编辑jqGrid(实例代码)
Nov 08 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
Node.js Streams文件读写操作详解
Jul 04 Javascript
利用Js的console对象,在控制台打印调式信息测试Js的实现
Nov 26 Javascript
JavaScript中的 attribute 和 jQuery中的 attr 方法浅析
Jan 04 Javascript
微信小程序商城项目之购物数量加减(3)
Apr 17 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
浅谈webpack 自动刷新与解析
Apr 09 Javascript
pageGroup.js实现分页功能
Jul 27 Javascript
Vue v-model组件封装(类似弹窗组件)
Jan 08 Javascript
详细分析Node.js 多进程
Jun 22 Javascript
vue特效之翻牌动画
Apr 20 Vue.js
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
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
CI框架整合smarty步骤详解
2016/05/19 PHP
php和asp语法上的区别总结
2019/05/12 PHP
用javascript父窗口控制只弹出一个子窗口
2007/04/10 Javascript
基于Jquery的$.cookie()实现跨越页面tabs导航实现代码
2011/03/03 Javascript
javascript 系统文件夹文件操作及参数介绍
2013/01/08 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
学习javascript面向对象 理解javascript对象
2016/01/04 Javascript
基于javascript html5实现3D翻书特效
2016/03/14 Javascript
深入理解JavaScript中的浮点数
2016/05/18 Javascript
值得分享的轻量级Bootstrap Table表格插件
2016/05/30 Javascript
利用js的闭包原理做对象封装及调用方法
2017/04/07 Javascript
angular学习之从零搭建一个angular4.0项目
2017/07/10 Javascript
谈谈对vue响应式数据更新的误解
2017/08/01 Javascript
Vue中消息横向滚动时setInterval清不掉的问题及解决方法
2019/08/23 Javascript
微信小程序分包加载代码实现方法详解
2019/09/23 Javascript
[01:24]DOTA2上海特锦赛OG战队抵达 专车接机入驻总统套房
2016/02/23 DOTA
[01:33:30]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第二场 2月5日
2021/03/11 DOTA
浅谈python抛出异常、自定义异常, 传递异常
2016/06/20 Python
Python计时相关操作详解【time,datetime】
2017/05/26 Python
Python调用微信公众平台接口操作示例
2017/07/08 Python
使用Python实现简单的服务器功能
2017/08/25 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
Python调用C++,通过Pybind11制作Python接口
2018/10/16 Python
python仿抖音表白神器
2019/04/08 Python
python实现文法左递归的消除方法
2020/05/22 Python
python3实现名片管理系统(控制台版)
2020/11/29 Python
意大利大型购物中心:Oliviero.it
2017/10/19 全球购物
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
Linux文件系统类型
2012/02/15 面试题
诚信考试承诺书
2014/03/27 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
行政文员实习自我鉴定范文
2014/09/14 职场文书
卖车协议书范例
2014/09/16 职场文书
Java比较两个对象中全部属性值是否相等的方法
2021/08/07 Java/Android