zepto表单验证以及单选框的选中状态切换

表单验证

主要包括必选字段、手机号、电子邮箱、两次输入是否一致等4种验证。
1、引入zepto.js。zepto.js下载地址：zepto.js
2、js代码库如下：

jsvar validate = {
        require: function(elem, errmsg){
            elem = $(elem);
            elem.on("change", function(){
                var value = this.value;
                alert("value:"+value);
                var tipCon = $(this).parents("td").find("span");
                alert("tipCon:"+tipCon.length);
                if(value == ""){
                    tipCon.html(errmsg);
                }else{
                    tipCon.html("");
                }
            });
        },
        phone: function(elem, errmsg){
            elem = $(elem);
            var tipCon = elem.parent().find("span");
            elem.on("change", function(){
                var value = $.trim(this.value);
                if(!/^(0|86|17951)?(13[0-9]|15[012356789]|18[0-9]|14[57]|17[0-9])[0-9]{8}$/.test(value)){
                    tipCon.html(errmsg);
                }else{
                    tipCon.html("");
                }
            });
        },
        email: function(elem, errmsg){
            elem = $(elem);
            var tipCon = elem.parent().find("span");
            elem.on("change", function(){
                var value = $.trim(this.value);
                if(!/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/.test(value)){
                    tipCon.html(errmsg);
                }else{
                    tipCon.html("");
                }
            });
        },
        compare: function(elem1, elem2, errmsg){
            elem1 = $(elem1);
            elem2 = $(elem2);
            var tipCon = elem2.parent().find("span");
            elem2.on("change", function(){
                var value1 = $.trim(elem1[0].value);
                var value2 = $.trim(this.value);
                if(value1 !== value2){
                    tipCon.html(errmsg);
                }else{
                    tipCon.html("");
                }
            });
        }
    };

3、该类的使用办法：

js//验证
    (function(){
        //验证必填字段
        var requireArr = [
            {
            id: "user",
            errmsg: "姓名不能为空"
            },
            {
                id: "company",
                errmsg: "公司名称不能为空"
            },
            {
                id: "area",
                errmsg: "国家/地区不能为空"
            }
        ];
        $.each(requireArr, function(i, obj){
            validate.require("#"+obj.id, obj.errmsg);
        });
        validate.phone("#phone", "手机号码格式不正确");
        validate.email("#email", "电子邮箱格式不正确");
        validate.compare("#email", "#email-c", "两次邮箱不一致");
});

单选按钮状态切换

截图：

1、html代码

html<label for="bill_y" class="r-label checked"><label for="bill_n" class="r-label"><input type="radio" name="bill" id="bill_n"/>否</label>

2、css代码

input[type=radio]{
    width: .975rem;
    visibility: hidden;
    vertical-align: middle;
  }
  .r-label{
        display: inline-block;
        height: 1.55rem;
        background: url("../img/radio.png") left center no-repeat;
        background-size: 0.975rem 0.975rem;
        padding-left: 0.45rem;
  }
  .r-label.checked{
    background: url("../img/radio-checked.png") left center no-repeat;
    background-size: 0.975rem 0.975rem;
  }

3、js代码

//处理单选框选中
$(".r-label").on("tap",function(){
    var $this = $(this);
    var $radio = $(this).find("input[type=radio]");
    var checked = $radio.prop("checked");
    if(!checked && !$this.hasClass("checked")){
        $(".r-label").removeClass("checked");
        $this.addClass("checked");
    }
});