jquery实现简易的移动端验证表单_jquery_脚本之家

2019-12-07 17:49 来源:未知

验证是否显示红色的提交按钮

bindBlur:function(){//jquery多级验证表单 var n = $; var p = $; var r = $; show;//页面加载之后先进行一次验证 //分别对三个需要验证的字段进行验证绑定,这里也可以写成一句代码 //$('#item_name','#price',$.on{show; n.on{show; p.on{show; r.on{show; function velidate(){//获取验证的结果 var flag = true; if{flag= false;} if=="0" || p.val{flag= false;} if=="0" || r.val{flag= false;} return flag; } function show{//将验证结果反映到页面 if{$.css("background-color","#b02125");} else{$.css("background-color","#8f8f8f");} }},

金沙澳门登陆网站,验证,在用户点击提交的时候调用,会定位需要完善的地方

check:function(){ var n = $; var p = $; var r = $; if{n.focus();return false;} if=="0" || p.val;return false;} if=="0" || r.val;return false;} return true;},

这一段是ajax提交和提交前调用验证

postData:function(){ $.click{ if{ $.ajax({ type : 'post', dataType : 'json', data : { id : $, name : $, price : $, photos : $, }, cache : false, url : '/main/goods/add', success : function{ if{ alert; }else{ console.log; } }, error : function; } }); } });}

easy_form_validate.js

require.config({ paths:{ "jquery":"./lib/jquery-1.11.1.min", 'icon_Upload':'./icon_Upload' }});require(['jquery','icon_Upload'],function; Add.postData;var Add = { bindBlur:function(){//jquery多级验证表单 var n = $; var p = $; var r = $; show;//页面加载之后先进行一次验证 //分别对三个需要验证的字段进行验证绑定,这里也可以写成一句代码 //$('#item_name','#price',$.on{show; n.on{show; p.on{show; r.on{show; function velidate(){//获取验证的结果 var flag = true; if{flag= false;} if=="0" || p.val{flag= false;} if=="0" || r.val{flag= false;} return flag; } function show{//将验证结果反映到页面 if{$.css("background-color","#b02125");}else{$.css("background-color","#8f8f8f");} } }, check:function(){ var n = $; var p = $; var r = $; if{n.focus();return false;} if=="0" || p.val;return false;} if=="0" || r.val;return false;} return true; }, postData:function.click{ if{ $.ajax({ type : 'post', dataType : 'json', data : { id : $, name : $, summary : $, price : $, store : $, mobileDetail : $, photos : $, brokerage : $, flag : $, }, cache : false, url : '/main/goods/add', success : function{ if{ alert; }else{ console.log; } }, error : function; } }); } }); }};

我们再来看一则验证代码

//<![CDATA[${ /* *思路大概是先为每一个required添加必填的标记,用each方法中先是创建一个元素。然后通过append()方法将创建的元素加入到父元素后面。 *这里面的this用的很精髓,每一次的this都对应着相应的input元素,然后获取相应的父元素。 *然后为input元素添加失去焦点事件。然后进行用户名、邮件的验证。 *这里用了一个判断is(),如果是用户名,做相应的处理,如果是邮件做相应的验证。 *在jQuery框架中,也可以适当的穿插一写原汁原味的javascript代码。比如验证用户名中就有this.value,和this.value.length。对内容进行判断。 *然后进行的是邮件的验证,貌似用到了正则表达式。 *然后为input元素添加keyup事件与focus事件。就是在keyup时也要做一下验证,调用blur事件就行了。用triggerHandler()触发器,触发相应的事件。 *最后提交表单时做统一验证 *做好整体与细节的处理 */ //如果是必填的,则加红星标识. $("form :input.required").each{ var $required = $("<strong class='high'> *</strong>"); //创建元素 $.append; //然后将它追加到文档中 }); //文本框失去焦点后 $.blur{ var $parent = $; $parent.find; //验证用户名 if.is{ if( this.value=="" || this.value.length < 6 ){ var errorMsg = '请输入至少6位的用户名.'; $parent.append('<span >'+errorMsg+'</span>'); }else{ var okMsg = '输入正确.'; $parent.append('<span >'+okMsg+'</span>'); } } //验证邮件 if ){ if( this.value=="" || ( this.value!="" && !/.+@.+.[a-zA-Z]{2,4}$/.test{ var errorMsg = '请输入正确的E-Mail地址.'; $parent.append('<span >'+errorMsg+'</span>'); }else{ var okMsg = '输入正确.'; $parent.append('<span >'+okMsg+'</span>'); } } }).keyup.triggerHandler.focus.triggerHandler;//end blur //提交,最终验证。 $.click{ $("form :input.required").trigger; var numError = $.length; if{ return false; } alert("注册成功,密码已发到你的邮箱,请查收."); }); //重置 $.click{ $; });})//]]>
TAG标签:
版权声明:本文由金沙澳门唯一官网发布于金沙澳门登陆网站,转载请注明出处:jquery实现简易的移动端验证表单_jquery_脚本之家