小米官方在线预定——对代码实现的分析

 

 先来看下 我点击确认，效果

重点是 怎么会一直显示 验证码不正确啊。。。

代码下载

点击【确认】后台js实现的部分代码

 

 

从而看出，用了大量if等等。别的从技术角度我也不想评论什么，只是一种好奇，小米是怎么实现的，有没有我们要学习的东西。。。

具体【确认】后的代码 如下：

var submitData = function(){
				var username 	= $("#username"),
				tel      	 	= $("#tel"),
				email    	 	= $("#email"),
				authcode 	 	= $("#authcode"),
				accessory		= $("#" + tz2A),
				versionValue    = $('input[name=version]:checked').val(),
				miphone			= $('input[id=productA]:checked').val(),
				box			= $('input[id=productB]:checked').val(),
				miPhone,
				miBox;

				if (formBoxModifly === 0){
					if(username.val().length < 2) {
						username.focus();
						username.next().show();
						return;
					};
					if(!checkCn(username.val())) {
						username.focus();
						username.next().show();
						return;
					};
					if(!checkMail(email.val())) {
						email.focus();
						email.next().show();
						return;
					};
					if(!checkMobile(tel.val())) {
						tel.focus();
						tel.next().show();
						return;
					};
				};

				if(!versionValue && miphone != undefined) {
					$("#versionTip").show();
					return;
				};
				if(miphone == undefined && box == undefined) {
					alert('请至少选择一款产品预约');
					return;
				}
				if(miphone != undefined) {
					miPhone = 1;
				} else {
					miPhone = 0;
				}
				if(box != undefined) {
					miBox = 1;
				} else {
					miBox = 0;
				}
				$("#versionTip").hide();
				authcodeValue = '123456';
				var authcode = $("#authCode");
				if (authcode.val().length < 5){
					$('#authcodeTip').show();
					return;
				};

				authcodeValue = authcode.val();
				accessoryValue = accessory.prop("checked") ? 1 : 0;

				_gaq.push(['_trackEvent', '活动', '预约页', '提交']);
				$.ajax({
					type: 'POST',
					url: 'http://t.hd.xiaomi.com/?_a=20130419&_op=dobook&_v=1366873853',
					data: { _ia:1, _op:'dobook',_a:'20130419', _aff:'a7db33f', username:username.val(), mobile:tel.val(), email:email.val(), version:versionValue, accessory:accessoryValue,miphone:miPhone,box:miBox, authcode_m2s_3rd_and_box_7th:authcodeValue},
					success: function(d){
						if( (typeof d =='object') && d.info ) {
							if(d.info == '提交完成，请稍候') {
								location.href = 'http://t.hd.xiaomi.com/?_a=20130419&_op=waiting';
							} else {
								$('#authcodeTip').text(d.info).show();
							}
							return;
						}
					},
					error: function(d){
						$('#authcodeTip').text('提交失败，请重试').show();
						return;
					},
					beforeSend: function(){
					},
					dataType:'json'
				});
			},
			showMealSetIntro =  function(str){
				$("#" + str).show();
			},
			formBoxMod = function(){
				var formBox = $("#formBox");
				formBox.removeClass("formBoxModifly");
				formBoxModifly = 0;
			};
					</script>

 

如果你想看整个的代码，右键——查看源文件 这个我相信大家都知道。。。