<!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. CentOS7+mysql5.6配置主从

    一.安装环境 操作系统:CentOS-7-x86_64-DVD-1611.iso数据库版本:mysql-5.6.39-linux-glibc2.12-x86_64.tar.gz数据库地址: 192.1 ...

  2. python笔记之函数

    函数 >>> def funTest(param1): ... 'this is function document string.' #正文需要有缩进 ... return par ...

  3. React 系列文章(1)： npm 手动搭建React 运行实例 (新手必看)

    摘 要 刚接触React 开发, 在摸索中构建react 运行环境,总会遇到各种坑:本文,将用最短时间解决webpack+react 环境搭建问题. 1.如果你还没有React基础 看这里. 2.如果 ...

  4. MYSQL数据库学习十六 安全性机制

    16.1 MYSQL数据库所提供的权限 16.1.1 系统表 mysql.user 1. 用户字段 Host:主机名: User:用户名: Password:密码. 2. 权限字段 以“_priv”字 ...

  5. webpack-dev-server 设置反向代理解决跨域问题

    一.设置代理的原因 现在对前端开发的要求越来越高,并且随着自动化以及模块化的 诞生,前后端开发模式越来越流行.后端只负责接口,前端负责数据展示.逻辑处理.但是前后端开发模式,有一个重要的问题,就是跨域 ...

  6. 【网络】 应用&传输层笔记

    应用层 应用层常用的协议和各自对应的TCP/UDP端口: DNS TCP/UDP 53 HTTP TCP 80 SMTP TCP 25 POP UDP 110 Telnet TCP 23 DHCP U ...

  7. [bzoj1565][NOI2009]植物大战僵尸_网络流_拓扑排序

    植物大战僵尸 bzoj1565 题目大意:给你一张网格图,上面种着一些植物.你从网格的最右侧开始进攻.每个植物可以对僵尸提供能量或者消耗僵尸的能量.每个植物可以保护一个特定网格内的植物,如果一个植物被 ...

  8. Pla

    Pla(jdoj1006) 题目大意:给你n个矩形,并排放在一起,你的目的是将所有的矩形全部染色.你每次染的形状为一个矩形,问:最少需要染多少次? 注释:n<=10^6,wi , hi<= ...

  9. 使用责任链模式消除if分支实践

    之前接手过一个车辆监控的工具,接受第三方推送过来的车辆状态数据然后入库.车辆状态一共有8种之多,每种状态都需要做不同 处理操作.刚接手这份代码时,针对此处处理,是庞大的if-else结构,if-els ...

  10. scrapy---callback 传递自定义参数

    在scrapy提交一个链接请求是用 Request(url,callback=func) 这种形式的,而parse只有一个response参数,如果自定义一个有多参数的parse可以考虑用下面的方法实 ...