<!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. Problem : 1002 ( A + B Problem II )

    经验总结:一定要注意输出的格式,字符的空格,空行,一定要观察清楚.如本题的最后一个输出结果后面没有空行.最后代码实现的时候需要判断一下,代码如下 !=n) cout<<endl; Prob ...

  2. ubuntu14.04行更新软件包

    ubuntu14.04行更新软件包 headsen  chen   2017-10-12 16:01:34 apt-get update对应的就是第一步. apt-get upgrade 与apt-g ...

  3. 关于try catch finally

    一.try catch finally的初步理解 首先,我们什么时候要用到try/catch和finally? --已知执行的代码有可能有异常的情况下 try { //这里执行的代码如果出现异常,则立 ...

  4. React简明学习

    前面的话 React让组件化成为了前端开发的基本思路,比传统思路可以更好的控制前端复杂度,旧的开发方法受到了影响,如分离式的HTML/CSS.非侵入式JS.模板语言.MVC.CSS文件.Bootstr ...

  5. Webpack结合ES6

    一.概述ES6现在正是风华正茂的时候,各个公司都是 尝试去使用,并且作为前端工程师ES6也是体现技术的亮点.但是,现在的浏览器对es6支持不是 特别的兼容,最终还是需要把es6转换为es5,webpa ...

  6. centos下mongodb备份（dump）与还原（restore）

    数据服务器,数据库采用mongodb数据库 安装:通过增加配置安装mongodb-org,版本为3.0.7,yum安装            yum install mongodb-org 数据备份与 ...

  7. php的错误日志级别 error_report（转）

    ; E_ALL 所有错误和警告(除E_STRICT外); E_ERROR 致命的错误.脚本的执行被暂停.; E_RECOVERABLE_ERROR 大多数的致命错误.; E_WARNING 非致命的运 ...

  8. SpringMVC学习笔记三 整合jdbc和事务

    spring整合JDBC spring提供了很多模板整合Dao技术,用于简化编程. 引入相关jar包 spring中提供了一个可以操作数据库的对象,JDBCTemplate(JDBC模板对象).对象封 ...

  9. zookeeper提示Unable to read additional data from server sessionid 0x

    配置zookeeper集群,一开始配置了两台机器server.1和server.2. 配置参数,在zoo.cfg中指定了整个zookeeper集群的server编号.地址和端口: server.1=1 ...

  10. 2017 清北济南考前刷题Day 3 morning

    实际得分:100+0+0=100 T1 右上角是必败态,然后推下去 发现同行全是必胜态或全是必败态,不同行必胜必败交叉 列同行 所以n,m 只要有一个是偶数,先手必胜 #include<cstd ...