jQuery使用简单示例 validate 插件
摘录自:http://blog.csdn.net/u010320371/article/details/51104783用户登录
用户名
密码
确认密码
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>jQuery Validation 插件</title>
- <link rel="stylesheet" href="style.css"/>
- </head>
- <body>
- <form id="demoForm">
- <fieldset>
- <legend>用户登录</legend>
- <p id="info"></p>
- <p>
- <label for="username">用户名</label>
- <input type="text" id="username" name="username"/>
- </p>
- <p>
- <label for="password">密码</label>
- <input type="password" id="password" name="password"/>
- </p>
- <p>
- <label for="confirm-password">确认密码</label>
- <input type="password" id="confirm-password" name="confirm-password"/>
- </p>
- <p>
- <input type="submit" value="登录"/>
- </p>
- </fieldset>
- </form>
- <script src="vendor/jquery-1.10.0.js"></script>
- <script src="vendor/jquery.validate-1.13.1.js"></script>
- <script>
- var validator1;
- $(document).ready(function () {
- validator1 = $("#demoForm").validate({
- debug: true,
- rules: {
- username: {
- required: true,
- minlength: 2,
- maxlength: 10
- },
- password: {
- required: true,
- minlength: 2,
- maxlength: 16
- },
- "confirm-password": {
- equalTo: "#password"
- }
- },
- messages: {
- username: {
- required: '请输入用户名',
- minlength: '用户名不能小于2个字符',
- maxlength: '用户名不能超过10个字符',
- remote: '用户名不存在'
- },
- password: {
- required: '请输入密码',
- minlength: '密码不能小于2个字符',
- maxlength: '密码不能超过16个字符'
- },
- "confirm-password": {
- equalTo: "两次输入密码不一致"
- }
- },
- highlight: function(element, errorClass, validClass) {
- $(element).addClass(errorClass).removeClass(validClass);
- $(element).fadeOut().fadeIn();
- },
- unhighlight: function(element, errorClass, validClass) {
- $(element).removeClass(errorClass).addClass(validClass);
- },
- submitHandler: function (form) {
- console.log($(form).serialize())
- }
- });
- $("#check").click(function () {
- console.log($("#demoForm").valid() ? "填写正确" : "填写不正确");
- });
- });
- </script>
- </body>
- </html>
- <!DOCTYPE html>
- <html>
- <head lang="en">
- <meta charset="UTF-8">
- <title>jQuery Validation 插件</title>
- <link rel="stylesheet" href="style.css"/>
- <script src="/Public/js/jquery-1.10.0.js"></script>
- <script src="/Public/js/jquery.validate-1.13.1.js"></script>
- </head>
- <body>
- <form id="demoForm">
- <fieldset>
- <legend>用户登录</legend>
- <p id="info"></p>
- <p>
- <label for="username">用户名</label>
- <input type="text" id="username" name="username"/>
- </p>
- <p>
- <label for="password">密码</label>
- <input type="password" id="password" name="password"/>
- </p>
- <p>
- <label for="confirm-password">确认密码</label>
- <input type="password" id="confirm-password" name="confirm-password"/>
- </p>
- <p>
- <label for="email">邮箱</label>
- <input type="text" id="email" name="email"/>
- </p>
- <p>
- <label for="phone">手机</label>
- <input type="text" id="phone" name="phone"/>
- </p>
- <p>
- <input type="submit" value="登录"/>
- </p>
- </fieldset>
- </form>
- <script>
- $(document).ready(function(){
- $("#demoForm").validate({
- rules:{
- username:{
- required:true,
- minlength:2,
- maxlength:10,
- },
- password:{
- required:true,
- minlength:2,
- maxlength:16,
- },
- email:{
- required:true,
- email:true,
- },
- phone:{
- required:true,
- rangelength:[11,11],
- number:true
- },
- "confirm-password":{
- equalTo:"#password"
- }
- },
- messages:{
- username:{
- required:'请输入用户名!',
- minlength:'最小为两个字符!',
- maxlength:'最大为十个字符!'
- },
- password:{
- required:'请输入密码!',
- minlength:'最小为两个字符!',
- maxlength:'最大为十六个字符!'
- },
- email:{
- required:'邮箱必填!',
- email:'email格式填写不正确!'
- },
- phone:{
- required:'请输入手机号码!',
- rangelength:'手机号码为11位',
- number:'手机号必须为数字'
- },
- 'confirm-password':{
- equalTo:'两次输入密码不一致!'
- }
- },
- submitHandler: function(form){ //表单提交句柄,为一回调函数,带一个参数:form
- alert("提交表单");
- },
- });
- });
- </script>
- </body>
- </html>
jQuery使用简单示例 validate 插件的更多相关文章
- jQuery+pjax简单示例汇总
pjax 是一个jQuery插件,它使用 ajax 和 pushState 来实现快速的浏览体验,包括真正的固定链接,页面标题和工作返回按钮. ajax缺点是破坏了浏览器的前进后退,因为ajax的请求 ...
- C# .net Jquery ajax 简单示例
jquery中ajax相信大家都不陌生,这里只写个简单例子示意用法,详细后续再写. 在html中按钮事件中添加如下js var param = "data=" + escape($ ...
- jquery验证简单示例
来自<jquery 权威指南> 输入某个字符,选择相应的验证类型,并输出验证结果 ----------------------------------- 效果显示: 详细代码: <! ...
- aspx中的表单验证 jquery.validate.js 的使用 以及 jquery.validate相关扩展验证(Jquery表单提交验证插件)
这一期我们先讲在aspx中使用 jquery.validate插件进行表单的验证, 关于MVC中使用 validate我们在下一期中再讲 上面是效果,下面来说使用步骤 jQuery.Valid ...
- jQuery Validate 插件
>>>>>>>>>>>>>>>>>>>>>>>>> ...
- JQuery Validate插件与实现
菜鸟拙见,望请纠正 一:效果展示:以下是两个注册表单验证,左边使用Jquery validate插件实现,右边是自己用JQuery实现,效果差不多,但个人推荐用插件,毕竟前人栽了树而且长大了后人当然好 ...
- jQuery Validate 插件为表单提供了强大的验证功能
之前项目开发中,表单校验用的jQuery Validate 插件,这个插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的 ...
- jQuery Validate插件实现表单强大的验证功能
转自:http://www.jb51.net/article/76595.htm jQuery Validate插件捆绑了一套有用的验证方法,包括 URL 和电子邮件验证,同时提供了一个用来编写用户自 ...
- (转)jquery.validate插件的使用
JQuery Validate使用总结:一.导入js库<script src="../js/jquery.js" type="text/javascript&quo ...
随机推荐
- 物流包裹一站式查询(TrackingMore)
快递查询接口 目前提供快递查询的接口平台有: Trackingmore 快递100 快递网 不同接口的区别: (1)Trackingmore支持380家快递公司,其中有55家为国内的快递,其余325家 ...
- 纯前端导出pdf文件
纯前端js导出pdf,已经用于生产环境. 工具: 1.html2canvas,一种让html转换为图片的工具. 2.pdfmake或者jspdf ,一种生成.编辑pdf,并且导出pdf的工具. pdf ...
- Nginx集群之SSL证书的WebApi微服务
目录 1 大概思路... 1 2 Nginx集群之SSL证书的WebApi微服务... 1 3 HTTP与HTTPS(SSL协议)... 1 4 Ope ...
- JavaScript Dom入门
好像代码太杂了,博客园里跑不起来,单独复制到html中本地测试都是没有问题的. JavaScript JavaScript 是属于 web 的语言,它适用于 PC.笔记本电脑.平板电脑和移动电话. J ...
- 【链表】BZOJ1588: [HNOI2002]营业额统计
1588: [HNOI2002]营业额统计 Time Limit: 5 Sec Memory Limit: 162 MBSubmit: 17555 Solved: 7179[Submit][Sta ...
- windows 多任务与进程
多任务,进程与线程的简单说明 多任务的本质就是并行计算,它能够利用至少2处理器相互协调,同时计算同一个任务的不同部分,从而提高求解速度,或者求解单机无法求解的大规模问题.以前的分布式计算正是利用这点, ...
- ATM机运行代码
实现代码: import java.util.Scanner; public class Atm { public static void main(String[] args) { // TODO ...
- Ubuntu+Django+Nginx+uWSGI+Mysql搭建Python Web服务器
Ubuntu+Django+Nginx+uWSGI+Mysql搭建Python Web服务器 闲着无聊的时候部署了一个Django项目玩,用vm虚拟机部署的. 准备工作 我使用的系统是Ubuntu16 ...
- IdentityServer Topics(5)- 使用第三方登录
ASP.NET Core有一个灵活的方式来处理外部认证. 这包括几个步骤. 如果您使用的是ASP.NET Identity,则许多底层技术细节对您而言都是隐藏的. 建议您还阅读Microsoft文档并 ...
- print与printf的区别
print与printf的区别 1,print 中不能使用%s ,%d 或%c: 2,print 自动换行,printf 没有自动换行. 纯粹做下笔记哈!很多东西不知道,也就只能这样了!