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 选择器引擎sizzle浅析
Feb 06 Javascript
js中 关于undefined和null的区别介绍
Apr 16 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
dreamweaver 8实现Jquery自动提示
Dec 04 Javascript
JavaScript之数组(Array)详解
Apr 01 Javascript
ECMAScript6函数剩余参数(Rest Parameters)
Jun 12 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
Sep 06 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
JS图片等比例缩放方法完整示例
Aug 03 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
js调用网络摄像头的方法
Dec 05 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 常用类汇总 推荐收藏
2010/05/13 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
Mysql的Root密码忘记,查看或修改的解决方法(图文介绍)
2013/06/14 PHP
php读取目录及子目录下所有文件名的方法
2014/10/20 PHP
jquery 选择器部分整理
2009/10/28 Javascript
javascrip关于继承的小例子
2013/05/10 Javascript
Highcharts 非常实用的Javascript统计图demo示例
2013/07/03 Javascript
jQuery处理json数据返回数组和输出的方法
2015/03/11 Javascript
js实现页面跳转的五种方法推荐
2016/03/10 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
Ajax的概述与实现过程
2016/11/18 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
使用Bootstrap + Vue.js实现表格的动态展示、新增和删除功能
2017/11/27 Javascript
Vue中computed与methods的区别详解
2018/03/24 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
vue.js响应式原理解析与实现
2020/06/22 Javascript
vue基于element-ui的三级CheckBox复选框功能的实现代码
2018/10/15 Javascript
vue 验证码界面实现点击后标灰并设置div按钮不可点击状态
2019/10/28 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
vue点击Dashboard不同内容 跳转到同一表格的实例
2020/11/13 Javascript
Python中的元类编程入门指引
2015/04/15 Python
python编程实现随机生成多个椭圆实例代码
2018/01/03 Python
Python Requests模拟登录实现图书馆座位自动预约
2018/04/27 Python
python 使用socket传输图片视频等文件的实现方式
2019/08/07 Python
详解numpy矩阵的创建与数据类型
2019/10/18 Python
python打印异常信息的两种实现方式
2019/12/24 Python
解决python ThreadPoolExecutor 线程池中的异常捕获问题
2020/04/08 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
python工具——Mimesis的简单使用教程
2021/01/16 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
LightInTheBox西班牙站点:全球商品在线采购
2016/09/22 全球购物
介绍一些UNIX常用简单命令
2014/11/11 面试题
论文评语大全
2014/04/29 职场文书
2016廉洁教育心得体会
2016/01/20 职场文书
pytorch 中nn.Dropout的使用说明
2021/05/20 Python