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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
纯js实现背景图片切换效果代码
Nov 14 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
Nov 09 Javascript
jquery实现简单的banner轮播效果【实例】
Mar 30 Javascript
jQuery基础知识点总结(必看)
May 31 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
浅谈Node模块系统及其模式
Nov 17 Javascript
vue超时计算的组件实例代码
Jul 09 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
vue实现抖音时间转盘
Sep 08 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
Jul 21 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
Nov 19 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
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
Zend引擎的发展 [15]
2006/10/09 PHP
用php将任何格式视频转为flv的代码
2009/09/03 PHP
PHP和JavaScrip分别获取关联数组的键值示例代码
2013/09/16 PHP
ThinkPHP分页实例
2014/10/15 PHP
smarty的section嵌套循环用法示例
2016/05/28 PHP
jquery不支持toggle()高(新)版本的问题解决
2016/09/24 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
PHP实现网站应用微信登录功能详解
2019/04/11 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
2013/01/30 Javascript
js判断数据类型如判断是否为数组是否为字符串等等
2014/01/15 Javascript
JavaScript中的数值范围介绍
2014/12/29 Javascript
jQuery stop()用法实例详解
2016/07/28 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
JS实现的点击表头排序功能示例
2017/03/27 Javascript
nodejs构建本地web测试服务器 如何解决访问静态资源问题
2017/07/14 NodeJs
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
关于ES6箭头函数中的this问题
2018/02/27 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
[42:27]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第三局
2016/03/05 DOTA
浅谈pyhton学习中出现的各种问题(新手必看)
2017/05/17 Python
python3 dict ndarray 存成json,并保留原数据精度的实例
2019/12/06 Python
Python如何通过百度翻译API实现翻译功能
2020/04/02 Python
Ubuntu16安装Python3.9的实现步骤
2020/12/15 Python
python推导式的使用方法实例
2021/02/28 Python
phpquery中文手册
2021/03/18 PHP
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
SmartBuyGlasses德国:购买太阳镜和眼镜
2019/08/20 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
Ibatis如何使用动态表名
2015/07/12 面试题
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
简历中自我评价范文3则
2013/12/14 职场文书
新员工试用期工作总结2015
2015/05/28 职场文书