一些js表单验证代码
常用表单验证
此方法暂未封装o
需要用到jQuery
可在线引入或者本地引入
推荐地址:
http://www.bootcdn.cn/
Html 代码
<div class="content">
<div class="content_box">
<div class="name">
<input type="text" placeholder="真实姓名" id="name">
</div>
<div class="sex row">
<div class="col-6 active">男</div>
<div class="col-6">女</div>
</div>
<div class="phone">
<input type="tel" placeholder="手机号" id="phone">
</div>
<div class="phone email">
<input type="email" placeholder="邮箱" id="email">
</div>
<div class="phone city">
<input type="text" placeholder="详细地址" id="city">
</div>
<button id="button"></button>
<input type="text" class="mui-1" placeholder="课程id" name="idkc" id="idkc" style="display:none"
value="{$id}">
<input type="text" class="mui-1" placeholder="课程标题" name="title" id="title" style="display:none"
value="{$title}">
</div>
</div>
1.手机号验证
// 手机号验证
$("#phone").blur(function () {
if (phone == "") {
} else {
var phone = $("#phone").val();
if (!(/^1[34578]\d{9}$/.test(phone))) {
alert("手机号码有误,请重填");
return false;
}
}
});
2.邮箱验证
$("#email").blur(function () {
if (email == "") {
// alert("邮箱不可以为空")
} else {
var mail = $("#email").val();
var filter = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
if (filter.test(mail)) return true;
else {
alert('您的电子邮件格式不正确');
return false;
}
}
});
3.input框验证不能为空以及ajax发送;
$("#button").click(function () {
if (name == "") {
alert("用户姓名不可以为空")
} else if (phone == "") {
alert("手机号不可以为空")
}
else if (email == "") {
alert("邮箱不可以为空")
}
else if (city == "") {
alert("地址不可以为空")
} else {
$.post("http://b1.qu48.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=sns.xiguan.baokecheng", {
sex: r,
realname: name,
mobile: phone,
email: email,
address: city,
idkc: idkc,
title: title
},
function (data) {
alert('报名成功');
location.href = 'http://b1.qu48.cn/app/index.php?i=2&c=entry&m=ewei_shopv2&do=mobile&r=sns.xiguan.mykecheng'
}), 'json';
}
})
4.解决第一个布局加类名方法(已封装)
$(document).ready(function(){
function firstActive(objs)
{
for(var i = 0; i < objs.length; i++)
{
objs[i].first().addClass("active");
}
}
function mouseIn(obj)
{
obj.siblings().removeClass("active");
obj.addClass('active');
}
function mouseOut(obj)
{
obj.addClass('active');
}
var objs =[$(".habit_title-box li"), $(".habit_new .habit_new_left .new_list li a"),$(".habit_title-t_l li"), $(".index .conter-h li")];
firstActive(objs);
//直接替换类名
});
未完结…..