<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<script type="text/javascript" src="jquery-validation-1.14.0/lib/jquery.js"></script>
<script type="text/javascript" src="jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script type="text/javascript" src="jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script type="text/javascript" src="jquery-validation-1.14.0/dist/additional-methods.js"></script>
<style type="text/css">
p{margin:0;}
label.error{ color:red;font-size: 12px;text-indent: 2em;display: inline-block;background:url("./images/error.png") no-repeat 0 0;}
</style>
<body>
<div class="container">
<form id="infor_form" method="get">
<fieldset>
<legend>请输入您的姓名、邮箱和电话号码</legend>
<p>
<label for="name">姓名</label>
<input type="text" name="name" id="name" required>
</p>
<p>
<label for="mail">邮箱</label>
<input type="email" name="mail" id="mail" required>
</p>
<p>
<label for="tel">电话</label>
<input type="text" name="tel" id="tel" required>
</p>
<p>
<label for="password">密码</label>
<input type="text" name="password" id="password" required>
</p>
<p>
<label for="password1">再次输入密码</label>
<input type="text" name="password1" id="password1" required>
</p>
<p><input type="submit" class="submit" value="submit"></p>
</fieldset>
</form>
</div>
</body>
<script type="text/javascript">
$(function(){
$('#infor_form').validate({

rules:{
name:{
isChinaName:true,
minlength:2,
maxlength:10
},
tel:{
isTel:true
},
email: {
isMail: true

},
password:{
required:true,
minlength:3
},
password1:{
required:true,
minlength:3,
equalTo: "#password"
}
},
messages:{
name:{
isChinaName:"请输入一个合法的中文名",
},
tel:{
isTel:"请输一个正确的手机号码"
},
email:{
isMail:"请输入一个有效的邮箱地址"
},
password1:{
equalTo:"两次密码输入不一致"
}
},
errorPlacement: function(error, element) {
//error.appendTo(element.parent()); //显示在当前input的右侧
error.insertAfter(element.parent());//显示在p标签的下方
}
});
})

</script>
</html>

在此贴上我的笔记，望对大家有所帮助

我在additional-methods.js中自定义添加的代码为：

//手机号验证
jQuery.validator.addMethod("isTel", function(value, element) {
var tel = /^1[0-9]{10}$/;
return this.optional(element) || (tel.test(value));
}, "请正确填写您手机号码");

//邮箱地址

jQuery.validator.addMethod("isMail", function(value, element) {
var mail= /^(\w)+((\.|-)\w+)*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/;
return this.optional(element) || (mail.test(value));
}, "请输入一个有效的邮箱地址");

// 姓名验证

jQuery.validator.addMethod("isChinaName", function(value, element) {
var pattern= /^[\u4E00-\u9FA5A-Za-z]+$/;
return this.optional(element) || (pattern.test(value));
}, "请输入一个有效的中文名");

注意：自定义的方法要与原文件中方法保持一致，逗号隔开。

最后的效果就是：

我的jquery validate 笔记的更多相关文章

  1. jquery 之validate 笔记

    默认分类 2010-04-04 20:35:01 阅读123 评论0 字号:大中小 jquery.validate是jquery旗下的一个验证框架,借助jquery的优势,我们可以迅速验证一些常见的输 ...

  2. 【JQ成长笔记】jQuery Validate验证插件

    validate是一款很好的jq插件,提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同 ...

  3. MVC笔记2:mvc+jquery.validate.js 进行前端验证

    1.引用如下js和css 代码 <link href="@Url.Content("~/Content/Site.css")" rel="sty ...

  4. jQuery学习笔记（jquery.validate插件）

    jquery.validate官网地址:http://jqueryvalidation.org/ 1. 导入JavaScript库 <script src="../js/jquery. ...

  5. jquery validate使用笔记

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.     1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素  3.鼠标离开后的正确.错误提示及鼠标移入时的帮 ...

  6. JQuery.Validate学习笔记

    JQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...

  7. jquery.validate验证表单配合回调提交和h5.storage本地保存笔记

    表单验证插件我使用:jquery.validate.js 支持中文提示,可扩展性强!教程地址 本地保存状态信息使用:h5提供的storage,浏览器支持5m的存储量,存储类型必须是string类型,并 ...

  8. 表单提交学习笔记（二）—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  9. jquery validate不用submit提交，用js提交的

    jquery validate控件 默认是使用submit提交的, 要想改成使用button的click事件处理函数中手工提交, 可以按照如下方式操作: 1 绑定form的validate, 2 然后 ...

随机推荐

  1. c++趣味之难以发现的bug

    这些bug可能够你喝一壶的. 1.被断言(assert)包含的代码 常发生在切换到release版本时,执行结果乖乖的,最终查找结果是assert括号里的代码在release下是不执行的. 发现:跟踪 ...

  2. OpenCascade Law Function

    OpenCascade Law Function eryar@163.com 1.Introduction 在OpenCASCADE的TKGeomAlgo Toolkit中提供了一个Law Packa ...

  3. 排序算法Java实现（归并排序）

    算法描述:对于给定的一组记录,首先将每两个相邻的长度为1的子序列进行归并,得到 n/2(向上取整)个长度为2或1的有序子序列,再将其两两归并,反复执行此过程,直到得到一个有序序列. package s ...

  4. 纯CSS制作网页图标

    三角形 <div class="box"></div> <style>.box{ width: 0; height: 0; border-top ...

  5. Know your weapons Ⅱ

    本次内容主要讲述使用UWP相关技术可以实现的软件上的一些功能,这里以Netease-Cloud Music(下称Cloud Music)为例讲述,这款音乐软件我个人一直在用,毕竟人们生活离不开音乐,说 ...

  6. C#中的String类

    一.String类的方法 1. Trim():清除字符串两端的空格 2. ToLower():将字符串转换为小写 3. Equals():比较两个字符串的值,bool 4. IndexOf(value ...

  7. [日常] 最近的一些破事w...

    更新博文一篇以示诈尸(大雾 (其实只是断了个网然后就彻底失踪了一波w...连题解都没法写了QAQ) $ \tiny{诈尸的实际情况是老姚提前走还把十一机房门锁了然而钥匙在联赛的时候就还了于是并不能进去 ...

  8. Mybatis学习笔记二

    本篇内容,紧接上一篇内容Mybatis学习笔记一 输入映射和输出映射 传递简单类型和pojo类型上篇已介绍过,下面介绍一下包装类型. 传递pojo包装对象 开发中通过可以使用pojo传递查询条件.查询 ...

  9. geotrellis使用（三十六）瓦片入库更新图层

    前言 Geotrellis 是针对大数据量栅格数据进行分布式空间计算的框架,这一点毋庸置疑,并且无论采取何种操作,其实都是先将大块的数据切割成一定大小的小数据(专业术语为瓦片),这是分治的思想,也是分 ...

  10. HIVE的常用操作（HQL)语句

    HIVE基本操作命令 创建数据库 >create database db_name; >create database if not exists db_name;//创建一个不存在的数据 ...