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 数据缓存data(name, value)详解及实现
Jan 04 Javascript
枚举的实现求得1-1000所有出现1的数字并计算出现1的个数
Sep 10 Javascript
js sort 二维数组排序的用法小结
Jan 24 Javascript
动态加载jquery库的方法
Feb 12 Javascript
jquery解析xml字符串示例分享
Mar 25 Javascript
js实现网页抽奖实例
Aug 05 Javascript
用js实现简单算法的实例代码
Sep 24 Javascript
微信小程序 新建登录页并实现tabBar隐藏
Jun 13 Javascript
es7学习教程之fetch解决异步嵌套问题的方法示例
Jul 21 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
vue使用Font Awesome的方法步骤
Feb 26 Javascript
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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中OO之静态关键字以及类常量的详解
2013/06/07 PHP
destoon找回管理员密码的方法
2014/06/21 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
CL vs ForZe BO5 第四场 2.13
2021/03/10 DOTA
Javascript 两个窗体之间传值实现代码
2009/09/25 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
2010/03/05 Javascript
jquery任意位置浮动固定层插件用法实例
2015/05/29 Javascript
jQuery bt气泡实现悬停显示及移开隐藏功能的方法
2016/07/12 Javascript
js canvas实现擦除动画
2016/07/16 Javascript
jQuery给指定的table动态添加删除行的操作方法
2016/10/12 Javascript
js仿微博动态栏功能
2017/02/22 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
NodeJS链接MySql数据库的操作方法
2017/06/27 NodeJs
JS处理一些简单计算题
2018/02/24 Javascript
如何在vue里添加好看的lottie动画
2018/08/02 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
vue中$refs, $emit, $on, $once, $off的使用详解
2019/05/26 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
nodeJs的安装与npm全局环境变量的配置详解
2020/01/06 NodeJs
[00:55]深扒TI7聊天轮盘语音出处3
2017/05/11 DOTA
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python实现某论坛自动签到功能
2019/08/20 Python
Python 使用type来定义类的实现
2019/11/19 Python
为什么黑客都用python(123个黑客必备的Python工具)
2020/01/31 Python
html5调用app分享功能示例(WebViewJavascriptBridge)
2018/03/21 HTML / CSS
ALDO美国官网:加拿大女鞋品牌
2018/12/28 全球购物
过滤器的用法
2013/10/08 面试题
简历的个人自我评价范文
2014/01/03 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
大学生军训自我鉴定
2014/02/12 职场文书
白血病捐款倡议书
2014/05/14 职场文书
教师个人培训总结
2015/02/11 职场文书
2015年学习部工作总结范文
2015/03/31 职场文书
2015年幼儿园学前班工作总结
2015/05/18 职场文书
教您:房贷工资收入证明应该怎么写?
2019/08/19 职场文书
Python多线程实用方法以及共享变量资源竞争问题
2022/04/12 Python