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 相关文章推荐
判断用户是否在线的代码
Mar 05 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
js 用CreateElement动态创建标签示例
Nov 20 Javascript
Jquery $.getJSON 在IE下的缓存问题解决方法
Oct 10 Javascript
对比分析json及XML
Nov 28 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
Jun 19 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
angular.js4使用 RxJS 处理多个 Http 请求
Sep 23 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
解决vue A对象赋值给B对象,修改B属性会影响到A的问题
Sep 25 Javascript
解决layUI的页面显示不全的问题
Sep 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
PHP5中Cookie与 Session使用详解
2013/04/30 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP抽奖算法程序代码分享
2015/10/08 PHP
iOS10推送通知开发教程
2016/09/19 PHP
php与python实现的线程池多线程爬虫功能示例
2016/10/12 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
点击隐藏页面左栏或右栏实现js代码
2013/04/01 Javascript
jQuery动画效果animate和scrollTop结合使用实例
2014/04/02 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
2014/05/18 Javascript
JavaScript实现的Tween算法及缓冲特效实例代码
2015/11/03 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
js控件Kindeditor实现图片自动上传功能
2020/07/20 Javascript
jQuery EasyUI学习教程之datagrid点击列表头排序
2016/07/09 Javascript
Bootstrap fileinput组件封装及使用详解
2017/03/10 Javascript
mui 打开新窗口的方式总结及注意事项
2017/08/20 Javascript
原生JS实现列表子元素顺序反转的方法分析
2018/07/02 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
2019/04/08 Javascript
JS学习笔记之原型链和利用原型实现继承详解
2019/05/29 Javascript
vue router 跳转时打开新页面的示例方法
2019/07/28 Javascript
python实现多线程暴力破解登陆路由器功能代码分享
2015/01/04 Python
python递归删除指定目录及其所有内容的方法
2017/01/13 Python
python顺序的读取文件夹下名称有序的文件方法
2018/07/11 Python
Python 占位符的使用方法详解
2019/07/10 Python
用HTML5制作数字时钟的教程
2015/05/11 HTML / CSS
全球速卖通俄罗斯站:AliExpress俄罗斯
2019/06/17 全球购物
心理健康教育心得体会
2013/12/29 职场文书
音乐器材管理制度
2014/01/31 职场文书
如何写求职信
2014/05/24 职场文书
美术社团活动总结
2014/06/27 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
婚礼父母答谢词
2015/01/04 职场文书
销售合作意向书范本
2015/05/08 职场文书
MySQL创建管理KEY分区
2022/04/13 MySQL
vue ant design 封装弹窗表单的使用
2022/06/01 Vue.js