JS注册页面的简单实例
2019-09-23 08:46:36来源:爱站网 阅读 ()
JS注册页面在JavaScript是经常会用到的,今天小编就将带领大家去学习JS注册页面的简单实例,这个方法小编觉得挺不错的,希望能给大家带来帮助,现在我们就一起去了解具体内容吧。
如下所示:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="js/jquery-1.8.0.min.js"></script> <script> // $(function(){ // $("input[name='uname']").blur(function(){ // var unamestr = $(this).val(); // var regstr = /^[\u4e00-\u9fa5]{2,4}$/;//2到4位汉字 // // }); // }); function checkname(){ var regstr = /^[\u4e00-\u9fa5]{2,4}$/; //^匹配开始 $匹配结束,2到4位汉字 var namestr = document.regform.uname.value; if(!regstr.test(namestr)){ x = document.getElementById("errorname").innerHTML="必须2-4位汉字"; // x.style.color="green"; return false; } x=document.getElementById("errorname").innerHTML="格式正确"; // x.style.color="red"; return true; } function checkpass(){ var regstr = /^\w{6,8}$/;// ^匹配开始 $匹配结束 \w表示数字字母下划线 var passstr = document.regform.upass.value; if(!regstr.test(passstr)){ document.getElementById("errorpwd").innerHTML="必须是6-8位数字,字母或下划线"; return false; } document.getElementById("errorpwd").innerHTML="格式正确"; return true; } function checkpass2(){ var passstr = document.regform.upass.value; var passstr2 = document.regform.upass2.value; // alert("fds"); if(passstr==passstr2){ document.getElementById("errorpwd2").innerHTML="两次密码输入一致"; return true; } document.getElementById("errorpwd2").innerHTML="两次密码输入不一致"; return false; } function checkForm(){ if(checkname()&&checkpass()&&checkpass2()) return true; return false; } var citylist = new Array(); citylist[0] = ["海淀区","朝阳区","东城区"]; citylist[1] = ["石家庄","邢台","邯郸","保定"]; citylist[2] = ["郑州","开封","洛阳"]; function changecity(prov){ //清空选项框中的选项 document.regform.selcity.innerHTML = ""; if(prov == "0"){ document.regform.selcity.innerHTML = "<option value='0'>选择城市</option>"; return; } var provindex = parseInt(prov)-1; var citys = citylist[provindex]; var optionsstr = ""; for(var i = 0; i < citys.length; i++) { var city = citys[i]; optionsstr += "<option value='" + city + "'>" + city + "</option>"; } document.regform.selcity.innerHTML = optionsstr; } </script> <style> body { font-size: 14px; } #home { width: 600px; height: 300px; background-color: aquamarine; margin: auto;/*div居中*/ margin-top: 50px; padding-top: 20px; } .dl1 { clear: both; } .dl1 dt { width: 150px; float: left; height: 30px; line-height: 30px; text-align: right; } .dl1 dd { padding-top: 8px; float: left; } #div1{ padding-top: 45px; width: 120px; margin: auto; } h1{ text-align: center; } </style> <body> <div id="home"> <h1>用户注册</h1> <form action="index.html" name="regform" method="post" onsubmit="return checkForm()"> <dl class="dl1"> <dt>用户姓名 : </dt> <dd><input type="text" name="uname" onblur="checkname()" /></dd> <dd id="errorname"></dd> </dl> <dl class="dl1"> <dt>用户密码 : </dt> <dd><input type="password" name="upass" onblur="checkpass()"/></dd> <dd id="errorpwd"></dd> </dl> <dl class="dl1"> <dt>再次输入密码 : </dt> <dd><input type="password" name="upass2" onblur="checkpass2()" /></dd> <dd id="errorpwd2"></dd> </dl> <dl class="dl1"> <dt>用户性别 : </dt> <dd> <input type="radio" name="sex" checked="checked" />男 <input type="radio" name="sex" />女 </dd> <dd id="errorpwd"></dd> </dl> <dl class="dl1"> <dt>用户爱好 : </dt> <dd> <input type="checkbox" />上网 <input type="checkbox" />读书 <input type="checkbox" />唱歌 </dd> </dl> <dl class="dl1"> <dt>用户籍贯 : </dt> <dd> <select name="selprov" onchange="changecity(this.value)"> <option value="0">选择省份</option> <option value="1">北京</option> <option value="2">河北</option> <option value="3">河南</option> </select> </dd> <dd> <select name="selcity"> <option value="0">选择城市</option> </select> </dd> </dl> <div id="div1"> <input type="submit" value="提交"/> ?<input type="reset" value="重置"/> </div> </form> </div> </body> </html>
以上这篇JS注册页面的简单实例就是小编分享给大家的全部内容了,欢迎您收藏本站,我们将为您提供最新的JavaScript资源。
原文链接:https://js.aizhan.com/develop/JavaScript/9040.html
如有疑问请与原作者联系
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- JS简单去除数组中重复项的方法 2020-03-16
- JS判断浏览器是否安装flash插件的简单方法 2020-03-12
- js调用刷新界面的几种方式 2020-03-05
- JavaScript简单下拉菜单特效 2020-02-22
- 默认让页面的第一个控件选中的javascript代码 2020-02-20
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash