深入学习jQuery Validate表单验证(二)


Posted in Javascript onJanuary 18, 2016

本文实例介绍了jQuery Validate表单验证,分享给大家供大家参考,具体内容如下

一、添加一个另外一个插件jquery.validate.messages_cn.js。
改变默认提示方式。

/*
 * Translated default messages for the jQuery validation plugin.
 * Language: CN
 * Author: Fayland Lam <fayland at gmail dot com>
 */
jQuery.extend(jQuery.validator.messages, {
    required: "必选字段",
    remote: "请修正该字段",
    email: "请输入正确格式的电子邮件",
    url: "请输入合法的网址",
    date: "请输入合法的日期",
    dateISO: "请输入合法的日期 (ISO).",
    number: "请输入合法的数字",
    digits: "只能输入整数",
    creditcard: "请输入合法的信用卡号",
    equalTo: "请再次输入相同的值",
    accept: "请输入拥有合法后缀名的字符串",
    maxlength: jQuery.format("请输入一个长度最多是 {0} 的字符串"),
    minlength: jQuery.format("请输入一个长度最少是 {0} 的字符串"),
    rangelength: jQuery.format("请输入一个长度介于 {0} 和 {1} 之间的字符串"),
    range: jQuery.format("请输入一个介于 {0} 和 {1} 之间的值"),
    max: jQuery.format("请输入一个最大为 {0} 的值"),
    min: jQuery.format("请输入一个最小为 {0} 的值")
});

二、jQuery表单验证插件----通过name属性来关联字段来验证,将校验规则写到 js 代码中。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>jQuery表单验证插件----通过name属性来关联字段来验证</title>
 <script src="../../scripts/jquery-1.3.1.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.js" type="text/javascript"></script>
 <script src="lib/jquery.validate.messages_cn.js" type="text/javascript"></script>
 
<style type="text/css">
* { font-family: Verdana; font-size: 96%; }
label { width: 10em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
p { clear: both; }
.submit { margin-left: 12em; }
em { font-weight: bold; padding-right: 1em; vertical-align: top; }
</style>

 <script type="text/javascript">
 $(document).ready(function(){

  $("#commentForm").validate({
    rules: {
      username: {
        required: true,
        minlength: 2
      },
      email: {
        required: true,
        email: true
      },
      url:"url",
      comment: "required"
    }
   });

 });
 </script>
 
</head>
<body>
 

 <form class="cmxform" id="commentForm" method="get" action="">
 <fieldset>
  <legend>jQuery表单验证插件----通过name属性来关联字段来验证</legend>
  <p>
   <label for="cusername">姓名</label>
   <em>*</em><input id="cusername" name="username" size="25" />
  </p>
  <p>
   <label for="cemail">电子邮件</label>
   <em>*</em><input id="cemail" name="email" size="25" />
  </p>
  <p>
   <label for="curl">网址</label>
   <em> </em><input id="curl" name="url" size="25" value="" />
  </p>
  <p>
   <label for="ccomment">你的评论</label>
   <em>*</em><textarea id="ccomment" name="comment" cols="22"></textarea>
  </p>
  <p>
   <input class="submit" type="submit" value="提交"/>
  </p>
 </fieldset>
 </form>
 
</body>
</html>

以上就是本文的全部内容,希望对大家学习jQuery Validate表单验证有所帮助。

Javascript 相关文章推荐
jQuery中 attr() 方法使用小结
May 03 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
微信小程序开发之map地图实现教程
Jun 08 Javascript
vue元素实现动画过渡效果
Jul 01 Javascript
解决v-for中使用v-if或者v-bind:class失效的问题
Sep 25 Javascript
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
Vue2 添加数据可视化支持的方法步骤
Jan 02 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
微信小程序自定义弹出模态框禁止底部滚动功能
Mar 09 Javascript
vue-router之解决addRoutes使用遇到的坑
Jul 19 Javascript
js面试题之异步问题的深入理解
Sep 20 Javascript
深入学习jQuery Validate表单验证
Jan 18 #Javascript
jQuery Validate表单验证插件 添加class属性形式的校验
Jan 18 #Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 #Javascript
理解JavaScript中Promise的使用
Jan 18 #Javascript
你不知道的高性能JAVASCRIPT
Jan 18 #Javascript
Ionic实现仿通讯录点击滑动及$ionicscrolldelegate使用分析
Jan 18 #Javascript
jQuery实现多级联动下拉列表查询框
Jan 18 #Javascript
You might like
初探PHP5
2006/10/09 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
php实现将wav文件转换成图像文件并在页面中显示的方法
2015/04/21 PHP
ThinkPHP里用U方法调用js文件实例
2015/06/18 PHP
php简单判断两个字符串是否相等的方法
2015/07/13 PHP
Yii框架引用插件和ckeditor中body与P标签去除的方法
2017/01/19 PHP
[原创]php token使用与验证示例【测试可用】
2017/08/30 PHP
Jquery ui css framework
2010/06/28 Javascript
在多个页面使用同一个HTML片段的代码
2011/03/04 Javascript
如何在一个页面显示多个百度地图
2013/04/07 Javascript
jQuery实现点击按钮文字变成input框点击保存变成文字
2016/05/09 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
JavaScript数组去重的几种方法效率测试
2016/10/23 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
详解vue-cli快速构建项目以及引入bootstrap、jq
2017/05/26 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
vue中$refs的用法及作用详解
2018/04/24 Javascript
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
解决layui使用layui-icon出现默认图标的问题
2019/09/11 Javascript
JS替换字符串中指定位置的字符(多种方法)
2020/05/28 Javascript
微信小程序实现canvas分享朋友圈海报
2020/06/21 Javascript
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Python中super函数用法实例分析
2019/03/18 Python
Django之编辑时根据条件跳转回原页面的方法
2019/08/21 Python
Python3读写Excel文件(使用xlrd,xlsxwriter,openpyxl3种方式读写实例与优劣)
2020/02/13 Python
Python logging日志库空间不足问题解决
2020/09/14 Python
Flesh Beauty官网:露华浓集团旗下彩妆品牌
2021/02/15 全球购物
大学生实习自我鉴定
2013/12/11 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
煤矿安全演讲稿
2014/05/09 职场文书
学生退学证明
2015/06/23 职场文书
投资入股协议书
2016/03/22 职场文书
导游词之贵州织金洞
2019/10/12 职场文书
使用CSS3实现按钮悬停闪烁动态特效代码
2021/08/30 HTML / CSS