jquery重点

最新推荐文章于 2022-04-16 16:25:56 发布

搬运工9527

最新推荐文章于 2022-04-16 16:25:56 发布

阅读量261

点赞数

分类专栏：前端文章标签： jquery重点

本文链接：https://blog.csdn.net/qq_42260635/article/details/83658069

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.jQuery正则校验表单验证

<!--
正则表达式又称规则表达式。
在代码中常简写为regex、regexp或RE），
计算机科学的一个概念。
正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。
-->
<!--   
  参考正则
   /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;      //账号;
/^[\u4e00-\u9fa5]{2,6}$/;           //验证昵称2-6个汉字正则;
   /^[a-zA-Z0-9]{4,10}$/;              //验证密码
 /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;  //校验邮箱正则
   /^(13|15|18)\d{9}$/;                //校验手机正则
  /^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/; //校验生日正则
   /^\d{15}$|^\d{18}$/;                      身份证校验
-->
<script src="js/jquery-1.11.0.min.js"></script>
 <script>
//表单校验
       $(document).ready(function(){
	         $("form").submit(function(){
			  if(checkNo()==false||
			  checkPass()==false||
			  checkPassAgain()==false||
			  checkName()==false||
			  checkId()==false||
			  checkGender()==false||
			  checkPhone()==false||
			  checkSelect()==false){
			  return false;
			  }else{
			  return true;
			  }
		  });
//blur失焦事件

		 $("#txtNo").blur(function(){
		       checkNo(); 
		 });
		 $("#txtPwd").blur(function(){
		       checkPass(); 
		 });
		 $("#txtConfirmPwd").blur(function(){
		       checkPassAgain(); 
		 });
		 $("#txtName").blur(function(){
		        checkName(); 
		 });
		 $("#txtId").blur(function(){
		       checkId(); 
		 });
		 $("input[type='radio']").blur(function(){
		       checkGender(); 
		 });
		 $("#txtPhone").blur(function(){
		       checkPhone(); 
		 });
		 $("#xueli").blur(function(){
		       checkSelect(); 
		 });
//校验账号	
         function checkNo(){
		       var noReg =  /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
			   var txtNo=$("#txtNo").val();
			   if(!noReg.test(txtNo)){
 $("#prompt_no").html("账号输入不合法").css("color","red").removeClass("spanBlurOk");
//样式，背景图片，直接加
			      return false;
			   }else{
      $("#prompt_no").html("").addClass("spanBlurOk");
			   }	    
 }	
   //校验密码     
              function checkPass(){
		       var passReg =  /^[a-zA-Z0-9]{4,10}$/;
			   var txtPwd=$("#txtPwd").val();
			   if(!passReg.test(txtPwd)){
			      $("#prompt_pwd").html("密码输入不合法").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{		      $("#prompt_pwd").html("").addClass("spanBlurOk");
   }	
//两次密码是否一致			 
              function checkPassAgain(){
		       var txtPwd=$("#txtPwd").val();
			   var passaAgain=$("#txtConfirmPwd").val();
			   if(passaAgain!=txtPwd){
			      $("#prompt_confirmpwd").html("再次输入密码不合法").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
			      $("#prompt_confirmpwd").html("").addClass("spanBlurOk");
			   }	        
		     }

             function checkName(){
		       var nameReg =  /^[a-zA-Z0-9]{4,10}$/;
			   var txtName=$("#txtName").val();
			   if(!nameReg.test(txtName)){
			      $("#prompt_name").html("用户名输入不合法").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
   $("#prompt_name").html("").addClass("spanBlurOk");
			   }	    
   }			 
              function checkId(){
		       var idReg = /^\d{15}$|^\d{18}$/; 
			   var txtId=$("#txtId").val();
			   if(!idReg.test(txtId)){
			      $("#prompt_id").html("身份证输入不合法").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
      $("#prompt_id").html("").addClass("spanBlurOk");
			   }	   
   }	
 //校验性别，单选框             
              function checkGender(){
			   if($("input[type='radio']:checked").length<1){
			      $("#prompt_gender").html("请勾选性别").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{     $("#prompt_gender").html("").addClass("spanBlurOk");
      }	   
   }
/
            function checkPhone(){
		       var phoneReg = /^(13|15|18)\d{9}$/; 
			   var txtPhone=$("#txtPhone").val();
			   if(!phoneReg.test(txtPhone)){
			      $("#prompt_phone").html("手机号输入不合法").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
  $("#prompt_phone").html("").addClass("spanBlurOk");
			   }	   
  }	

//校验学历 下拉列表框
            function checkSelect(){
			   var xueli=$("#xueli").val();
			   if(xueli==0){
			      $("#prompt_xueli").html("请勾选学历").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
    $("#prompt_xueli").html("").addClass("spanBlurOk");
			   }   
		     }			 
	   });
 </script>

2.遮罩层对话框

<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
        <script>
        $(function(){
			cal();
		      var delId;
		     $(".btnDel").click(function(){
var $wObj=$(window);//当前浏览器窗口
 var $dObj=$("div.dialog");//当前提示框
 var widW=$wObj.width();//当前浏览器窗口的宽度
 var widH=$wObj.height();//当前浏览器窗口的高度
 var diaW=$dObj.width(); //提示框的宽度
 var diaH=$dObj.height();//提示框的高度
 //计算提示框居中时的左边距
  var left=(widW-diaW)/2;
//计算提示框居中时的上边距
var top=(widH-diaH)/2;
 $dObj.css({"left":left,"top":top});
$(".dialog").show();
 //遮罩层
var bh = $("body").height(); //获取页面内容的高度
var bw = $("body").width();//获取页面内容的宽度
		           $("div.mask").css({
 height: bh + "px", //设置遮罩层的高度，覆盖整个页面内容
			       width: bw + "px",
			       display: "block"
		           }); 
                 delId = $(this).parents("ul").attr("id");				   
		  });
		  
		       $("#btnCancel").click(function(){
			       $(".dialog").hide();
				   $("div.mask").hide();
		  });
			   $("#btnSure").click(function(){
			       $("#shop-xx ul[id='"+delId+"']").remove();
				   $(".dialog").hide();
				   $("div.mask").hide();
				  cal();
			});
			function cal(){
			  var sum = 0;
			  $("li[name='rs1']").each(function(){
			     sum+=parseInt($(this).html().substring(1));			
			  });
			   $("#dollar").html("￥"+sum);
			   }
		});
		</script>

3.校验

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>新用户注册</title>
<style type="text/css">
.txtInit {
	border: 1px #cecece solid;
}
.txtFocus {
	border: 1px solid #009;
}
.spanInit {
	width: 400px;
	height: 22px;
	display: block;
	float: right;
	background-repeat: no-repeat;
	background-position: left;
}
/*邮箱输入正确，设置打勾的背景图片*/
.spanBlurOk{
	
	background-image:url(images/right.jpg);
}
</style>
<link href="css/layout.css" rel="stylesheet" type="text/css" />
</head>

<body>
<!--头部-->

<div id="top-cont">
  <div id="top-min">
    <div id="min-left"></div>
    <div id="min-right"></div>
  </div>
</div>
<div id="menu">
  <div id="menu-m">
    <ul>
      <li><a href="index.html">首页</a></li>
      <li style="width:8px;"><img src="images/t1.jpg" width="8" height="42" /></li>
      <li><a href="type.html">境内游</a></li>
      <li style="width:8px;"><img src="images/t1.jpg" width="8" height="42" /></li>
      <li><a href="#">境外游</a></li>
      <li style="width:8px;"><img src="images/t1.jpg" width="8" height="42" /></li>
      <li><a href="#">热门游</a></li>
      <li style="width:8px;"><img src="images/t1.jpg" width="8" height="42" /></li>
      <li><a href="group.html">团购</a></li>
      <li><a href="cart.html"><img src="images/che.jpg" width="176" height="42" /></a></li>
    </ul>
  </div>
</div>
<!--广告位图片-->


<!--注册版块-->
<div id="reg">

  <div id="reg-top">&nbsp;&nbsp;&nbsp;&nbsp;会员注册</div>
  <div id="reg-mleft">
  <form  action="" method="post">
    <ul>
      <li class="m">用户帐号 </li>
      <li class="r" >
        <input name="textfield" type="text" class="box txtInit" id="txtNo" /><span id='prompt_no' class="spanInit" ></span></li>
      <li class="m">设置密码 </li>
      <li class="r">
        <input name="textfield" type="password" class="box txtInit" id="txtPwd" />
      <span id='prompt_pwd'  class="spanInit" ></span></li>
      <li class="m">确认密码 </li>
      <li class="r">
        <input name="textfield" type="password" class="box txtInit" id="txtConfirmPwd" />
       <span id='prompt_confirmpwd' class="spanInit"  ></span></li>
      <li class="m">用户姓名 </li>
      <li class="r">
        <input name="textfield" type="text" class="box txtInit" id="txtName" />
       <span id='prompt_name' class="spanInit"  ></span></li>
      <li class="m">身份证号 </li>
      <li class="r">
        <input name="textfield" type="text" class="box txtInit" id="txtId" />
       <span id='prompt_id' class="spanInit"   ></span></li>
      <li class="m">性 别 </li>
      <li class="r">
        <input name="radio" type="radio" id="radio" value="radio" />
        男
        <input type="radio" name="radio" id="radio2" value="radio" />
        女  <div id="pic6"></div><span id='prompt_gender' class="spanInit"   ></span></li>
      <li class="m">手机号码 </li>
      <li class="r">
        <input name="textfield" type="text" class="box txtInit" id="txtPhone" />
       <span id='prompt_phone' class="spanInit" ></span></li>
    
      </li>
	  <li class="m">所属群体 </li>
	  <li class="r">
		<select id="xueli">
			<option value="0">请选择</option>
			<option value="1">专科生</option>
			<option value="2">本科生</option>
			<option value="3">研究生</option>
		</select>
        <span id='prompt_xueli' class="spanInit" ></span></li>
      </li>
	      <input name="button" type="image" id="button" value="提交" src="images/but2.jpg"  />
      <li class="r">
        <input name="checkbox" type="checkbox" id="checkbox" checked="checked" />
        《途乐行旅游网会员服务条款》 <img src="images/jt.jpg" width="13" height="12" /></li>
    </ul>
      </form>
  </div>

  <div id="reg-right">
    <div><img src="images/kf.jpg" width="230" height="150"/></div>
    <div id="kf2"><a href="login.html">已有账户，请点击登录</a></div>

  </div>
</div>

<!--底部-->
<div id="foot">
  <div id="foot-t"> 
    <p>许可证编号：WE125482154 鄂ICP备125478966</p>
    <p><a href="#">隐私保护</a> | <a href="#">诚聘英才</a> | <a href="#">关于我们</a> | <a href="#">网站地图</a> | <a href="#">友情链接</a> | <a href="#">商务合作</a></p>
  </div>
</div>

</body>
</html>
<!--   
  参考正则
  // /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;      //账号;
  // /^[\u4e00-\u9fa5]{2,6}$/;           //用户名;
  // /^[a-zA-Z0-9]{4,10}$/;              //验证密码
  // /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/;  //校验邮箱正则
  // /^(13|15|18)\d{9}$/;                //校验手机正则
  // /^((19\d{2})|(200\d))-(0?[1-9]|1[0-2])-(0?[1-9]|[1-2]\d|3[0-1])$/; //校验生日正则
  // /^d{15}|d{}18$/;                      身份证校验
-->
<script src="js/jquery-1.11.0.min.js"></script>
 <script>
       $(document).ready(function(){
	         $("form").submit(function(){
			  if(checkNo()==false||
			  checkPass()==false||
			  checkPassAgain()==false||
			  checkName()==false||
			  checkId()==false||
			  checkGender()==false||
			  checkPhone()==false||
			  checkSelect()==false){
			  return false;
			  }else{
			  return true;
			  }
		  });
		 $("#txtNo").blur(function(){
		       checkNo(); 
		 });
		 $("#txtPwd").blur(function(){
		       checkPass(); 
		 });
		 $("#txtConfirmPwd").blur(function(){
		       checkPassAgain(); 
		 });
		 $("#txtName").blur(function(){
		        checkName(); 
		 });
		 $("#txtId").blur(function(){
		       checkId(); 
		 });
		 $("input[type='radio']").blur(function(){
		       checkGender(); 
		 });
		 $("#txtPhone").blur(function(){
		       checkPhone(); 
		 });
		 $("#xueli").blur(function(){
		       checkSelect(); 
		 });
		
         
               function checkNo(){
		       var noReg =  /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
			   var txtNo=$("#txtNo").val();
			   if(!noReg.test(txtNo)){
			      $("#prompt_no").html("账号输入不合法").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
			      $("#prompt_no").html("").addClass("spanBlurOk");
			   }
			    
		     }	
			 
              function checkPass(){
		       var passReg =  /^[a-zA-Z0-9]{4,10}$/;
			   var txtPwd=$("#txtPwd").val();
			   if(!passReg.test(txtPwd)){
			      $("#prompt_pwd").html("密码输入不合法").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
			      $("#prompt_pwd").html("").addClass("spanBlurOk");
			   }
			    
		     }	
			 
              function checkPassAgain(){
		       var txtPwd=$("#txtPwd").val();
			   var passaAgain=$("#txtConfirmPwd").val();
			   if(passaAgain!=txtPwd){
			      $("#prompt_confirmpwd").html("再次输入密码不合法").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
			      $("#prompt_confirmpwd").html("").addClass("spanBlurOk");
			   }
			    
		     }
             function checkName(){
		       var nameReg =  /^[a-zA-Z0-9]{4,10}$/;
			   var txtName=$("#txtName").val();
			   if(!nameReg.test(txtName)){
			      $("#prompt_name").html("用户名输入不合法").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
			      $("#prompt_name").html("").addClass("spanBlurOk");
			   }
			    
		     }	
			 
              function checkId(){
		       var idReg = /^\d{15}$|^\d{18}$/; 
			   var txtId=$("#txtId").val();
			   if(!idReg.test(txtId)){
			      $("#prompt_id").html("身份证输入不合法").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
			      $("#prompt_id").html("").addClass("spanBlurOk");
			   }
			   
		     }	
              
              function checkGender(){
			   if($("input[type='radio']:checked").length<1){
			      $("#prompt_gender").html("请勾选性别").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
			      $("#prompt_gender").html("").addClass("spanBlurOk");
			   }
			   
		     }

            function checkPhone(){
		       var phoneReg = /^(13|15|18)\d{9}$/; 
			   var txtPhone=$("#txtPhone").val();
			   if(!phoneReg.test(txtPhone)){
			      $("#prompt_phone").html("手机号输入不合法").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
			  $("#prompt_phone").html("").addClass("spanBlurOk");
			   }
			   
		     }	

            function checkSelect(){
			   var xueli=$("#xueli").val();
			   if(xueli==0){
			      $("#prompt_xueli").html("请勾选学历").css("color","red").removeClass("spanBlurOk");
			      return false;
			   }else{
			    $("#prompt_xueli").html("").addClass("spanBlurOk");
			   }
			    
		     }			 
	   });
 </script>
 正则表达式--检验数字的表达式
1 数字：^[0-9]*$

 2 n位的数字：^\d{n}$

 3 至少n位的数字：^\d{n,}$

 4 m-n位的数字：^\d{m,n}$

 5 零和非零开头的数字：^(0|[1-9][0-9]*)$

 6 非零开头的最多带两位小数的数字：^([1-9][0-9]*)+(.[0-9]{1,2})?$

 7 带1-2位小数的正数或负数：^(\-)?\d+(\.\d{1,2})?$

 8 正数、负数、和小数：^(\-|\+)?\d+(\.\d+)?$

 9 有两位小数的正实数：^[0-9]+(.[0-9]{2})?$

10 有1~3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$

11 非零的正整数：^[1-9]\d*$ 或 ^([1-9][0-9]*){1,3}$ 或 ^\+?[1-9][0-9]*$

12 非零的负整数：^\-[1-9][]0-9"*$ 或 ^-[1-9]\d*$

13 非负整数：^\d+$ 或 ^[1-9]\d*|0$

14 非正整数：^-[1-9]\d*|0$ 或 ^((-\d+)|(0+))$

15 非负浮点数：^\d+(\.\d+)?$ 或 ^[1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0$

16 非正浮点数：^((-\d+(\.\d+)?)|(0+(\.0+)?))$ 或 ^(-([1-9]\d*\.\d*|0\.\d*[1-9]\d*))|0?\.0+|0$

17 正浮点数：^[1-9]\d*\.\d*|0\.\d*[1-9]\d*$ 或 ^(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*))$

18 负浮点数：^-([1-9]\d*\.\d*|0\.\d*[1-9]\d*)$ 或 ^(-(([0-9]+\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\.[0-9]+)|([0-9]*[1-9][0-9]*)))$

19 浮点数：^(-?\d+)(\.\d+)?$ 或 ^-?([1-9]\d*\.\d*|0\.\d*[1-9]\d*|0?\.0+|0)$

搬运工9527

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery重点

1.jQuery正则校验表单验证&lt;!--正则表达式又称规则表达式。在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式通常被用来检索、替换那些符合某个模式(规则)的文本。--&gt;&lt;!-- 参考正则 /^[a-zA-Z][a-zA-Z0-9]{3,15}$/; //账号;/^[\u4e00-\u9fa5]{...
复制链接

扫一扫