jquery实现简易的移动端验证表单


Posted in Javascript onNovember 08, 2015

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

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('网络异常');
          }
        });
      }
    });
  }
};

我们再来看一则验证代码

<script type="text/javascript">
//<![CDATA[
$(function(){
    /*
    *思路大概是先为每一个required添加必填的标记,用each()方法来实现。
    *在each()方法中先是创建一个元素。然后通过append()方法将创建的元素加入到父元素后面。
    *这里面的this用的很精髓,每一次的this都对应着相应的input元素,然后获取相应的父元素。
    *然后为input元素添加失去焦点事件。然后进行用户名、邮件的验证。
    *这里用了一个判断is(),如果是用户名,做相应的处理,如果是邮件做相应的验证。
    *在jQuery框架中,也可以适当的穿插一写原汁原味的javascript代码。比如验证用户名中就有this.value,和this.value.length。对内容进行判断。
    *然后进行的是邮件的验证,貌似用到了正则表达式。
    *然后为input元素添加keyup事件与focus事件。就是在keyup时也要做一下验证,调用blur事件就行了。用triggerHandler()触发器,触发相应的事件。
    *最后提交表单时做统一验证
    *做好整体与细节的处理
    */
    //如果是必填的,则加红星标识.
    $("form :input.required").each(function(){
      var $required = $("<strong class='high'> *</strong>"); //创建元素
      $(this).parent().append($required); //然后将它追加到文档中
    });
     //文本框失去焦点后
    $('form :input').blur(function(){
       var $parent = $(this).parent();
       $parent.find(".formtips").remove();
       //验证用户名
       if( $(this).is('#username') ){
          if( this.value=="" || this.value.length < 6 ){
            var errorMsg = '请输入至少6位的用户名.';
            $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
          }else{
            var okMsg = '输入正确.';
            $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
          }
       }
       //验证邮件
       if( $(this).is('#email') ){
        if( this.value=="" || ( this.value!="" && !/.+@.+\.[a-zA-Z]{2,4}$/.test(this.value) ) ){
           var errorMsg = '请输入正确的E-Mail地址.';
           $parent.append('<span class="formtips onError">'+errorMsg+'</span>');
        }else{
           var okMsg = '输入正确.';
           $parent.append('<span class="formtips onSuccess">'+okMsg+'</span>');
        }
       }
    }).keyup(function(){
      $(this).triggerHandler("blur");
    }).focus(function(){
       $(this).triggerHandler("blur");
    });//end blur

    
    //提交,最终验证。
     $('#send').click(function(){
        $("form :input.required").trigger('blur');
        var numError = $('form .onError').length;
        if(numError){
          return false;
        } 
        alert("注册成功,密码已发到你的邮箱,请查收.");
     });

    //重置
     $('#res').click(function(){
        $(".formtips").remove(); 
     });
})
//]]>
</script>
Javascript 相关文章推荐
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
Sep 25 Javascript
jQuery 各种浏览器下获得日期区别
Dec 22 Javascript
javascript JSON操作入门实例
Apr 16 Javascript
jQuery ajax在GBK编码下表单提交终极解决方案(非二次编码方法)
Oct 20 Javascript
兼容IE和FF的js脚本代码小结(比较常用)
Dec 06 Javascript
Javascript实现的常用算法(如冒泡、快速、鸽巢、奇偶等)
Apr 29 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
基于javascript实现漂亮的页面过渡动画效果附源码下载
Oct 26 Javascript
Vue如何实现组件的源码解析
Jun 08 Javascript
Spring boot 和Vue开发中CORS跨域问题解决
Sep 05 Javascript
详解JavaScript中typeof与instanceof用法
Oct 24 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 #Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
Nov 07 #Javascript
jquery UI Datepicker时间控件的使用方法(基础版)
Nov 07 #Javascript
jquery验证邮箱格式并显示提交按钮
Nov 07 #Javascript
jquery判断当前浏览器的实现代码
Nov 07 #Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 #Javascript
js识别uc浏览器的代码
Nov 06 #Javascript
You might like
从网上搜到的phpwind 0day的代码
2006/12/07 PHP
调整PHP的性能
2013/10/30 PHP
ThinkPHP的MVC开发机制实例解析
2014/08/23 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
AJAX的使用方法详解
2017/04/29 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
浅谈javascript 面向对象编程
2009/10/28 Javascript
jQuery 翻牌或百叶窗效果(内容三秒自动切换)
2012/06/14 Javascript
JavaScript 和 Java 的区别浅析
2013/07/31 Javascript
JavaScript sup方法入门实例(把字符串显示为上标)
2014/10/20 Javascript
Bootstrap基础学习
2015/06/16 Javascript
jQuery过滤HTML标签并高亮显示关键字的方法
2015/08/07 Javascript
深入浅析JavaScript系列(13):This? Yes,this!
2016/01/05 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
使用AJAX实现Web页面进度条的实例分享
2016/05/06 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
jQuery日程管理插件fullcalendar使用详解
2017/01/07 Javascript
JS实现的加减乘除四则运算计算器示例
2017/08/09 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
React key值的作用和使用详解
2018/08/23 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
Vue props 单向数据流的实现
2018/11/06 Javascript
jquery添加div实现消息聊天框
2020/02/08 jQuery
Vue axios 跨域请求无法带上cookie的解决
2020/09/08 Javascript
JavaScript实现筛选数组
2021/03/02 Javascript
Python使用Beautiful Soup包编写爬虫时的一些关键点
2016/01/20 Python
Python爬虫破解登陆哔哩哔哩的方法
2020/11/17 Python
美国汽车交易网站:Edmunds
2016/08/17 全球购物
荷兰音乐会和音乐剧门票订购网站:Topticketshop
2019/08/27 全球购物
初一体育教学反思
2014/01/29 职场文书
电焊工岗位职责
2014/03/06 职场文书
对标管理实施方案
2014/03/12 职场文书
高考寄语大全
2014/04/08 职场文书
公司任命书模板
2014/06/06 职场文书
就业协议书
2014/09/12 职场文书
《工作是最好的修行》读后感3篇
2019/12/13 职场文书