jQuery  validate插件

一、导入js库

先导入jQuery库,然后导入Validate插件,如果是中文提示还需要导入messages_zh.js。

注意Validate的导入要在jQuery库之后。代码如下:

    <script src="jQuery.1.8.3.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<!-- 因为默认是用英文输出错误信息,如果导入下面包就可以默认用中文输出错误信息 -->
<script src="messages_zh.js" type="text/javascript"></script>

二、常见默认校验规则

(1)、required:true               必输字段
(2)、email:true 必须输入正确格式的电子邮件
(3)、url:true 必须输入正确格式的网址
(4)、number:true 必须输入合法的数字(负数,小数)
(5)、digits:true 必须输入整数
(6)、creditcard:true 必须输入合法的信用卡号
(7)、equalTo:"#password" 输入值必须和#password相同
(8)、accept: 输入拥有合法后缀名的字符串(上传文件的后缀)
(9)、maxlength:5 输入长度最多是5的字符串(汉字算一个字符)
(10)、minlength:10 输入长度最小是10的字符串(汉字算一个字符)
(11)、rangelength:[5,10] 输入长度必须介于 5 和 10 之间的字符串")(汉字算一个字符)
(12)、range:[5,10] 输入值必须介于 5 和 10 之间
(13)、max:5 输入值不能大于5
(14)、min:10 输入值不能小于10

三.submit提交校验案例

(1)register.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<script type="text/javascript" src="../js/jquery-1.7.1.js"></script>
<script type="text/javascript" src="../js/jquery.validate.min.js"></script>
<!-- 上面两个导入就可以,下面这个自己写一个校验规则 -->
<script type="text/javascript" src="../js/register.js"></script>
<html>
<head>
<style type="text/css" rel="stylesheet">
.wrap{margin:0 auto;width:500px;}
.palceholder{ border:solid 1px red;}
</style>
</head>
<body>
<div class="wrap">
<h1>注册</h1>
<form action="" id="form_register">
<p>用 户 名: <input type="text" name="name" /></p>
<p>密 码: <input type="text" name="password" /></p>
<p>确认密码: <input type="text" name="password1" /></p>
<p>电子邮件: <input type="text" name="emal" /></p>
<p>年 龄: <input type="text" name="age" /></p>
<p>爱 好:<select name="hobby" id="hobby">
<option value="">请选择</option>
<option value="1">唱歌</option>
<option value="2">跳舞</option>
<option value="3">画画</option>
</select>
</p>
<input type="submit" value="submit提交">
<input type="submit" value="button提交" id="hand" name="hand">
</form>
</div>
</body>
</html>

先看界面效果:很普通的一个界面

(2)register.js

/*首先校验要在$(document).ready()里加入验证规则与错误提示位置*/
$(document).ready(function(){
$("#form_register").validate({

debug:true,//如果这个参数为true,那么表单不会提交,只进行检查,调试时十分方便。 // 错误提示
rules:{
name:{required:true},
password:{required:true},
password1:{required:true,equalTo: "#password"},
emal:{required:true},
//这里要注意select有个小细节,就是默认的"请选择"的value一定要是"",如果你设置了"-1",那它就默认有值,而不去校验
hobby:{required:true},
age:{required:true,digits:true},
},
messages:{
name:{required:"请输入用户名"},
password:{required:"请输入密码"},
password1:{required:"请输入密码",equalTo: "两次密码输入不一致"},
emal:{required:"请输入电子邮箱"},
hobby:{required:"请选择爱好"},
age:{required:"请输入年龄",digits:"必须为整数"},
}, /*
下面这个很关键:
error:错误信息
element:指当前元素
*/
errorPlacement:function(error, element){
//我往当前元素添加class属性,然后对这个css样式设置,这样就可以更加清晰显示错误
element.addClass('palceholder');
//添加placeholder属性,属性值就是error.html()
element.attr({placeholder:error.html()});
}
});
});

(3)当我在界面上点击submit提交的时候看界面

通过样式可以让错误信息更明显

如果我在register.js错误显示方式修改如下:

errorPlacement:function(error, element){
element.addClass('palceholder');
//默认情况是:error.appendTo(element.parent());即把错误信息放在验证的元素后面
error.appendTo(element.parent());
}
});

看界面效果:

四.用button提交

我们知道,很多时候我们需要button进行ajax提交,在网上都是这样写:

$("#btn).click(function(){
if($("#form").valid()){
......
}
//本人亲自测试当button提交时这里的$("#form").valid()是不行,会报错

找了好多博客发现有一个是可以的,下面进行代码演示,其它都和上面一样,就register.js我重新写一个

$(document).ready(function(){
$("#hand").bind("click" ,function(){
//编写表单验证函数validform,在验证按钮注册按钮点击事件内调用验证函数对象
if(validform().form()){
alert(验证通过);
}
});
}); function validform(){
/*关键在此增加了一个return,返回的是一个validate对象,这个对象有一个form方法,返回的是是否通过验证*/
return $("#form_register").validate({
debug:true, rules:{
name:{required:true},
password:{required:true},
password1:{required:true,equalTo: "#password"},
emal:{required:true}, hobby:{required:true},
age:{required:true,digits:true},
},
messages:{
name:{required:"请输入用户名"},
password:{required:"请输入密码"},
password1:{required:"请输入密码",equalTo: "两次密码输入不一致"},
emal:{required:"请输入电子邮箱"},
hobby:{required:"请选择爱好"},
age:{required:"请输入年龄",digits:"必须为整数"},
},
errorPlacement:function(error, element){
element.addClass('palceholder');
error.appendTo(element.parent());
}
});
}

当点击button提交按钮时,发现界面也可以进行校验

基本上就这么多,以后用到新的,以后再写。

想的太多,做的太少,中间的落差就是烦恼,要么去做,要么别想 少尉【16】

【jQuery】(6)---jQuery validate插件的更多相关文章

  1. 读<jQuery 权威指南>[5]-插件

    一.说明 jQuery插件官网:http://plugins.jquery.com/ 使用插件时引用顺序:插件引用要位于主jquery库之后. 二.插件应用实例 演示插件jquery.validate ...

  2. 表单验证神器——jquery.validate插件

    jquery.validate.js插件应用举例,ajax方式提交数据. html代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Tr ...

  3. JQuery 表单校验插件 validate 使用纪录

    JS诞生其中一个目的就是将, 服务器端的校验在客户端提前完成, 以避免用户提交数据后, 后台校验报错的糟糕用户体验. 基于JQuery库的有很多优秀的插件, 其中对于浏览器端表单进行验证的基本功能也有 ...

  4. jquery.validate插件在booststarp中的运用

    现在在网络上已经可以找到很多基于bootstarp的表单认证,但是验证的都不全面的,下载后,我们还要理解作者的思路然后进行修改添加,这种修改方式往往适合学习,时间很多的时候.但是我们很多时候是没有时间 ...

  5. jQuery Validate 插件

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  6. jquery validate 插件使用小结

    项目中整合了jquery validate插件,仿照别人的使用写了我的表单验证,结果不起作用.然后就各种找原因. 在网上下了jquery validate插件的完整包,看了看里边的例子,跟我的使用貌似 ...

  7. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  8. JQuery Validate插件与实现

    菜鸟拙见,望请纠正 一:效果展示:以下是两个注册表单验证,左边使用Jquery validate插件实现,右边是自己用JQuery实现,效果差不多,但个人推荐用插件,毕竟前人栽了树而且长大了后人当然好 ...

  9. Jquery表单验证插件validate

    写在前面: 在做一些添加功能的时候,表单的提交前的验证是必不可少的,jquery的validate插件就还可以,对于基本的需求已经够了.这里记录下基本的用法. 还是写个简单的demo吧 <htm ...

随机推荐

  1. 关于 getsockname、getpeername和gethostname、gethostbyname

    一.gethostname,gethostbyname的用法 这两个函数可以用来获取主机的信息.gethostname:获取主机的名字gethostbyname:通过名字获取其他的信息(比如ip) 1 ...

  2. Oracle自动备份数据

    一. Oracle自动备份单表一个月数据 方式一:三步处理(建批处理文件,写sql文件,设置任务计划) 1. 第一步:建立一个批处理文件 @echo off Set OrclSid=orcl Set ...

  3. OpenCASCADE构造一般曲面

    OpenCASCADE构造一般曲面 eryar@163.com Abstract. 本文主要介绍常见的曲面如一般柱面(拉伸曲面).旋转面在OpenCASCADE中的构造方法,由此思考一般放样算法的实现 ...

  4. Android Spinner值不显示,选择列表正常

    你在给adapter设置数据时,如果你是静态数据,也就是死数据,那么spinner显示没有问题,但是你如果异步进行网络请求,或者使用Volley请求的时候就要注意,你的adapter设置要在onRes ...

  5. DotNetCore跨平台~Moq框架实现模拟测试

    回到目录 当我们进行软件开发时,一般会写单元测试,而对于业务情景来说,一般是测试它的业务逻辑准确性,对于你的测试数据是否来自数据库还是文件,是否为真实还是模拟,并不是很关心!我关心的就是我的业务逻辑是 ...

  6. 小白的Python之路 PEP8 代码风格

    转载自http://www.douban.com/note/134971609/ Python 的代码风格由 PEP 8 描述.这个文档描述了 Python 编程风格的方方面面.在遵守这个文档的条件下 ...

  7. Python3入门笔记(1) —— windows安装与运行

    Python的设计哲学是"优雅"."明确"."简单".这也是我喜欢Python的理由之一 Python的安装: 1.进入Python官方网站 ...

  8. ES6之Class

    ES6中的Class和JS的比起来无疑是让对象原型的写法更加清晰,更像面向对象编程的语法而已,注意一个问题ES6里面的Class的内部定义的所有方法都是不可枚举的,而且在ES6中Class不存在变量提 ...

  9. iOS 类似2048、4096小游戏-OC

    大概思路(初步制作,粗工制造):demo 1.Collection 创建cell 2.cell上添加一个view,用来添加手势 3.字典用来存放数据->每次执行StarGame数组接收没有数字的 ...

  10. 开源框架SmartImageView的使用

    1.SmartImageView为一个网络图片框架,可以将一个网络URL的图片展示在UI上 2.SmartImageView使用 @1Github上下载源代码 @2拷贝原码到工程src下 @3布局配置 ...