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)'
}
作者:Yoby  创建时间:2020-07-22 21:30
 更新时间:2024-12-05 13:26
上一篇:
下一篇: