• 常用的jquery 中一些js


    目录:

    1.验证用户登录信息

    2. 获取下拉框所选中的元素

    3.  动态获取 id 和对应文本框的值

      4. table 中 tr  的隐藏

    5 . 更换图片

      6. ajax  进行提交

    7. 判断图片是否改变 

      8. el 表达式在 js 中的使用 就要借助数据

    1.验证用户登录信息

    $(function () {
        
        $("#phone").blur(function () {
            var checkPhone = /^1([38][0-9]|4[579]|5[0-3,5-9]|6[6]|7[0135678]|9[89])d{8}$/;
            var username = $(this).val();
            //手机号匹配成功
            if(checkPhone.test(username)){
                $("#divErrorMssage").html("");
                
            }
            //手机号匹配不成功
            else{
                $("#divErrorMssage").html("<b><font style='color:red'>输入不合法</font></b>");
                
            }
        });
        
        $("#txtPassword").blur(function(){
            var reg = /^[a-zA-Z]w{5,17}$/;
            var password = $(this).val();
            //密码匹配成功
            if(reg.test(password)){
                $("#divErrorMssage").html("");
                usn = true;
            }
            //密码号匹配不成功
            else{
                $("#divErrorMssage").html("<b><font style='color:red'>输入不合法</font></b>");
                usn = false;
            }
        });
        
    })
        //总体校验表单是否可以提交了 如果返回的true表单才可以提交。
        function checkForm() {
            var username = checkUsername();
            var password = checkPassword();
            if (username && password) {
                
                return true;
            } else {
                return false;
            }
        }
    //邮箱验证
    $("#txtEmail").blur(function () {
        
        var checkPhone = /^w+([-+.]w+)*@w+([-.]w+)*.w+([-.]w+)*$/;
        var username = $(this).val();
        //手机号匹配成功
        
        if(checkPhone.test(username)){
            $("#emailValidMsg").html("");
        }
        //手机号匹配不成功
        else{
            $("#emailValidMsg").html("<b><font style='color:red'>输入不合法</font></b>");
            
        }
    });
    //邮箱验证
    $("#txtNickName").blur(function () {
        
        var checkPhone = /^[a-zA-Z][a-zA-Z0-9_]{4,15}$/;
        var username = $(this).val();
        //手机号匹配成功
        
        if(checkPhone.test(username)){
            $("#nickNameValidMsg").html("");
        }
        //手机号匹配不成功
        else{
            $("#nickNameValidMsg").html("<b><font style='color:red'>输入不合法</font></b>");
            
        }
    });
    //重复验证密码
    $("#txtRepeatPass").blur(function () {
        var checkPhone = /^[a-zA-Z]w{5,17}$/;
        var username = $(this).val();
        //手机号匹配成功
        
        if(checkPhone.test(username)){
            $("#repeatPassValidMsg").html("");
        }
        //手机号匹配不成功
        else{
            $("#repeatPassValidMsg").html("<b><font style='color:red'>输入不合法</font></b>");
            
        }
    });

       2. 获取下拉框所选中的元素

            js: 的实现

       $(function () {
           
           $("#address").change(function () {
               //获取地址的id并将结果查出来
                 var opt = $("#address option:selected");
                 var value =  opt.val();
                 
                 window.location.href="${pageContext.request.contextPath}/mybook/shouhuo_findAsignAddress?id="+value;
        }) 
        
    })

                              html 代码

          <p>
                选择地址: <select id="address">
                    <option value="0">填写新地址</option>
                    <c:forEach items="${addressA }" var="address">
                      <option  id="${address.id }" value="${address.id }">${address.xiangaddress }</option>
                    </c:forEach>
                </select>
            </p>

                            3.  动态获取 id 和对应文本框的值

        <td >
               <input class="del_num" id="${item.value.book_id}" type="text" size="3" maxlength="34"/>
               <a href="#" onclick="change(${item.value.book_id})">变更</a>
         </td>

                               js 实现:

           <script>
                function change(id){
                    
                  //正则表达式  验证正整数
                  //var rule = /^[0-9]*[1-9][0-9]*$/;
                  var rule = /^[1-9]*[1-9][1-9]*$/;
                  //输入框的值
                  var count = $("#"+id).val();  //获取 指定id 处的文本框的值
                  
                  if(rule.test(count)){
                      
                      location.href="${path}/mybook/showPage_updateCart?indexId="+id+"&count="+count;
                  }else{
                      alert("输入错误");
                  }
            </script>      

                             4. table 中 tr  的隐藏

                   $(function () {
                    /* 点击删除按钮改变状态 */
                    $("#id").click(function () {
                       $("#id").css("display","none"); //搞定
                     $("#tr").css("display","block")
    //或者
    $("#id").hide(); //$("#tr").show() //将这一行数据隐藏 })

                           5 . 更换图片

                      <td rowspan="3">
                            <label id="file_upload1_label" for="file_upload1">
                                <!-- <span id="uploadtip">添加图书封面</span>  -->
                                <img id="uploadimg"  alt="添加图书封面" src="" alt="" width="118px" height="143px" />
                            </label> 
                            <input type="file" name="file" class="" id="file_upload1"    onchange="upload_review()">
                        </td>

                               js 代码:

            function upload_review() {
                var img = document.getElementById("uploadimg");
                var input = document.getElementById("file_upload1");
                var tip = document.getElementById("uploadtip");            
    
                var file = input.files.item(0);
                var freader = new FileReader();
                freader.readAsDataURL(file);
                freader.onload = function(e) {
                    img.src = e.target.result;
                    tip.style.display = "none";
                };
            } 
            

                             6. ajax  进行提交

          $(function () {        
                $("#addActivity").submit(function(){
                    $(this).ajaxSubmit({
                        url:"${path }/mybook/uploadFile_UploadSingleFile",
                        success:function(data){
                            console.log("========="+data);
                            //alert('保存成功'); 
                            return false;
                        },
                        resetForm:true,
                      //  dataType:'json' 
                    })
                    return false;
                });  
               
            });

                      7. 判断图片是否改变 

        $(function () {
                //获取图片的路径
                 
                //点击提交按钮出发事件
                $("#mytijiao").click(function() {
                    //当点击提交按钮判断地址
                    var src = $('img').attr('src');//获取src中的地址
                    var yuan = "${path }${product.picture }";  //原图片的地址
                    if(src===yuan){                            //判断两个地址是否相同
                        //改变input的类型和name属性就可以了
                        $("input[name='file']").attr('name','file1');     //如果相同我后台就不接收这个图片 不定义这个类型的参数  
                        //使用ajax进行交互显示  图片没有改变
                        //获取标签体的类型
                       var msg =    $("input[type='file']").attr('name');   
                        
                      $("#addActivity").submit(function(){
                      $(this).ajaxSubmit({
                        url:"${path }/mybook/uploadFile_UploadSingleFile?judgePage=2",
                        success:function(data){
                            alert("成功")
                            return false;
                        },
                        resetForm:true,
                       /*  dataType:'json' */
                    })
                    return false;
                });
                                       
                    }else{
                        //图片改变就不改变file的类型
                        alert("图片改变");
                       
                         $("#addActivity").submit(function(){
                              $(this).ajaxSubmit({
                                url:"${path }/mybook/uploadFile_UploadSingleFile?judgePage=2",
                                success:function(data){
                                    alert("成功")
                                    return false;
                                },
                                resetForm:true,
                               /*  dataType:'json' */
                            })
                            return false;
                        });
                        
                        
                        
                    }
                })

                          8. el 表达式在 js 中的使用 就要借助数据

    $(function () {
        
        var array = new Array();
          <c:forEach items="${firstCategory }" var="category">
           var msg = {"name": " ${category.category_name }"} 
           array.push(msg);
          </c:forEach>
          
         
        var ch = false;
        $("#onetijiao").click(function() {
            
           var value =    $("#fname").val();
            if(value === null || value === ''){
                alert("内容不能为空");
                return false;
            }
           for(i in array){
               if(array[i].name.trim() === value.trim()){
                  
                   alert("一级类别已存在,请重新输入");
                  return false;
               }
           }
        
        });
        /*  $('#jq').css('border','3px solid red'); */
    
        $('#fnameMsg').css('color','red');
        
        
        
    })

                            应用场景二: 使用el表达式进行判断

                          

    <script type="text/javascript">
       var second = new Array(); //定义二级类别数组
       <c:forEach items="${sesondCategory }" var="category">
       <c:if test="${category.parent_id !=0}">
        var module = {"name":"${category.category_name }"}
        second.push(module); 
       </c:if>
    
    </c:forEach>
    
    $(function () {
        //判断二级类别
        //判断一级类别
        
        $("#tijiao").click(function () {
            var value = $("#checkName").val();
            if(value === null|| value === ''){
                alert("参数不能为空");
                return false;
            }
            var array = new Array(); //定义一级数组
            
                $("#myselect option").each(function(){ //遍历全部option
                    var txt = $(this).text(); //获取option的内容
                    if(txt != "全部") //如果不是“全部”
                        array.push(txt); //添加到数组中
            });
            for(i in array){
                if(array[i].trim() === value.trim()){
                    alert('一级类别存在,请更换');
                    return false;
                }
            }
            
            for(var j=0;j<array.length;j++){
                if(second[j].name === value){
                    alert("二级类名已存在请重新取值");
                    return false;
                }
            }
            
        });
    })
    
    </script>

        未完待续........................... 

  • 相关阅读:
    js之数组的方法
    js之选项卡
    js之数据类型的比较
    Android sharedUserId研究记录
    直接拿来用!最火的Android开源项目(一)
    [转]简约而不简单——Android SimpleAdapter
    [转]Android GC机制及一些调试信息
    sendToTarget 和 sendMessage 区别
    Android中内容观察者的使用---- ContentObserver类详解 (转)
    Inflate()
  • 原文地址:https://www.cnblogs.com/zhulina-917/p/11720677.html
Copyright © 2020-2023  润新知