jquery.validate.js的简单示例
一、官方资料
二、html
<!DOCTYPE html>
<html> <head>
<meta charset="utf-8">
<title>Examples</title>
<link href="" rel="stylesheet">
</head>
<style type="text/css">
#myform input.error {background: rgb(251, 227, 228);border: 1px solid #fbc2c4;color: #8a1f11;}
</style>
<body>
<form id="myform" method="post" action="">
<p>
<label for="myname">用户名：</label>
<input id="myname" name="myname" />
</p>
<p>
<label for="email">E-Mail：</label>
<input id="email" name="email" />
</p>
<p>
<label for="password">登陆密码：</label>
<input id="password" name="password" type="password" />
</p>
<p>
<label for="confirm_password">确认密码：</label>
<input id="confirm_password" name="confirm_password" type="password" />
</p>
<p>
<input class="submit" type="submit" value="立即注册" />
</p>
</form>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</body> </html>
三、js
两种方式
1）利用submitHandler处理验证成功后的事件
var validate = $("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
//errorClass: "label.error", //默认为错误的样式类为：error
focusInvalid: false, //当为false时，验证无效时，没有焦点响应
onkeyup: false,
submitHandler: function(form) {
alert("submitted");
//写提交表单操作
},
rules: {
myname: {
required: true
},
email: {
required: true,
email: true
},
password: {
required: true,
rangelength: [3, 10]
},
confirm_password: {
equalTo: "#password"
}
},
messages: {
myname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码"
},
confirm_password: {
required: "请输入确认密码",
equalTo: "两次输入密码不一致不一致"
}
}
});
2）利用valid（是否为true来控制提交表单）
var validate = $("#myform").validate({
debug: true, //调试模式取消submit的默认提交功能
//errorClass: "label.error", //默认为错误的样式类为：error
focusInvalid: false, //当为false时，验证无效时，没有焦点响应
onkeyup: false,
rules: {
myname: {
required: true
},
email: {
required: true,
email: true
},
password: {
required: true,
rangelength: [3, 10]
},
confirm_password: {
equalTo: "#password"
}
},
messages: {
myname: "请输入姓名",
email: {
required: "请输入Email地址",
email: "请输入正确的email地址"
},
password: {
required: "请输入密码"
},
confirm_password: {
required: "请输入确认密码",
equalTo: "两次输入密码不一致不一致"
}
}
});
$(function() {
$('.submit').click(function() {
if ($("#myform").valid()) {
alert("准备提交表单")
//表单提交
} else {
alert("信息不完善")
}
});
})
四、效果
jquery.validate.js的简单示例的更多相关文章
- jquery.validate.js 表单验证简单用法
引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...
- jquery.validate.js 应用示例
今天发现了jQuery一个很强大的验证表单插件(jquery.validate.js 下载地址:http://bassistance.de/jquery-plugins/jquery-plugin-v ...
- jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- jQuery插件之验证控件jquery.validate.js
今天学习一下jQuery.Validate插件,为便于日后翻阅查看和广大博客园园友共享,特记于此. 本博客转载自:jQuery Validate jQuery Validate 插件为表单提供了强大的 ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- 【转】jquery.validate.js表单验证
一.用前必备官方网站:http://bassistance.de/jquery-plugins/jquery-plugin-validation/ API: http://jquery.bassist ...
- [转]jquery.validate.js表单验证
原文地址:https://www.cnblogs.com/si-shaohua/p/3780321.html 一.用前必备官方网站:http://bassistance.de/jquery-plugi ...
- Jquery客户端校验——jquery.validate.js
jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证 ...
- jQuery验证控件jquery.validate.js使用说明
官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation jQuery plugin: Validation 使用说明 转载 ...
随机推荐
- SQL SERVER 月、季、年统计与常用查询语句汇总
一.SQL SERVER 月.季.年统计查询 --本天 SELECT *FROM dbo.TableName WHERE DATEDIFF(DAY,TimeField,getdate())= 0; - ...
- WebLogic的下载与安装
一.WebLogic的介绍 WebLogic是美国bea公司出品的一个application server,确切的说是一个基于Javaee架构的中间件,纯java开发的,最新版本WebLogic ...
- css零碎知识点小结
1.单行文字溢出显示省略号: div{ width: 200px; overflow: hidden; text-overflow:ellipsis; white-space: nowrap; } 2 ...
- uCOS-III等RTOS与IoT OS
一.IoT 以百度天工物联网为例,如下图所示: 通过联网设备,将设备连接至云端,并将每个设备的信息进行上传,并在云端进行设备的管理,设备数据的处理计算.存储,可视化的展示和分析.IoT设备较传统的嵌入 ...
- 4.IIC总线
一.IIC总线说明: IIC总线时序只有高低电平的持续时间一般是大于多少us/ms. iic时序: 开始:当SCL为高电平时,SDA由高电平状态切换到低电平状 ...
- MySQL学习笔记Windows篇<一> Welcome to MySQL
MySQL安装完毕后没有图形化操作界面,图形化管理界面需要另行安装,个人比较喜欢Navicat,界面更像SQLserver: 此篇学习笔记所有操作均使用命令行中完成: 1.开启/停止服务 使用MySQ ...
- 深入理解Tomcat
简介 tomcat是一个web服务器,运行jsp和servlet,使用HTTP与客户端(通常是浏览器)进行通信. 构成 下图是tomcat的架构,可以看出:核心内容是Connector和Contain ...
- CentOS 7 实现ssh无密码登录
cd ~ 进入根目录. (使用ls -a或者 ls -la 能够看到当前文件夹下的所有文件包含隐藏文件夹等) 我们首先使用ls -la 发现并没有.ssh的文件夹存在. 在终端输入 ssh lo ...
- uva-10041-水题
题意:有个人想找到个房子住,并且他经常去其他街道,输入n条街,给这个人选择一条街,使得他去其他街道的距离总和最小. 排序,双重for #include <string> #include& ...
- 作为一名程序员，在面试中如何展现你Python的coding能力？
来源商业新知,原文标题:如何在一场面试中展现你对Python的coding能力? 如果你已经通过了招聘人员的电话面试,那么下面正是该展现你代码能力的时候了.无论是练习,作业,还是现场白板面试,这都是你 ...