深入学习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 相关文章推荐
javascript window对象属性整理
Oct 24 Javascript
jQuery源码分析-04 选择器-Sizzle-工作原理分析
Nov 14 Javascript
jQuery控制图片的hover效果(smartRollover.js)
Mar 18 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
javascript中通过arguments参数伪装方法重载
Oct 08 Javascript
setTimeout内不支持jquery的选择器的解决方案
Apr 28 Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 Javascript
jQuery实现图片上传预览效果功能完整实例【测试可用】
May 28 jQuery
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
Dec 30 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
Aug 18 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
PHP 变量定义和变量替换的方法
2009/07/30 PHP
PHP 写文本日志实现代码
2010/05/18 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
ZF框架实现发送邮件的方法
2015/12/03 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
php 一维数组的循环遍历实现代码
2017/04/10 PHP
ThinkPHP3.2.3框架实现执行原生SQL语句的方法示例
2019/04/03 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
PHP+jQuery+Ajax+Mysql如何实现发表心情功能
2015/08/06 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
JavaScript学习笔记之数组求和方法
2016/03/23 Javascript
Three.js快速入门教程
2016/09/09 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
详解vue2.0模拟后台json数据
2019/05/16 Javascript
vue项目实现图片上传功能
2019/12/23 Javascript
封装Vue Element的table表格组件的示例详解
2020/08/19 Javascript
python实现划词翻译
2020/04/23 Python
Python全局变量用法实例分析
2016/07/19 Python
python利用不到一百行代码实现一个小siri
2017/03/02 Python
Django生成PDF文档显示在网页上以及解决PDF中文显示乱码的问题
2019/07/04 Python
numpy.array 操作使用简单总结
2019/11/08 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
JetBrains PyCharm(Community版本)的下载、安装和初步使用图文教程详解
2020/03/19 Python
tensorflow 20:搭网络,导出模型,运行模型的实例
2020/05/26 Python
Python虚拟环境库virtualenvwrapper安装及使用
2020/06/17 Python
Python利用pip安装tar.gz格式的离线资源包
2020/09/14 Python
去除python中的字符串空格的简单方法
2020/12/22 Python
客户服务经理岗位职责
2014/01/29 职场文书
迟到检讨书300字
2014/02/14 职场文书
英语教学随笔感言
2014/02/20 职场文书
物流仓管员岗位职责
2015/04/01 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
仅用一句SQL更新整张表的涨跌幅、涨跌率的解决方案
2021/05/06 MySQL
MySQL 十大常用字符串函数详解
2021/06/30 MySQL
使用Springboot实现健身房管理系统
2021/07/01 Java/Android