常用的jquery 中一些js
目录：
$(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>"); } });
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>
<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>
$(function () { /* 点击删除按钮改变状态 */ $("#id").click(function () { $("#id").css("display","none"); //搞定 $("#tr").css("display","block")
//或者
$("#id").hide(); //$("#tr").show() //将这一行数据隐藏 })
<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"; }; }
$(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; }); });
$(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; }); } })
$(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>
未完待续...........................
