• jquery 弹出登陆框,简单易懂!修改密码效果代码


    在网上找了一大堆,看的眼花瞭乱,还是研究原码,自已搞出来了!

    ui原地址:http://jqueryui.com/dialog/#modal-form

    可以把js,css下载到本地,要不然不联网的话,什么都没了!

    效果:


    代码如下,我是把需要的都下载到了本地,

    <html lang="en">
    <head>
      <meta charset="utf-8" />
      <title>jQuery UI Dialog - Modal form</title>  
      <link rel="stylesheet" href="jquery-ui.css" />
      <script src="jquery-1.9.1.js"></script>
      <script src="jquery-ui.js"></script> 
      
    <script>
    $(function(){
    
    	$( "#testDialog" ).dialog({
          autoOpen: false,
          height: 380,
           350,
          modal: true,
          buttons: {
            "确定": function() {
    			var pass1V= $("#pass1").val();
    			var pass2V=$("#pass2").val();
    		 if(checkRegexp(pass1V,pass2V)){
    		 if(pass1V!=pass2V){ alert("两次密码输入不一致!");return false;}
    		 alert("updateOK");
             $( this ).dialog( "close" );
    		 }else{
    		 alert("请正确输入密码[a-zA-Z0-9] 6-12位");		 
    		 }
             },
    
    		"取消": function() {
             $( this ).dialog( "close" );
              }
            }
          });//dialog end;
    
    //验证密码为a-zA-Z0-9 6-12位
    function checkRegexp(passVal1,passVal2){
    	if(passVal1.length<6||passVal1.length>12){return false;}
    	var regexp=/^([0-9a-zA-Z])+$/;	
    	if(!(regexp.test(passVal1))){return false;}
    	return true;
    }
    
    $("#dialogHOpen").click(function(){
    $("#testDialog").dialog("open");
    });//open end;
    
    
      
    });//jquery end;
      </script>
    
     <style type="text/css">
    #testDialog{display:none; height: 600,  650,}
     </style>
    </head>
    
    
    <body>
     <button id="dialogHOpen">dialogHOpen</button>
    <div id="testDialog">
    请输入新密码:<input type="password" id="pass1"/><br/>
    再次输入密码:<input type="password" id="pass2"><br/>
    </div>
    
    
    


  • 相关阅读:
    Linux命令:sed命令
    Linux命令:grep命令 | egrep命令
    Linux命令:find命令
    bash脚本编程
    Linux命令:vi | vim命令
    Linux文件权限管理
    237. 删除链表中的节点
    160. 相交链表
    538. 把二叉搜索树转换为累加树
    543.Diameter of Binary Tree
  • 原文地址:https://www.cnblogs.com/riskyer/p/3295218.html
Copyright © 2020-2023  润新知