<!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. 纯代码实现wordpress文章隐藏内容评论可见

    在很多网站上都看过这个效果,比如说知己知彼网站,他的部分资源是需要我们评论后才能下载的,那么这个到底有什么用呢,对我而言,除了拿来装逼,还可以增加我的评论数量,不多说,先看看效果: 其实WordPre ...

  2. spring boot rest例子

    简介: 本文将帮助您使用 Spring Boot 创建简单的 REST 服务. 你将学习 什么是 REST 服务? 如何使用 Spring Initializr 引导创建 Rest 服务应用程序? 如 ...

  3. go语言的数组和切片区别

    这里不介绍数组和切片的使用技巧,主要看下2者的区别. 首先看下它们的定义: 数组:类型 [n]T 表示拥有 n 个 T 类型的值的数组. 切片:类型 []T 表示一个元素类型为 T 的切片. 看一个数 ...

  4. 简单解决python安装中的Unable to find vcvarsall.bat问题

    使用python36安装python的murmurhash的时候遇到上述问题,原因是没有找到vcvarsall.bat.查找vcvarsall.bat的方法是定义在_msvccompiler.py文件 ...

  5. 在js中实现新窗口打开页面

    我们都知道可以在html代码中使用<a href="xxxx" target="_blank"></a>这种方式来打开一个新的窗口打开一 ...

  6. JSON基础(Java)

    1.json maven 依赖(以下都以第一个包为例) <dependency> <groupId>org.json</groupId> <artifactI ...

  7. 选择排序—堆排序（Heap Sort） 没看明白，不解释

    堆排序是一种树形选择排序,是对直接选择排序的有效改进. 基本思想: 堆的定义如下:具有n个元素的序列(k1,k2,...,kn),当且仅当满足 时称之为堆.由堆的定义可以看出,堆顶元素(即第一个元素) ...

  8. 小白学PYTHON时最容易犯的6个错误，看看你遇到过几个

    最近又在跟之前的同学一起学习python,一起进步,发现很多测试同学在初学python的时候很容易犯一些错误,特意总结了一下.其实这些错误不仅是在学python时会碰到,在学习其他语言的时候也同样会碰 ...

  9. ASP VNext 开源服务容错处理库Polly使用文档

    在进入SOA之后,我们的代码从本地方法调用变成了跨机器的通信.任何一个新技术的引入都会为我们解决特定的问题,都会带来一些新的问题.比如网络故障.依赖服务崩溃.超时.服务器内存与CPU等其它问题.正是因 ...

  10. python全栈学习--day11(函数高级应用)

    一,函数名是什么? 函数名是函数的名字,本质:变量,特殊的变量. 函数名()执行此函数 ''' 在函数的执行(调用)时:打散. *可迭代对象(str,tuple,list,dict(key))每一个元 ...