weui
官方2.0https://cdn.bootcss.com/weui/2.0.0/style/weui.min.css
https://res.wx.qq.com/open/libs/weui/2.0.0/weui.min.css
2.0演示https://weui.io/
WEUI+演示http://weui.shanliwawa.top/
5.14下载 https://gitee.com/yoby/weui
js图标库
feather-icons图标库https://cdn.bootcss.com/feather-icons/4.21.0/feather.min.js
官方https://feathericons.com/
font-awesome 图标库https://cdn.bootcss.com/font-awesome/5.8.2/js/all.min.js
官方http://www.fontawesome.com.cn/
阿里云图标库https://www.iconfont.cn/
animate动画库
cdnhttps://cdn.bootcss.com/animate.css/3.7.1/animate.min.css
抓饭文档http://www.animate.net.cn/
swiper4
中文文档https://www.swiper.com.cn/usage/index.html
https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.min.css
https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.min.js
演示https://www.swiper.com.cn/demo/index.html
侧滑
https://github.com/mango/slideout
https://cdn.bootcss.com/slideout/1.0.1/slideout.min.js
bootstarp
中文文档https://v3.bootcss.com/
https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css
https://cdn.bootcss.com/twitter-bootstrap/3.3.7/js/bootstrap.min.js
以下代码解决模态框相互调用bug
$(document).ready(function() {
$(document).on('show.bs.modal', '.modal', function() {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
$('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);
});
});
表单验证
官方https://github.com/jaywcjlove/validator.js
var validator = new Validator('form1',[
{
name: 'openid',
display:"不能为空|必须正数",
regexp_num:/^[0-9]+$/,
rules: 'required|regexp_num'
}
],function(obj,evt){
if(obj.errors.length>0){
var error_str = '';
for (var i = 0; i < obj.errors.length; i++) {
error_str =obj.errors[i].message;
obj.errors[i].element.setAttribute('style', 'border:1px solid red')
alert(error_str);return false;
}
}
})
validator.validate();//验证失去焦点
- `name` -> input 中 `name` 对应的值
- `display` -> 验证错误要提示的文字 `{{这个中间是name对应的值}}`
- `rules` -> 一个或多个规则(中间用`|`间隔)
- `is_email` -> 验证合法邮箱
- `is_ip` -> 验证合法 ip 地址
- `is_fax` -> 验证传真
- `is_tel` -> 验证座机
- `is_phone` -> 验证手机
- `is_url` -> 验证URL
- `is_money` -> 金额格式验证
- `is_english` -> 字母验证
- `is_chinese` -> 中文验证
- `is_percent` -> 验证百分比
- `required` -> 是否为必填
- `max_length` -> 最大字符长度
- `min_length` -> 最小字符长度
- `same(field)` -> 指定字段内容是否相同
- `different(field)` -> 拒绝与某个字段相等,比如登录密码与交易密码情况
- `contains(field)` -> 直接判断字符串是否相等
- `accepted(field)` -> 用于服务条款,是否同意时相当有用,不限制checkbox与radio,有可能submit button直接附带value情况
{
//name 字段
name: 'email',
display:"你输入的不{{email}}是合法邮箱|不能为空|太长|太短",
// 验证条件
rules: 'is_email|max_length(12)'
// rules: 'valid_email|required|max_length(12)|min_length(2)'
}
更新时间:2024-12-05 13:26