jquery插件
网址：
jquery之家：http://www.htmleaf.com/jQuery
jq22:www.jq22.com
表单验证插件
jquery-validation
下载地址：http://static.runoob.com/download/jquery-validation-1.14.0.zip
使用：
1.引入jquery
2.引入jquery.validate.js
3.引入语言包
4.form标签调用validate方法
$("form").validate({
rules:{ // 定义规则
// 键是表单元素name属性值，值是规则项 -- 单一规则
uname:"required",
// 键是表单元素name属性值，值是对象
pass:{
// 键是规则名称，值是规则的值
maxlength:12,
minlength:6
required:true
}
},
messages:{ // 自定义提示内容，要和上面的规则对应
uname:"用户名必填",
pass:{
maxlength:"不能大于12位",
minlength:"不能小于6位",
required:"密码必填", // 如果要使用插件默认的提示信息则可以省略
}
},
submitHandler:function(form){ // 处理表单提交
// jQuery序列化表单数据
var data = $(form).serialize();
/*
手动提交表单或发送ajax
form.submit()
ajax
*/
}
});
5.自定义错误信息样式，使用类名error
6.自定义验证方法：
jQuery.validator.addMethod("checkTel",function(v){
var reg = /^[1][345789]\d{9}$/;
if(!reg.test(v)){
return false;
}else{
return true;
}
},"手机号不正确");
// 验证规则是checkTel，提示信息是固定的
颜色动画插件
下载网址：https://github.com/jquery/jquery-color
jquery.color.js
引入插件即可，写颜色动画就好了
laydate时间插件
官网：http://www.layui.com/laydate/
下载插件，引入核心的js文件
<body>
<input type="text" id="time">
</body>
<script src="laydate.js"></script>
<script>
// 初始化时间，执行一个laydate实例
laydate.render({
elem:"#time",
type:"datetime", // 可以指定类型：month,year,datetime,time
mark:{ // 标记
'0-6-2':"儿童节",
'0-0-5':'发工资',
'2019-6-30':'离职',
'2019-6-28':'',
},
});
</script>
效果：
| 时间插件效果 |
|---|
| [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zFcZR7Wo-1631796142627)(media/1561788783895.png)] |
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
