表单验证
主要包括必选字段、手机号、电子邮箱、两次输入是否一致等4种验证。
1、引入zepto.js。zepto.js下载地址:zepto.js
2、js代码库如下:
js
var 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");
}
});
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。