读书人

jquery 弹出登陆框容易易懂!修改密

发布时间: 2013-10-08 16:38:32 作者: rapoo

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

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

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

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

效果:

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

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

<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,      width: 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, width: 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>


读书人网 >编程

热点推荐