验证是否显示红色的提交按钮
bindblur:function(){//jquery多级验证表单 var n = $('#item_name'); var p = $('#price'); var r = $('#reserve'); show(velidate());//页面加载之后先进行一次验证 //分别对三个需要验证的字段进行验证绑定，这里也可以写成一句代码 //$('#item_name','#price',$('#reserve')).on({blur:function(){show(veridate())}}); n.on({blur:function(){show(velidate())}}); p.on({blur:function(){show(velidate())}}); r.on({blur:function(){show(velidate())}}); function velidate(){//获取验证的结果 var flag = true; if(n.val()==){flag= false;} if(p.val()==0 || p.val()==){flag= false;} if(r.val()==0 || r.val()==){flag= false;} return flag; } function show(flag){//将验证结果反映到页面 if(flag){$(.down-complete-btn).css(background-color,#b02125);} else{$(.down-complete-btn).css(background-color,#8f8f8f);} }},
验证，在用户点击提交的时候调用，会定位需要完善的地方
check:function(){ var n = $('#item_name'); var p = $('#price'); var r = $('#reserve'); if(n.val()==){n.focus();return false;} if(p.val()==0 || p.val()==){p.focus();return false;} if(r.val()==0 || r.val()==){r.focus();return false;} return true;},
这一段是ajax提交和提交前调用验证
postdata:function(){ $(.down-complete-btn).click(function(){ if(add.check()){ $.ajax({ type : 'post', datatype : 'json', data : { id : $(#item_id).val(), name : $(#item_name).val(), price : $(#price).val(), photos : $(#photos).val(), }, cache : false, url : '/main/goods/add', success : function(data){ if(data.code==1){ alert(修改成功); }else{ console.log(data); } }, error : function(){ alert('网络异常'); } }); } });}
easy_form_validate.js
require.config({ paths:{ jquery:./lib/jquery-1.11.1.min, 'icon_upload':'./icon_upload' }});require(['jquery','icon_upload'],function(){ add.bindblur(); add.postdata();});var add = { bindblur:function(){//jquery多级验证表单 var n = $('#item_name'); var p = $('#price'); var r = $('#reserve'); show(velidate());//页面加载之后先进行一次验证 //分别对三个需要验证的字段进行验证绑定，这里也可以写成一句代码 //$('#item_name','#price',$('#reserve')).on({blur:function(){show(velidate())}}); n.on({blur:function(){show(velidate())}}); p.on({blur:function(){show(velidate())}}); r.on({blur:function(){show(velidate())}}); function velidate(){//获取验证的结果 var flag = true; if(n.val()==){flag= false;} if(p.val()==0 || p.val()==){flag= false;} if(r.val()==0 || r.val()==){flag= false;} return flag; } function show(flag){//将验证结果反映到页面 if(flag){$(.down-complete-btn).css(background-color,#b02125);}else{$(.down-complete-btn).css(background-color,#8f8f8f);} } }, check:function(){ var n = $('#item_name'); var p = $('#price'); var r = $('#reserve'); if(n.val()==){n.focus();return false;} if(p.val()==0 || p.val()==){p.focus();return false;} if(r.val()==0 || r.val()==){r.focus();return false;} return true; }, postdata:function(){ $(.complete-btn).click(function(){ if(add.check()){ $.ajax({ type : 'post', datatype : 'json', data : { id : $(#item_id).val(), name : $(#item_name).val(), summary : $(#summary).text(), price : $(#price).val(), store : $(#store).val(), mobiledetail : $(#detail).val(), photos : $(#photos).val(), brokerage : $(#brokerage).val(), flag : $(#flag).val(), }, cache : false, url : '/main/goods/add', success : function(data){ if(data.code==1){ alert(修改成功); }else{ console.log(data); } }, error : function(){ alert('网络异常'); } }); } }); }};
我们再来看一则验证代码