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 相关文章推荐
新手入门常用代码集锦
Jan 11 Javascript
读jQuery之五(取DOM元素)
Jun 20 Javascript
JavaScript中的call方法和apply方法使用对比
Aug 12 Javascript
laypage分页控件使用实例详解
May 19 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
详解从Node.js的child_process模块来学习父子进程之间的通信
Mar 27 Javascript
elemetUi 组件--el-upload实现上传Excel文件的实例
Oct 27 Javascript
微信小程序图片选择区域裁剪实现方法
Dec 02 Javascript
vue左侧菜单,树形图递归实现代码
Aug 24 Javascript
angular实现input输入监听的示例
Aug 31 Javascript
你知道JavaScript Symbol类型怎么用吗
Jan 08 Javascript
Vue实现省市区三级联动
Dec 27 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
《Re:从零开始的异世界生活》剧情体验,手游新作定名
2020/04/09 日漫
php+AJAX传送中文会导致乱码的问题的解决方法
2008/09/08 PHP
yii的CURD操作实例详解
2014/12/04 PHP
WordPress中创建用户角色的相关PHP函数使用详解
2015/12/25 PHP
php 判断字符串编码是utf-8 或gb2312实例
2016/11/01 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
javascript对select标签的控制(option选项/select)
2013/01/31 Javascript
JS阻止用户多次提交示例代码
2014/03/26 Javascript
使用jquery.validate自定义方法实现&quot;手机号码或者固话至少填写一个&quot;的逻辑验证
2014/09/01 Javascript
javascript实现左右控制无缝滚动
2014/12/31 Javascript
Three.js基础部分学习
2017/01/08 Javascript
JS实现禁止用户使用Ctrl+鼠标滚轮缩放网页的方法
2017/04/28 Javascript
AngularJS获取json数据的方法详解
2017/05/27 Javascript
jquery对table做排序操作的实例演示
2017/08/10 jQuery
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
小程序如何自主实现拦截器的示例代码
2019/11/04 Javascript
Vue 自适应高度表格的实现方法
2020/05/13 Javascript
Python with的用法
2014/08/22 Python
Python中的自省(反射)详解
2015/06/02 Python
浅析Python中return和finally共同挖的坑
2017/08/18 Python
python中requests和https使用简单示例
2018/01/18 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
python按顺序重命名文件并分类转移到各个文件夹中的实现代码
2020/07/21 Python
python中的unittest框架实例详解
2021/02/05 Python
纯HTML5+CSS3制作生日蛋糕代码
2016/11/16 HTML / CSS
美国室内盆栽植物购买网站:Plants.com
2020/04/24 全球购物
个人自我鉴定范文
2013/10/04 职场文书
见习期自我鉴定范文
2014/03/19 职场文书
学校与家长安全责任书
2014/07/23 职场文书
房屋授权委托书范本
2014/10/07 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
Django利用AJAX技术实现博文实时搜索
2021/05/06 Python
python3 hdf5文件 遍历代码
2021/05/19 Python