<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <script src="https://www.jb51.net/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> <h1>用户注册</h1> <form action="index.html" method="post" onsubmit="return checkForm()"> <dl> <dt>用户姓名 : </dt> <dd><input type="text" onblur="checkname()" /></dd> <dd></dd> </dl> <dl> <dt>用户密码 : </dt> <dd><input type="password" onblur="checkpass()"/></dd> <dd></dd> </dl> <dl> <dt>再次输入密码 : </dt> <dd><input type="password" onblur="checkpass2()" /></dd> <dd></dd> </dl> <dl> <dt>用户性别 : </dt> <dd> <input type="radio" checked="checked" />男 <input type="radio" />女 </dd> <dd></dd> </dl> <dl> <dt>用户爱好 : </dt> <dd> <input type="checkbox" />上网 <input type="checkbox" />读书 <input type="checkbox" />唱歌 </dd> </dl> <dl> <dt>用户籍贯 : </dt> <dd> <select onchange="changecity(this.value)"> <option value="0">选择省份</option> <option value="1">北京</option> <option value="2">河北</option> <option value="3">河南</option> </select> </dd> <dd> <select> <option value="0">选择城市</option> </select> </dd> </dl> <div> <input type="submit" value="提交"/> <input type="reset" value="重置"/> </div> </form> </div> </body> </html>
以上这篇JS一个简单的注册页面实例就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章: