最近使用WEUI的一些小结

最近使用WEUI的一些小结

最近我在搞企业微信里的东西,在这里记录我遇到的问题,小结下一些实用的方法.

1.weui的日期控件

html

<div class="referRow">
        <div class="referl">
          <label for="" class="weui-label"><span class="space"></span>转入日期</label>
        </div>
        <div class="weui-cell__bd">
           <input type="text" id='appointAcceptDate'/>
        </div>
</div>

js

    //获取当天的日期
    var oDate = new Date();
    var year = oDate.getFullYear();
    var month = oDate.getMonth()+1;
    var day= oDate.getDate();
    var jinTian=year+"/"+month+"/"+day;
    var jinTianArr=[];
    jinTianArr.push(jinTian);
    //设置默认值(页面初始化值)
    $("#appointAcceptDate").val(jinTian);
    //初始化日历控件
    $("#appointAcceptDate").calendar({
        multiple:false,//   是否多选
        inputReadOnly:true,//  是否自动在 input 元素上加上只读属性
        dateFormat:'yyyy/mm/dd',//日期格式
        minDate:jinTian,//最小值
        dayNames:['周日', '周一', '周二', '周三', '周四', '周五', '周六'] ,
        monthNames:['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月']
    });
    //这里$("#appointAcceptDate").calendar("setValue", ["2012/12/12"]);似乎设不到值所以我在前面用了jquery的写法设值...

WEUI的官网api网址:http://jqweui.com/extends#calendar

2 一些验证方法

2.1 验证名字

//判断名字是否含特殊字数
checkName=function(name){     
    if(!name.match(/^[A-Za-z]+$/) && !name.match(/^[\u4e00-\u9fa5]{0,}$/)){           
        return false;   
    }else{
        return true;
    } 
}

2.2 身份证号验证

//验证身份证
checkCardID=function(sId){
    var iSum=0 ;
    var info="" ;
    if(!/^\d{17}(\d|x)$/i.test(sId)) return false;
    sId=sId.replace(/x$/i,"a");
    if(parseInt(sId.substr(0,2))==null) return false;
    var sBirthday=sId.substr(6,4)+"-"+Number(sId.substr(10,2))+"-"+Number(sId.substr(12,2));
    var d=new Date(sBirthday.replace(/-/g,"/")) ;
    if(sBirthday!=(d.getFullYear()+"-"+ (d.getMonth()+1) + "-" + d.getDate()))return false;
    for(var i = 17;i>=0;i --) iSum += (Math.pow(2,i) % 11) * parseInt(sId.charAt(17 - i),11) ;
    if(iSum%11!=1) false;
    return true;
}

2.3 验证手机号码

//验证手机号码
checkPhone=function (phone){ 
    if(/^1[34578]\d{9}$/.test(phone)){ 
        return true; 
    }else{
        return false;
    }
}

2.4 weui里增加与移除表单错误提示

我这的html结构:

<div class="weui-cell">
  <div class="weui-cell__hd"><label for="" class="weui-label">
    <span class="red space">*</span>联系电话</label></div>
  <div class="weui-cell__bd">
    <input class="weui-input"  name="contact" id="contact" type="text" pattern="[0-9]*" value="" placeholder="请输入患者联系电话">
  </div>
</div>

//增加错误提示
addError=function(e){
    $(e).parent().parent().addClass("weui-cell_warn");
    $(e).parent().after(errorDiv);
    $(e).css({"color":"red"});
}
//移除错误提示
removeError=function(e){
    $(e).parent().nextAll('div').remove();
    var divArr=$(e).parent().nextAll('div'); 
    if(divArr.length>0){
        $(e).parent().parent().removeClass();
        $(e).parent().parent().addClass("weui-cell");
        $(e).parent().nextAll('div').remove();
    }
    $(e).css({"color":"#333"});
}

效果图:

2.5 弹出提示,延时后续操作

$.toast("操作成功!");
setTimeout(function () {
    //后续操作
},1000);