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

所属分类: 网络编程 / JavaScript 阅读数: 1061
收藏 0 赞 0 分享

本文实例介绍了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表单验证有所帮助。

更多精彩内容其他人还在看

Canvas实现放射线动画效果

本文主要分享了Canvas实现放射线动画的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

微信小程序 image组件binderror使用例子与js中的onerror区别

这篇文章主要介绍了微信小程序 image组件binderror使用例子与js中的onerror区别的相关资料,需要的朋友可以参考下
收藏 0 赞 0 分享

原生js轮播(仿慕课网)

本文主要分享了原生js实现仿慕课网的轮播效果。具有很好的参考价值,下面跟着小编一起来看下吧
收藏 0 赞 0 分享

Bootstrap table简单使用总结

这篇文章主要为大家总结了Bootstrap table的简单使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

微信小程序之MaterialDesign--input组件详解

本篇文章主要介绍了微信小程序之MaterialDesign--input组件详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
收藏 0 赞 0 分享

浅析javaScript中的浅拷贝和深拷贝

本篇文章主要介绍了浅析javaScript中的浅拷贝和深拷贝,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

js时间戳和c#时间戳互转方法(推荐)

下面小编就为大家带来一篇js时间戳和c#时间戳互转方法(推荐)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

Bootstrap模态框使用详解

这篇文章主要为大家详细介绍了Bootstrap模态框的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
收藏 0 赞 0 分享

Jil,高效的json序列化和反序列化库

下面小编就为大家带来一篇Jil,高效的json序列化和反序列化库。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
收藏 0 赞 0 分享

BootStrap实现带关闭按钮功能

这篇文章主要介绍了BootStrap实现带关闭按钮功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
收藏 0 赞 0 分享
查看更多