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 相关文章推荐
Dom在ajax技术中的作用说明
Oct 25 Javascript
javascript包装对象实例分析
Mar 27 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
最常见的左侧分类菜单栏jQuery实现代码
Nov 28 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
JS实现网页抢购功能(触发,终止脚本)
Nov 27 Javascript
浅谈Webpack 持久化缓存实践
Mar 22 Javascript
js实现简单模态框实例
Nov 16 Javascript
Three.JS实现三维场景
Dec 30 Javascript
微信小程序实现星级评价
Nov 20 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
PHP获取文件后缀名的三个函数
2012/10/15 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
PHP面向对象程序设计之类与反射API详解
2016/12/02 PHP
php xhprof使用实例详解
2019/04/15 PHP
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
第一次接触Bootstrap框架
2016/10/24 Javascript
vue.js利用defineProperty实现数据的双向绑定
2017/04/28 Javascript
nodejs 子进程正确的打开方式
2017/07/03 NodeJs
Vue的事件响应式进度条组件实例详解
2018/02/04 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
vue自定义一个v-model的实现代码
2018/06/21 Javascript
详解vue 组件的实现原理
2020/11/12 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
[03:03]2014DOTA2国际邀请赛 EG战队专访
2014/07/12 DOTA
Python实现删除Android工程中的冗余字符串
2015/01/19 Python
python简单实现旋转图片的方法
2015/05/30 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
Python for循环中的陷阱详解
2018/07/13 Python
不管你的Python报什么错,用这个模块就能正常运行
2018/09/14 Python
tensorflow 变长序列存储实例
2020/01/20 Python
基于python实现FTP文件上传与下载操作(ftp&amp;sftp协议)
2020/04/01 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
Python 多进程、多线程效率对比
2020/11/19 Python
css3 position fixed固定居中问题解决方案
2014/08/19 HTML / CSS
中国首家奢侈品O2O网购平台:第五大道奢侈品网
2017/12/14 全球购物
莫斯科的韩国化妆品店:Sifo
2019/12/04 全球购物
高中生校园生活自我评价
2013/09/19 职场文书
学生自我鉴定范文
2013/10/04 职场文书
业务员岗位职责
2013/11/16 职场文书
党委领导班子整改方案
2014/09/30 职场文书
党的群众路线教育实践活动总结材料
2014/10/30 职场文书
2015年维修工作总结
2015/04/25 职场文书
靠谱准确的求职信
2019/04/02 职场文书