插件—jquery.validate.js
前言
在学习jquery.validate.js中的一个小案例，只是这个插件的简单使用。
案例代码如下：
<head>
<title></title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script src="Scripts/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$.validator.addMethod("phones", function (value, element, param) { //自定义验证
var exp = new RegExp(param);
return this.optional(element) || exp.test(value);
}, "不等于");
$("#form1").validate({
rules: {
Name: { required: true, maxlength: 6, minlength: 4 }, //给用户框定义规则
total: { equalTo: "#Name" },
phone: { phones: /^1[3458][0-9]{9}$/ }
},
messages: {
Name: { required: "必填项", maxlength: "大于6个字符", minlength: "少于4个字符"},//给用户框定义提示语
phone:{phones:"不符合规则"}
},
errorElement: "em", //给用户框自定义提示图片
success: function (label) {
label.text(" ").addClass("success"); //$nbsp:是为了兼容IE的
}
});
});
</script>
<%-- 给用户框自定义提示图片 样式--%>
<style type="text/css">
em.error
{
background: url("images/1.png") no-repeat 0px 0px;
padding-left:19px;
color: red;
}
em.success {
background: url("images/2.png") no-repeat 0px 0px;
padding-left:19px;
}
</style>
</head>
<body>
<form id="form1">
用户名： <input type="text" name="Name" id="Name"/><br />
7+8=：<input type="text" name="total" id="total"/><br/>
手机：<input type="text" name="phone" id="phone"/><br/>
<input type="submit" id="btnSubmit" value="确定"/>
</form>
</body>
运行结果如下：
结束
我也是知道皮面，如果想再深入学习，推荐一篇博文：http://www.cnblogs.com/hejunrex/archive/2011/11/17/2252193.html
插件—jquery.validate.js的更多相关文章
- jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js
原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352 最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...
- jQuery插件 -- 表单验证插件jquery.validate.js
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...
- 表单验证插件jquery.validate.js
最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...
- jQuery表单验证插件——jquery.validate.js
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...
- 验证插件——jquery.validate.js
下载地址:http://download.csdn.net/download/s592652578/9457421 教程:http://www.runoob.com/jquery/jquery-plu ...
- 表单验证插件之jquery.validate.js
提到表单验证的插件,第一个想到的就是jquery.validate.js,所以小生想在这里稍微详细地说一下这款插件的具体使用方法,便于理解,我直接附上整段demo的代码(没怎么调样式,主要是看js): ...
- jquery.validate.js 应用示例
今天发现了jQuery一个很强大的验证表单插件(jquery.validate.js 下载地址:http://bassistance.de/jquery-plugins/jquery-plugin-v ...
- 表单验证代码实例:jquery.validate.js表单验证插件
jquery.validate.js是JQuery旗下的一个验证插件,借助JQuery的优势,我们可以迅速验证一些常见的输入,并且可以自己扩充自己的验证方法.使用前请先下载必要的JQuery插件:jq ...
- jQuery插件之验证控件jquery.validate.js
今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...
随机推荐
- GridControl摘录
gvCabTotalInfo.Columns["出线平均<br>电压"].SummaryItem.SummaryType = DevExpress.Data.Summa ...
- webpack One CLI for webpack must be installed. These are recommended choices, delivered as separate(webpack报错)
用webpack 打包项目的时候:webpack js.js bundle.js 报错. 最近在安装好webpack后,使用时,提示 One CLI for webpack must be insta ...
- (Spring Boot框架)快速入门
Spring Boot 系列文章推荐 Spring Boot 入门 Spring Boot 属性配置和使用 Spring Boot 集成MyBatis Spring Boot 静态资源处理 今天介绍一 ...
- Hadoop知识汇总
Hadoop的两大功能:海量数据存储和海量数据分析 Hadoop2的三大核心组件是:HDFS.MapperReducer和yarn 1.HDFS:分布式文件系统海量数据存储 2.MapperReduc ...
- atitit.判断时间重叠方法总结 java c++ c#.net js php
atitit.判断时间重叠方法总结 java c++ c#.net js php 1. 判断时间重叠具体流程思路 1 2. 重叠算法 实际上就是日期集合跟个时间集合的的交集(乘法算法) 1 3. 代 ...
- spring 发布 Jax-Ws Service （二）
Service import javax.jws.WebMethod; import javax.jws.WebParam; import javax.jws.WebResult; import ja ...
- zookeeper单节点windows下安装
由于需要在windows下面安装zookeeper,故做个整理 1.下载zookeeper http://mirrors.hust.edu.cn/apache/zookeeper/ 2.解压 3.修改 ...
- Cocos2d-x 3.4 初体验——安装教程
电脑系统window7 32位 1.首先从官网下载cocos2d-x并解压 http://cn.cocos2d-x.org/download/ 解压后的文件夹中有一个setup.py,双击运行.需要安 ...
- CSS3边框圆角知识
<div class="item" data-brief="整圆"> <div class="border-radius" ...
- 使用Cookie报错Control character in cookie value, consider BASE64 encoding your value
参考资料: http://www.blogjava.net/persister/archive/2009/10/02/297103.html http://blog.csdn.net/xiaozhen ...