体系课

回到首页 个人中心 反馈问题 注册登录
下载APP
首页 课程 实战 体系课 手记 专栏 慕课教程

空白阻止提交

来源：3-1 改写搜索框功能--搜索验证

七十七个七

2019-04-17 17:24:51

空白的时候阻止提交失败呢？

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>幕淘网</title>

<link rel="stylesheet" type="text/css" href="css/base.css">

<link rel="stylesheet" type="text/css" href="css/common.css">

<link rel="stylesheet" type="text/css" href="css/index.css">

</head>

<body>

<!-- 头部 -->

<div class="header">

<div class="container">

<h1 class="fl">

<a href="./index.html" class="header-logo text-hidden">慕课网</a>

</h1>

<div class="search fl" id="header-search">

<form action="http://s.taobao.com/search" class="search-form">

<input type="text" name="q" placeholder="灵魂美食一元抢" autocomplete="off" class="search-inputbox fl" />

<input type="submit" value="搜索" class="search-btn fl" />

</form>

<ul class="search-layer">

<!-- <li class="search-layer-item text-ellipsis">111</li>

<li class="search-layer-item text-ellipsis">111</li>

<li class="search-layer-item text-ellipsis">111</li> -->

</ul>

</div>

<div class="cart fr"></div>

</div>

</div>



<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script>

window.jQuery||document.write('<script src="js/jquery-1.12.4.js"><\/script>');

</script>


<script type="text/javascript" src="js/search.js"></script>

<script type="text/javascript" src="js/index.js"></script>

</body>

</html>

/*css reset*/

/*清除内外边距*/

body, h1, h2, h3, h4, h5, h6, p, hr, /*结构元素*/

ul, ol, li, dl, dt, dd, /*列表元素*/

form, fieldset, legend, input, button, select, textarea, /*表单元素*/

th, td, /*表格元素*/

pre {

padding: 0;

margin: 0;

}


/*重置默认样式*/

body, button, input, select, textarea {

/*font: 12px/1 微软雅黑, Tahoma, Helvetica, Arial, 宋体, sans-serif;*/

color: #333;

font: 12px/1 "Microsoft YaHei", Tahoma, Helvetica, Arial, SimSun, sans-serif;

}

h1, h2, h3, h4, h5, h6 {

font-size: 100%;

font-weight: normal;

}

em, i {

font-style: normal;

}


a {

text-decoration: none;

}

li {

list-style-type: none;

vertical-align: top;

}

img {

border: none;

/*display: block;*/

vertical-align: top;

}

textarea {

overflow: auto;

resize: none;

}

table {

border-spacing: 0;

border-collapse: collapse;

}


/*常用公共样式*/

.fl {

float: left;

display: inline;

}

.fr {

float: right;

display: inline;

}

.cf:before,

.cf:after {

content: " ";

display: table;

}

.cf:after {

clear: both;

}

.cf {

*zoom: 1;

}

/* 公共样式 */

.container{

width: 1200px;

margin: 0 auto;

}

.link{

color: #4d555d;

}

.link:hover{

color: #f01414;

}

.text-hidden{

text-indent: -9999px;

overflow: hidden;

}

.text-ellipsis{

text-overflow: ellipsis;

white-space: nowrap;

overflow: hidden;

}


/* icon字体 */

@font-face {

font-family: "iconfont";

  src: url('font/iconfont.eot?t=1555305727423'); /* IE9 */

  src: url('font/iconfont.eot?t=1555305727423#iefix') format('embedded-opentype'), /* IE6-IE8 */

  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAOIAAsAAAAAB3wAAAM8AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgqCWIIwATYCJAMMCwgABCAFhG0HQRuBBsgekiRCQAEFqViALuEORVCtYT27exBClyhEz+WjAGVUyke+cB/55aNeWBSOQCggoe/SZq6BWB8kPpCOjLL8VIUQylQ0PTBVmXRvD7iR78KNPbMixTPgcvrTXmDUAeUy5rI5dWGAcUCB7mFjgQRcIAl6w9hNlAdxnECvaR3ojkZNmAFWBRgXiDtF4sCacik19aEV6pKlBeKBSZvWpVvAU/79+AtbYQVJlQFMPb4dKcKQH74vfQxLO8MCSlCPF4C2iowVoBA3paEzhjCzwqDXMRnry2tFSGPFqx1c5Rpq+IdHEkQNoLYfLEjZxA8fVsXmPqLmrGszqMWqO+AJAG7cVqEa7W93GY3C+vCs3cv2bAjNnE0evmtpcMZOwXPmRWL+nv37T9vds+zrH5eeczhmwtzHm8mll0I7L8Kh+48fZnbvD7t2PovtPa+qex1+0Mu9/nn8wIXcqXOHzrY4fX7Zhazkb63TZXaN7T1bds/zzJ7hnlWNDX/7RgKvA+QpUAXy9NthGPA22cXMk2sLGp69cr+PFU64BiS6u4rd3vgmDLzYaI6PvHV7XNDdJP+nnIqzlI25XNXub8rV+GR08I1h+uExx7q8Ma9+6PKn9ZeahdEZbV53Adj4b7B9twzQj2i/sWabd+Zl70RYQh6ZxTvQrTPqDZUf8hufV5+LPQP+tQ4jwPcXPatc064atBKt1a+/oQBdE/S6FrhzsVVY5eezC6abU4gKPaoDEBv1pr9t4hZzoTURI2lMIWvNkIVdQaXPDmqtXfRaNnp1nzGUQRQbsGSVgDDsCpJBb5ANu00W9jUqk36jNhwG9DqJwJZ95kKxD6eYY1hEfANShEKeIC+zB/XTsFTJcjSp5fwsTMtKHHXt1CWbH43zmI4xo1wrdWOMIEILOTRKOA1nswVUpAUVC6yTzFixX+fOpOxFnYRCDuwOURiHwUQIrwGiEBTkEdqdsec+Pw0mqcji0Jq2juwsGFWm9I901UmXFuRoU75V27VcUlZL0g3DEAhBFeQgo4RBWFZWAVIsH6TCBEwnco9UUT+dYSfS1tRpfkvu+fZALzAth15n0Bmh/17hspxKivKsULFKuLyuIsgYAA==') format('woff2'),

  url('font/iconfont.woff?t=1555305727423') format('woff'),

  url('font/iconfont.ttf?t=1555305727423') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */

  url('font/iconfont.svg?t=1555305727423#iconfont') format('svg'); /* iOS 4.1- */

}


.icon{

  font-family: "iconfont" !important;

  font-size: 14px;

  font-style: normal;

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

}


/* showHide */

.fadeOut {

    visibility: hidden!important;

    opacity: 0!important;

}

.slideUpDownCollapse {

    height: 0 !important;

    padding-top: 0 !important;

    padding-bottom: 0 !important;

}

.slideLeftRightCollapse {

    width: 0 !important;

    padding-left: 0 !important;

    padding-right: 0 !important;

}


/* 下拉菜单公共组件 */

.dropdown{

position: relative;

}

.dropdown-toggle{

position: relative;

z-index: 2;

}

.dropdown-arrow{

display: inline-block;

line-height: 1px;

vertical-align: middle;

}

.dropdown-layer{

position: absolute;;

display: none;

z-index: 1;

}

.dropdown-left{

left: 0;

right: auto;

}

.dropdown-right{

right: 0;

left: auto;

}

[class*="-active"] .dropdown-arrow{

     -o-transform: rotate(180deg);

    -ms-transform: rotate(180deg);

   -moz-transform: rotate(180deg);

-webkit-transform: rotate(180deg);

transform: rotate(180deg);

}

.transition{

-o-transition: all 0.5s;

-ms-transition: all 0.5s;

   -moz-transition: all 0.5s;

-webkit-transition: all 0.5s;

transition: all 0.5s;

}

.dropdown-loading{

width: 32px;

height: 32px;

background: url(../img/loading.gif) no-repeat;

margin: 20px;

}


/* 搜索框公共组件 */

.search{

position: relative;

border: 1px solid #cfd2d5;

}

.search-inputbox{

width: 585px;

height: 40px;

line-height: 40px;

padding: 0 10px;

border: none;

background: #fff;

}

.search-btn{

width: 73px;

height: 40px;

line-height: 40px;

background: #07111b;

color: #fff;

text-align: center;

cursor: pointer;

border: none;

}

.search-layer{

display: none;

position: absolute;

top: 100%;

left: -1px;

width: 100%;

background: #fff;

border: 1px solid #cfd2d5;

}

.search-layer-item{

height: 24px;

line-height: 24px;

padding: 0 10px;

cursor: pointer;

}

.search-layer-item:hover{

background: #f3f5f7;

}

/* nav-site站点导航样式 */

.nav-site{

width: 100%;

background: #f3f5f7;

}

.nav-site .container{

height: 44px;

line-height: 44px;

border-bottom: 1px solid #cdd0d4;

}

.nav-site-login{

color: #f01414;

margin-left: 15px;


}

.nav-site-mobile,

.nav-site-signup{

margin-left: 10px;

}

.nav-site-category{

margin: 0 10px;

}

.nav-site-service{

margin-right: 15px;

}


/* 下拉菜单样式 */

.menu .dropdown-toggle{

display: block;

height: 100%;

padding: 0 13px 0 12px;

border-left: 1px solid #f3f5f7;

border-right: 1px solid #f3f5f7;

}

.menu .dropdown-arrow{

margin-left: 5px;

}

.menu .dropdown-layer{

top: 43px;

background: #fff;

border: 1px solid #cdd0d4;

}

.menu-item{

display: block;

height: 30px;

line-height: 30px;

color: #4d555d;

white-space: nowrap;

padding: 0 12px;

}

.menu-item:hover{

background: #f3f5f7;

}

.menu-active .dropdown-toggle{

background: #fff;

border-color: #cdd0d4;

}


/* header头部区域样式 */

.header{

width: 100%;

height: 124px;

background: #f3f5f7;

}

.header-logo{

display: block;

width: 136px;

height: 48px;

background: url(../img/header-logo.png) no-repeat;

margin-left: 15px;

}

.header-logo,

.header .search,

.header .cart{

margin-top: 36px;

}

.header .search{

margin-left: 145px;

}

(function($){

'use strict';


function Search($elem,options){

this.$elem=$elem;

this.options=options;


this.$input=this.$elem.find('.search-inputbox');

  this.$form=this.$elem.find('.search-form');

  this.$layer=this.$elem.find('.search-layer');


  this.$elem.on('click','search-btn',$.proxy(this.submit,this));

  if(this.options.antocomplete){

  this.autocomplete();

  }


}

Search.DEFAULTS={

autocomplete:false,

url:'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=',

css3:false,

js:false,

animation:'fade'

};

Search.prototype.submit=function(){

if($.trim(this.$input.val())===''){

return false;

}

this.$form.submit();

};

Search.prototype.autocomplete=function(){

this.$input.on('input',$.proxy(this.getData,this));

};

Search.prototype.getData=function(){

var self=this;

$.ajax({

url:this.options.url+this.$input.val(),

dataType:'jsonp'

}).done(function(data){

self.$elem.trigger('search-getData',[data]);

}).fail(function(){

self.$elem.trigger('search-noData');

});

};

Search.prototype.showLayer=function(){

};

Search.prototype.hideLayer=function(){

};


$.fn.extend({

search:function(option){

return this.each(function(){

var $this=$(this),

search=$this.data('search'),

options=$.extend({},Search.DEFAULTS,$this.data(),typeof option==='object'&&option);

if(!search){

$this.data('search',search=new Search($this,options));

}

if(typeof search[option]==='function'){

search[option]();

}

});

}

});

})(jQuery);


// (function($){

// 'use strict';


// var $search=$('.search'),

// $input=$('.search').find('.search-inputbox'),

// $btn=$('.search').find('.search-btn'),

// $form=$('.search').find('.search-form'),

// $layer=$('.search').find('.search-layer');


// // 验证

// $form.on('submit',function(){

// if($.trim($input.val())==='')return false;

// });


// // 自动完成

// $input.on('input',function(){

// var url = 'https://suggest.taobao.com/sug?code=utf-8&_ksTS=1484204931352_18291&callback=jsonp18292&k=1&area=c2c&bucketid=6&q=' + encodeURIComponent($.trim($input.val()));

// $.ajax({

// url:url,

// dataType:'jsonp'

// }).done(function(data){

// console.log(data);

// var html='',

// dataNum=data['result'].length,

// maxNum=10;

// if(dataNum===0){

// $layer.hide().html('');

// return;

// }

// for(var i=0;i<dataNum;i++){

// if(i>=maxNum)break;

// html+='<li class="search-layer-item text-ellipsis">'+data['result'][i][0]+'</li>'

// }

// $layer.html(html).show();

// }).fail(function(){

// $layer.hide().html('');

// }).always(function(){

// console.log('why always me!');

// });

// });


// $layer.on('click','.search-layer-item',function(){

// $input.val(removeHtmlTags($(this).html()));

// $form.submit();

// })


// $input.on('focus',function(){

// $layer.show();

// }).on('click',function(){

// return false;

// });

// $(document).on('click',function(){

// $layer.hide();

// });


// function removeHtmlTags(str){

// return str.replace(/<(?:[^>'"]|"[^"]*"|'[^']*')*>/g,'');

// }

// })(jQuery);

(function($){

'use strict';

// 下拉菜单

$('.dropdown').dropdown({

css3:true,

js:false,

});

$('.dropdown').on('dropdown-show',function(e){

var $this=$(this),

dataLoad=$this.data('load');

if(!dataLoad)return;


if(!$this.data('loaded')){

var $layer=$this.find('.dropdown-layer'),

html='';

$.getJSON(dataLoad,function(data){

console.log(data);

for(var i=0;i<data.length;i++){

html+='<li><a href="'+data[i].url+'"target="_blank" class="menu-item">'+data[i].name+'</a></li>'

}

$layer.html(html);

$this.data('loaded',true);

});

};

});

// 搜索框

var $headerSearch=$('#header-search');

$headerSearch.on('search-getData',function(e,data){

console.log(e.type);

console.log(data);

}).on('search-noData',function(e){

console.log(e.type);

});

$headerSearch.search({

autocomplete:true,

css3:false,

js:false,

animation:'fade'

})

})(jQuery);



// 


写回答

1回答

好帮手慕星星

2019-04-17

已采纳

同学你好，是search.js按钮没有选中，所有submit事件也就没有绑定上，如下：

http://img.mukewang.com/climg/5cb6fb8500012d1610960270.jpg

前面需要添加点。

可以重新测试下，祝学习愉快！

0

0 学习 · 14456 问题

查看课程

相似问题

阻止表单提交

回答 1

我用淘宝时，输入框有自动提示信息，点提交也是会提交的

回答 2

为什么清除空格还是能提交，不知道哪里错了。。

回答 3

回答 1

提交会报错

回答 2

打开慕课网App查看更多内容