一、下载依赖包

网盘下载：https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224

二、 添加一个另外一个插件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 代码中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<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 表单验证插件----通过name属性来关联字段来验证，改变默认的提示信息，将校验规则写到 js 代码中的更多相关文章

  1. jQuery Validate 表单验证插件----利用jquery.metadata.js将校验规则直接写在class属性里面并定义错误信息的提示

    一.下载依赖包 网盘下载:https://yunpan.cn/cryvgGGAQ3DSW  访问密码 f224 二. 添加一个另外一个插件jquery.metadata.js 并把校验规则写在控件里面 ...

  2. ASP.NET MVC Jquery Validate 表单验证的多种方式

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  3. [转]ASP.NET MVC Jquery Validate 表单验证的多种方式介绍

    在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体验也会得到很大的提升.在开发过程中我们可以不借助 JS 库,自己去手写 JS ...

  4. Jquery Validate 表单验证的多种方式

    ASP.NET MVC Jquery Validate 表单验证的多种方式 在我们日常开发过程中,前端的表单验证很重要,如果这块处理不当,会出现很多bug .但是如果处理的好,不仅bug会很少,用户体 ...

  5. jQuery Form 表单提交插件----Form 简介，官方文档，官方下载地址

     一.jQuery Form简介 jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxF ...

  6. bootstrap+jQuery.validate表单校验

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  7. jQuery.validate表单校验+bootstrap

    谈谈表单校验 这大概是一种惯例,学习前台后台最开始接触的业务都是用户注册和登录.现在社会坚持以人为本的理念,在网站开发过程同样如此.User是我们面对较多的对象,也是较核心的对象.最开始的用户注册和登 ...

  8. jQuery Form 表单提交插件-----formSerialize，fieldSerialize，fieldValue，resetForm，clearForm，clearFields的 应用

    一.jQuery Form的其他api  1.  formSerialize 将表单序列化成查询串.这个方法将返回一个形如: name1=value1&name2=value2的字符串.是否可 ...

  9. jQuery Validate 验证，校验规则写在控件中的具体例子

    将校验规则写到控件中 <script src="../js/jquery.js" type="text/javascript"></scrip ...

随机推荐

  1. 克隆复制可使用原型( Prototype)设计模式

    今天有学习设计模式的原型(Prototype)<设计模式--原型(Prototype)模式>http://www.cnblogs.com/insus/p/4152773.html .为了加 ...

  2. HTML常用符号

    HTML转义符号 HTML常用符号: 显示一个空格    < 小于 < <> 大于 > >& &符号 & &" 双引号 & ...

  3. 重新想象 Windows 8 Store Apps (45) - 多线程之异步编程: IAsyncAction, IAsyncOperation, IAsyncActionWithProgress, IAsyncOperationWithProgress

    [源码下载] 重新想象 Windows 8 Store Apps (45) - 多线程之异步编程: IAsyncAction, IAsyncOperation, IAsyncActionWithPro ...

  4. FL2440驱动添加（1）：hello world 驱动模块添加

    试试第一个hello world模块添加: 1,在添加drivers/char/hello.c /*************************************************** ...

  5. 状态压缩DP--Mondriaan's Dream

    题目网址:http://acm.hust.edu.cn/vjudge/contest/view.action?cid=110044#problem/A Description Squares and ...

  6. 泛函编程（16）－泛函状态－Functional State

    初接触泛函状态觉着很不习惯.主要是在使用State数据类型时很难理解其中的原理,特别是泛函状态变迁机制(state transition mechanism):怎么状态就起了变化,实在难以跟踪.我想这 ...

  7. B/S和C/S的区别（转）

    一.什么是CS和BS结构? 1.C/S又称Client/Server或客户/服务器模式.服务器通常采用高性能的PC.工作站或小型机,并采用大型数据库系统,如Oracle.Sybase.Informix ...

  8. 推荐两个很好用的javascript模板引擎

    http://www.jsviews.com/#jsrender,支持if/for等常用逻辑,自称下一代jquery template plugin标准 https://github.com/janl ...

  9. 【GOF23设计模式】适配器模式

    来源:http://www.bjsxt.com/ 一.[GOF23设计模式]_适配器模式.对象适配器.类适配器.开发中场景  适配器模式  笔记本电脑只有USB接口,新买的键盘是PS2接口的,需要用适 ...

  10. 对getElementsByTagName("*")获取全部元素的总结

    var all=document.getElementsByTagName("*")      //获取整个页面的标签元素 alert(all.length);           ...