常用的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>

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