小米手机官网——12月3日中午12点开放抢购10万台小米手机3 js验证前端代码
<script>
var xmbook = {
elems: function(){
var _this = this;
_this.people= $("#xmpeople");
_this.peoMod= _this.people.find(".modify");
_this.peoTxt= _this.people.find(".txt");
_this.peoErr= _this.people.find(".err");
_this.peoCite= _this.people.find("cite");
_this.mproduct = $("#mproduct");
_this.prolbls = _this.mproduct.find("label");
_this.mphone = $("#mphone");
_this.mphoneInput = _this.mphone.find("input");
_this.set_gou = _this.mphone.find(".set_gou");
_this.macc = $("#macc");
_this.set_new = _this.macc.find(".set_new");
_this.maccInput = _this.macc.find("input");
_this.acclbl = _this.macc.find(".lblck");
_this.accmore = _this.macc.find(".more");
_this.accpack = _this.macc.find(".pack");
_this.code = $("#mcode");
_this.txtcode = $("#txtcode");
_this.btnpic = $("#btnpic");
_this.btncode = $("#btncode");
_this.btnsubmit = $("#btnsubmit");
_this.ajaxTag2 = "";
},
params: function(){
var _this = this;
_this.ajaxName = ""; // 个人信息 姓名 input属性value的值
_this.ajaxTel = ""; // 个人信息 电话 input属性value的值
_this.ajaxEmail = ""; // 个人信息 邮箱 input属性value的值
_this.ajaxType = ""; // 您要预约的产品 radio属性art的值
_this.ajaxMiPhone = ""; // 您要预约的产品 radio属性value的值
_this.ajaxVersion = ""; // 手机购买意向 radio属性xmtype的值
_this.ajaxTag2 = ""; // 配件套装 checkbox属性checked的值 选中为1，否则
为0 例如：1&&0&&0
_this.ajaxCode = ""; // 用户输入验证码的值
_this.ajaxAccessory2 = 0; // 备用，无实际意义
_this.is_set_gou = false; //
},
checkMobile: function(str){ // 验证手机号码
if (/^1[3|4|5|8][0-9]\d{8}$/.test(str)) {
return true;
}
else {
return false;
}
},
checkMail: function(str){ // 验证邮箱
if (/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+
$/.test(str)) {
return true;
}
else {
return false;
}
},
checkCn: function(str){ // 验证中文
if (/^[\u4e00-\u9fa5]+$/.test(str)) {
return true;
}
else {
return false;
}
},
charLen: function(str) { // 字符串长度，中文算作两个字符
return str.replace(/[^\x00-\xff]/g, "aa").length;
},
checkPeople: function(num, str, type) {
var _this = this;
switch (type) {
case "username":
if (!_this.checkCn(str)) {
_this.peoErr.eq(num).show();
}
else {
_this.peoErr.eq(num).hide();
}
break;
case "email":
if (!_this.checkMail(str)) {
_this.peoErr.eq(num).show();
}
else {
_this.peoErr.eq(num).hide();
}
break;
case "tel":
if (!_this.checkMobile(str)) {
_this.peoErr.eq(num).show();
}
else {
_this.peoErr.eq(num).hide();
}
break;
}
},
showFirstPack: function(){
var _this = this;
var txt =$(".set_gou[boolgou='boolgou']").find("input").eq(0).attr("xmtype");
//添加默认版本
var boolInput=$(".set_gou[boolgou='boolgou']").find("input");
var boolFlag=false;
for(var i=0;i<boolInput.length;i++){
var obj=boolInput.eq(i);
if(obj.attr("data-check")){
obj.attr("checked","checked");
boolFlag=true;
_this.ajaxVersion=obj.attr("xmtype");
txt=obj.attr("xmtype");
}
}
if(!boolFlag){
if($(".set_gou[boolgou='boolgou']").find("input")[0]){
var val= $(".set_gou[boolgou='boolgou']").find("input")[0];
$(val).attr("checked","checked");
$(val).attr("data-check","data-check");
_this.ajaxVersion =$(val).attr("xmtype");
}else{
_this.ajaxVersion = "";
}
}
//判断是否为米3，隐藏验证码
if(txt==="J"||txt==="K"||txt==="L" || txt==='N'){
_this.code.hide();
}else{
_this.code.show();
}
var arr = new Array();
var re = new RegExp("&&" + txt + "&&", "g");
_this.is_set_gou = false;
_this.macc.show();
_this.set_new.removeAttr("boolpack").hide();
_this.set_new.each(function(i,k){
if (re.test("&&" + $(this).attr("xmtype") + "&&")) {
_this.is_set_gou = true;
re.test("&&" + $(this).attr("xmtype") + "&&");
$(this).attr("boolpack", "boolpack").show();
}
});
if(!_this.is_set_gou){
_this.macc.hide();
}
},
loadEvent: function(){
var _this = this;
_this.showFirstPack();
if (!_this.is_set_gou) {
_this.set_new.removeAttr("boolpack");
_this.macc.hide();
}
// 刷新时初始化默认选择的radio
_this.mproduct.find("input").each(function(){
if(!!$(this).attr("data-check")){
$(this).attr("checked","checked");
}
});
// 获取默认时的ajax值
_this.prolbls.each(function(i, k) {
if ($(this).find("input").attr("checked") == "checked") {
_this.ajaxType = $(this).find("input").attr("art");
_this.ajaxMiPhone = $(this).find("input").attr("value");
}
});
},
peopleEvent: function(){ // 个人信息事件
var _this = this;
_this.peoMod.click(function() { // 修改个人信息
_this.people.addClass("peopedit");
_this.people.show();
});
var showedit=false;
_this.peoTxt.each(function(i, k) {
$(this).focusout(function() { // 输入框失去焦点时校验是否正确
_this.checkPeople(i, $(this).val(), $(this).attr("xmtype"));
});
var val=$(this).val();
if(val==""){
showedit=true;
}
});
if(showedit){
_this.people.addClass("peopedit");
_this.people.show();
}
},
productEvent: function(){ // 您要预约的产品的点击事件
var _this = this;
_this.prolbls.click(function(){
var proArt = $(this).find("input").attr("art");
if(_this.ajaxType !== proArt ){
_this.set_gou.hide().removeAttr("boolgou");
_this.mphoneInput.removeAttr("checked");
_this.maccInput.removeAttr("checked");
_this.set_gou.hide();
$(".set_gou[art='"+ proArt +"']").attr("boolgou", "boolgou").show();
var proArtFirst = proArt.split("&&")[0];
_this.set_new.hide();
if(!!($(".set_new[art='" + proArtFirst +"']")[0])){
_this.macc.show();
$(".set_new[art='" + proArtFirst + "']").eq(0).show();
}
else{
_this.macc.hide();
}
_this.showFirstPack();
_this.ajaxType = proArt;
_this.ajaxMiPhone = $(this).find("input").attr("value");
}
//判断，产品提示的出现
var tip_detail=$(this).siblings(".detail_tip");
if(tip_detail){
$(".detail_tip").hide();
tip_detail.show();
}
});
},
phoneEvent: function(){ // 您的手机购买意向点击事件
var _this = this;
$(".set_gou").find("label").click(function(){
var txt = $(this).find("input").attr("xmtype");
//添加data-check属性，表示历史属性，以前选中过。
$(this).parent().siblings("li").find("input").removeAttr("data-check");
$(this).find("input").attr("data-check","data-check");
var arr = new Array();
var re = new RegExp("&&" + txt + "&&", "g");
_this.is_set_gou = false;
_this.macc.show();
_this.set_new.removeAttr("boolpack").hide();
_this.set_new.each(function(i,k){
if (re.test("&&" + $(this).attr("xmtype") + "&&")) {
_this.is_set_gou = true;
re.test("&&" + $(this).attr("xmtype") + "&&");
//console.log(re.test("&&" + $(this).attr("xmtype") + "&&"));
$(this).attr("boolpack", "boolpack").show();
}
});
if (!_this.is_set_gou) {
_this.set_new.removeAttr("boolpack");
_this.macc.hide();
}
_this.ajaxVersion = txt;
//判断是否为米3，隐藏验证码
if(txt==="J"||txt==="K"||txt==="L"|| txt==='N'){
_this.code.hide();
}else{
_this.code.show();
}
});
},
otherEvent: function(){
var _this = this;
_this.btncode.click(function() { // 验证码换一换点击事件
_this.txtcode.attr("value", "");
var t = new Date().getTime();
var str =
"http://a.hd.xiaomi.com/register/codeverify/operate/authcode/a/8/_r/" + t;
_this.btnpic.attr("src", str);
});
$("#btncode2").click(function() { // 验证码换一换点击事件
$("#authCode2").attr("value", "");
var t = new Date().getTime();
var str =
"http://a.hd.xiaomi.com/register/codeverify/operate/authcode/a/8/_r/" + t;
$("#img_captcha2").attr("src", str);
});
_this.accmore.each(function(i, k) { // 本次特价配件套装了解更多点击事件
$(this).click(function() {
_this.accpack.eq(i).slideToggle();
});
});
//判断下一步按钮
$("#nextStep").click(function(){
var proVal=_this.mphone.find("input:checked").attr("xmtype");
if(proVal==="J"||proVal==="K"||proVal==="L"|| proVal==='N'){
//选中米3，为下一步按钮
_this.submitEvent(1);
}else{
_this.submitEvent(3);
}
return false;
});
$('#list').find('li').on('click', function(){
$('#list li').removeClass('select');
$(this).addClass('select');
if($('#list').find('li').hasClass("select"))
{
$('#btn').addClass('selectbtn');
}
})
$('#list').find('li').on('mouseenter', function(){
$('#list li').removeClass('hover');
$(this).addClass('hover');
$(this).css("cursor","pointer");
if($('#list').find('li').hasClass("select"))
{
$('#btn').addClass('selectbtn');
}
})
$('#list').find('li').on('mouseleave', function(){
$('#list li').removeClass('hover');
$(this).removeClass('hover');
if($('#list').find('li').hasClass("select"))
{
$('#btn').addClass('selectbtn');
}
})
},
modal:function(bool){
if(bool){
$("html").addClass("js_modal");
var mboxbg = $("#boxbg")[0];
var mbox = $("#box")[0];
mboxbg.style.height =
document.documentElement.scrollHeight+"px";
mboxbg.style.width =
document.documentElement.clientWidth+"px";
mboxbg.style.display = "block";
mbox.style.display = "block";
$(window).on("resize", function() {
mboxbg.style.height =
document.documentElement.scrollHeight+"px";
mboxbg.style.width =
document.documentElement.clientWidth+"px";
});
}
else{
$("html").removeClass("js_modal");
var mboxbg = $("#boxbg")[0];
var mbox = $("#box")[0];
mboxbg.style.display = "none";
mbox.style.display = "none";
$(window).off("resize");
}
},
submitEvent: function(isMi3){
var _this = this;
//_this.btnsubmit.click(function() { // 提交按钮
var isphonerad = false;
_this.ajaxName = $("#username").val();
_this.ajaxEmail = $("#email").val();
_this.ajaxTel = $("#tel").val();
// 判断个人信息
_this.peoTxt.each(function(i, k) {
_this.checkPeople(i, _this.peoTxt.eq(i).val(), _this.peoTxt.eq(i).attr
("xmtype"));
});
if (!(_this.checkCn(_this.ajaxName) && _this.checkMail(_this.ajaxEmail) &&
_this.checkMobile(_this.ajaxTel))) {
return;
}
//购买意向
if (!!$(".set_gou[boolgou='boolgou']").find("ul").is(":visible")) {
$(".set_gou[boolgou='boolgou']").find("input").each(function(i, k) {
if (!!$(this).attr("checked")) {
isphonerad = true;
}
});
if (!isphonerad) {
$(".set_gou[boolgou='boolgou']").find(".err").show();
return;
}
else {
$(".set_gou[boolgou='boolgou']").find(".err").hide();
}
}
//判断购买产品是否为盒子
var isMibox=0;
var isMiphone=0;
_this.prolbls.each(function(i, k) {
if ($(this).find("input").attr("checked") == "checked") {
var type = $(this).find("input").attr("art");
if(type.indexOf("mibox")!==-1){
isMibox=1;
}
if(type.indexOf("miphone")!==-1 || type.indexOf("m3")!==-1 ||
type.indexOf("m2s")!==-1){
isMiphone=1;
}
}
});
if ($(".set_new[boolpack='boolpack'] input").is(":visible")) {
$(".set_new[boolpack='boolpack'] input").each(function(i, k) {
if ($(this).attr("checked")) {
_this.ajaxTag2 += "1" + "&&";
}
else {
_this.ajaxTag2 += "0" + "&&";
}
});
_this.ajaxTag2 = _this.ajaxTag2.replace(/&&$/,"");
}
_gaq.push(["_trackEvent", "活动", "预约页", "提交"]);
/*
flag==1表示打开选择小米手机3喜欢哪一点的一页
flag==2表示小米手机3提交表单
flag==3表示预约其他产品提交表单
*/
var accessoryPPValue=$("#paPP").prop("checked") ? 1 : 0;
var authcodeValue="";
if(isMi3==2||isMi3==3){
if(isMi3==2){
if( $('#list').find('.select').length === 0 ){
alert('请选择你最喜欢小米手机3哪一点？');
return;
}
accessoryPPValue = $('#list').find('.select').attr('value');
var authcode = $("#authCode2");
if (authcode.val().length < 4 || authcode.val().length > 7){
$('#authcodeTip2').show();
return;
};
authcodeValue = authcode.val();
}else{
// 验证码
if (_this.txtcode.val().length < 4 || _this.txtcode.val().length > 7)
{
_this.code.find(".err").show();
return;
}
authcodeValue = _this.txtcode.val();
}
_this.ajaxCode = authcodeValue;
var postData = {
_ia: 1,
_a: "20131126",
_aff: "1349150",
username: _this.ajaxName,
mobile: _this.ajaxTel,
email: _this.ajaxEmail,
type: _this.ajaxType,
tag3:accessoryPPValue,
version: _this.ajaxVersion,
tag2: _this.ajaxTag2,
mibox: isMibox,
miphone: isMiphone,
"authcode_m2s_20131126th_and_box_20131126th": _this.ajaxCode
};
$.ajax({
type: "POST",
dataType: "json",
url: "http://a.hd.xiaomi.com/register/dobook/a/8",
data: postData,
success: function(data) {
if ((typeof data == "object") && data.info) {
if (data.info === "waitingUrl") {
location.href =
"http://a.hd.xiaomi.com/register/waiting/a/8";
} else if (data.info === "authcodeErrorUrl") {
location.href =
"http://p.www.xiaomi.com/open/common/tip_tooMuchTry.html"; //验证码错误次数过多
} else if (data.info === "authcodeError") {
//验证码输入有误或已过期，请重新验证
$('#authcodeTip2').text("验证码输入有误或已过期，请重新验证
").show();
$('#authcodeTip1').show();
} else {
//输入信息错误
$('#authcodeTip2').text("输入信息错误").show();
$('#authcodeTip1').show();
}
}
return;
},
error: function(data) {
if(isMi3==2){
$('#authcodeTip2').text("提交失败，请重试").show();
}else{
_this.code.find(".err").text("提交失败，请重试").show();
}
return;
},
beforeSend: function() {
}
});
}else if(isMi3==1){
$('.header').show();
$('#formBox').hide();
$(".bookbtm").hide();
}
},
init: function(){
var _this = this;
_this.elems();
_this.loadEvent();
_this.peopleEvent();
_this.productEvent();
_this.phoneEvent();
_this.otherEvent();
// _this.submitEvent();
}
}
xmbook.init();
xmbook.modal("1");
</script>
