一. JQuery 之 jQuery Validate(表单验证) 插件
1. 引用 jQuery 和 jQuery Validate 到页面
2. 基本语法设置:
使用 validate() 来写验证规则
rules 设置验证规则
验证规则中的一些规则设置:
- required:true, // 必填
- remote: { // 远程校验
- url:"remote.php",
- type:"post"
- },
- minlength:5, // 最小长度
- maxlength:18 , // 最大长度
- rangelength:[5,18] , // 长度范围
- min:2, // 最小值
- max:10, // 最大值
- rang:[2,10] , // 值范围
- email:true, // 邮箱格式
- url:true, //url 格式
- date:true, // 日期格式
- dateISO:true, //ISO 日期格式
- number:true, // 数字
- digits:true, // 整数
- equalTo:"#pwd" // 与另一元素值相等
messages 设置提示信息
- $('#form1').validate({
- // 设置验证规则
- rules:{
- username: {
- required: true,
- minlength: 2,
- maxlength: 15
- }
- },
- // 设置提示信息
- messages:{
- username:{
- required:"必须填写用户名" ,
- minlength:"用户名长度小于 2 位",
- maxlength:"用户名长度大于 15 位"
- }
- }
- })
3. 自定义规则:
使用这个方法来自定义规则
- jQuery.validator.addMethod()
- // 邮政编码验证
- jQuery.validator.addMethod("postCode", function(value, element) {
- var codeReg= /^[0-9]{6}$/;
- return this.optional(element) || (codeReg.test(value));
- }, "请正确填写您的邮政编码");
- // 手机号码验证
- jQuery.validator.addMethod("mobile", function(value, element) {
- var mobileReg = /^1[34578][0-9]{9}$/;
- return this.optional(element) || (mobileReg.test(value));
- }, "请正确填写您的手机号码");
例:// 自定义
- // 手机 添加设置规则 mobile
- jQuery.validator.addMethod("mobile",function(value,element){
- var mobileReg = /^1[34578][0-9]{9}$/;
- return this.optional(element) || (mobileReg.test(value));
- })
4. 自定义提示样式
使用 errerElement 来定义标签
使用 success 来定义的样式和显示内容
- errorElement: "label",
- success: function(label) {
- label.addClass("ok").html('验证成功');
- },
- validClass: "ok"
例:
- // 验证通过
- errorElement: "span",
- success: function(label) {
- label.addClass("ok").html('验证通过');
- },
- validClass: "ok"
5. 普通按钮提交和超链接异步提交方式
使用 jquery.validate 插件默认提交是普通按钮提交方式, 如果使用超链接提交方式
不用通过 validate() 方法表单验证也能提交到后台
所以如果碰到超链接提交方式的话我们要对超链接进行处理
当点击超链接的时候用 jQuery 方式提交
例:
- // 当点击超连接的时候让他提交
- $('.submit').click(function(){
- // 同步提交会自动触发 validate() 方法来验证是否通过
- $('#form1').submit();
- });
使用这种方式提交会自动触发表单验证, 默认提交方式也会自动触发
如果采用异步方式提交, 他是不会自动触发表单验证的
所以我们在提交的时候要手动对表单验证进行判断
首先: 给 validate() 方法声明一个变量名 (这是一个对象)
然后: 使用对象中的 form() 方法拿到他 返回值是 bool 值
普通按钮使用异步提交方式
首先: 阻止他的默认提交
然后: 使用. post 或者. get 异步提交方式进行提交
例:
serialize() 方法把表单中的值进行串行化提交
- $('#form1').submit(function(){
- // 使用异步提交他不会自动触发 validate() 方法
- // 所以需要我们是否 form() 方法自动判断表单是否通过
- if(myValidate.form()){
- // 使用 post 方法进行异步提交
- $.post("test.php",$("#form1").serialize(),function(res){
- alert(res);
- },'json')
- }
- return false;
- });
二. jQuery 之 jQuery form 插件 (AJAX 表单提交)
为了解决 AJAX 无法异步提交文件域的问题
1.1. 引用 jQuery 和 jQuery form 插件到页面
2. 使用 ajaxSubmit() 方法
ajaxSubmit()
先阻止默认提交然后使用这个方法来进行提交然后对后台处理好的数据进行展示
例:
- $("#form1").submit(function(){
- $(this).ajaxSubmit(function(res){
- alert(res);
- })
- return false;
- })
三. jQuery 之 layer 插件 (弹窗)
1. 引用 jQuery 和 layer 插件到页面
2. 这个插件的网站: http://layer.layui.com
3. 插件中的一些方法:
- // 提示框
- layer.alert('内容')
- // 提示层
- layer.msg('玩命提示中');
- //tips 层
- layer.tips('Hi, 我是 tips', '吸附元素选择器, 如 #id';
- )
例:
- $("button:first").on("click",function(){
- layer.alert("我是提示框");
- });
- $("button:first").next().on("click",function(){
- layer.msg("玩命提示中");
- });
- $("button:eq(2)").on("click",function(){
- //tips: 是它的配置项
- layer.tips("我是 tips 提示层","#div",{
- tips:[2,"blue"]
- })
- });
- // 页面层
- layer.open()
例:
- $("button:eq(3)").on("click",function(){
- layer.open({
- type:1,
- // 遮罩层
- shadeClose: true,
- // 遮罩透明度
- shade: 0.8,
- // 不显示标题
- title:"用户登录",
- // 加上边框
- skin:"layui-layer-rim",
- // 宽高
- area:['420px','240px'],
- // 要在弹出层中写什么内容
- content:"html 内容",
- // 关闭的时候让他触发一些事情
- cancel:function(index){
- layer.close(index);
- layer.msg("拜拜",{time:5000,icon:6})
- }
- })
- })
四. jQuery 之 jQuery lazyload (延迟加载)
1. 引用 jquery 和 jquery.lazyload.js 到页面
2. 为图片加入样式 lazy 图片路径引用方法用 data-original
例:<img src="imgs/loading.gif" class="lazy" data-original="imgs/4m.jpg"/>
3.js 初始化 lazyload 并设置图片显示方式
例:
- $(function(){
- $("img.lazy").lazyload(function(){
- effect:"fadeIn";
- })
- })
五. jQuery 之 kindEditor(富文本编辑器)
下载地址: http://kindeditor.net/demo.php
1. 引用 jquery 和 kindEditor 插件
2. 然后调用插件
例:
<script>
$(function(){
KindEditor.ready(function(K){
K.create("#detail",{
allowFileManager:true
})
})
})
</script>
六. myFocus 轮播图神器插件
下载地址: http://demo.jb51.net/js/myfocus/demo.html
1. 引入 myFocus 插件
2. 调用插件
<script>
myFocus.set({
id:'myFocus',// 焦点图盒子 ID
pattern:'mF_ladyQ',// 风格应用的名称
time:3,// 切换时间间隔 (秒)
trigger:'mouseover',// 触发切换模式:'click'(点击)/'mouseover'(悬停)
width:560,// 设置图片区域宽度 (像素)
height:300,// 设置图片区域高度 (像素)
txtHeight:'default'// 文字层高度设置 (像素),'default'为默认高度, 0 为隐藏
});
</script>
七. DatePicker(时间日期选择插件)
下载地址: http://www.my97.net/dp/demo/index.htm
八. 三级联动插件
日期三级联动
1. 引用插件
<script src="../jQuery_plug-in/js_times/YMDClass.js"></script>
2. 调用插件
<script>
//new YMDselect('year','month','day');
new YMDselect('year','month','day',1988,8,8);
</script>
省市县三级联动
1. 引用插件
<script src="../jQuery_plug-in/qqJsAddress/geo.js"></script>
2. 调用插件
<script>
setup();
preselect('河南省');
</script>
来源: http://www.bubuko.com/infodetail-2722966.html