HTML实现注册功能
来源：互联网 发布：朋友圈算法 编辑：程序博客网 时间：2024/05/22 11:57
HTML实现注册功能
正则表达式，验证用户的输入是否符合系统要求
<script type="text/javascript"> function check_input() { var username = document.getElementById("username").value; var password = document.getElementById("password").value; var confirm = document.getElementById("confirm").value; var email = document.getElementById("email").value; var phone = document.getElementById("phone").value; var birthday = document.getElementById("birthday").value; var gender; //性别 //“^”是代表以什么开头，“$”是代表以什么结尾。比如：/^\dA$/ //这个就匹配，以数字开头，并且一大写字母A结尾的字符串。 //var reg_username = /[A-Za-z][A-Za-z0-9_]{6,16}/; var reg_username = /^[a-zA-Z][a-zA-Z0-9]{5,16}$/; var reg_password = /^[a-zA-Z0-9_]{6,12}$/; var reg_mail = /^\w+@\w+(\.[a-zA-Z]{2,3}){1,2}$/; var reg_phone = /^1\d{10}$/; var reg_birthday = /^([12]\d{3})-(([1-9])|(1[012])|(0[1-9]))-(([1-9])|([12]\d)|(3[01]))$/; //身份证校验： reg=/\d{17}[0-9xX]/ 前17位为数字第18位为数字或者字母X或x if(!reg_username.test(username)) //用户名判断 { alert("用户名输入有误，只能是字母数字下划线，6-16位"); } else if(!reg_password.test(password)) { alert("密码输入有误，只能是字母数字下划线6-12位"); } else if(confirm != password) { alert("两次密码输入的不一致"); } else if(!reg_mail.test(email)) { alert("邮箱输入有误") } else if(!reg_phone.test(phone)) { alert("手机号输入有误"); } else if(!reg_birthday.test(birthday)) { alert("日期输入不正确"); } else if(!checkGender()) { alert("请选择性别"); }else if(!checkHobbys()) { alert("请至少选择一项兴趣"); } else { var gender = getGender(); var interests = getInterest(); var city = getCity(); var date = new Date(); alert("注册成功"); document.write("<h1>欢迎您， "+username+"</h1><br/>"); document.write("用户名： "+username+"<br/>"); document.write("密码： "+password+"<br/>"); document.write("邮箱： "+email+"<br/>"); document.write("手机： "+phone+"<br/>"); document.write("出生日期："+birthday+"<br/>"); document.write("性别： "+gender+"<br/>"); document.write("兴趣： "+interests+"<br/>"); document.write("城市： "+city+"<br/>"); document.write("注册时间："+date.toLocaleString()+"<br/>"); } } //性别检测 function checkGender() { var man = document.getElementById("man"); var women = document.getElementById("women") if(man.checked || women.checked) { return true; }else { return false; } } //性别检测另一种方法 function checkSex() { //获取页面中同名的元素，返回一个元素数组 var gender = document.getElementsByName("gender"); //gender.length获取数组的长度 //循环获取当前选中状态的性别的值 for(var i =0;i<gender.length;i++) { //判断某项的checked是否被选中，选中返回true if(gender[i].checked) { alert(gender[i].value); break; } } } //兴趣检测 function checkHobbys() { var interests = document.getElementsByName("interest"); var flag = false; //只要有兴趣项被选中即可 for(var i=0;i<interests.length;i++) { if(interests[i].checked) { flag =true; } } return flag; } //获取选中的性别 function getGender() { var man = document.getElementById("man"); var women = document.getElementById("women") if(man.checked) { return man.value; }else if(women.checked) { return women.value; }else { return ""; } } //获取选中的爱好选项 function getInterest() { var result=""; var interests = document.getElementsByName("interest"); for(var i=0;i<interests.length;i++) { if(interests[i].checked) { result+=interests[i].value+" "; } } return result; } //获取选中的城市 function getCity() { var city=""; var citys = document.getElementById("city"); for(var i=0;i<citys.length;i++) { if(citys[i].selected) { city = citys[i].text; } } return city; } //产生测试数据 function Generate_data() { document.getElementById("username").value = "QQ764073542"; document.getElementById("password").value = "SoftStar"; document.getElementById("confirm").value = "SoftStar"; document.getElementById("email").value = "QQ764073542@163.com"; document.getElementById("phone").value = "15194070000"; document.getElementById("birthday").value = "2015-11-11"; document.getElementsByName("gender")[0].checked = "checked"; document.getElementsByName("interest")[0].checked = "checked"; document.getElementsByName("interest")[1].checked = "checked"; document.getElementById("city").text = "山东"; //document.getElementById("usernameSpan").innerHTML = "格式要求2"; } </script> HTML页面
<body> <fieldset style="width:80% ;margin-left:10%"> <legend> 新用户注册 </legend> <form> <table border="1" width="60%" align="center" cellpadding="5" cellspacing="0"> <tr> <td width="20%"> 用户名: </td> <td> <input type="text" name="username" id="username">字母数字下划线[6-16位]，字母开头<span id="usernameSpan"></span> </td> </tr> <tr> <td> 密码: </td> <td> <input type="password" name="password" id="password">字母数字下划线[6-12位]<span id="passwordSpan"></span> </td> </tr> <tr> <td> 确认密码: </td> <td> <input type="password" name="confirm" id="confirm"><span id="confirmSpan"></span> </td> </tr> <tr> <td> 邮箱: </td> <td> <input type="text" name="email" id="email"><span id="emailSpan"></span> </td> </tr> <tr> <td> 手机: </td> <td> <input type="text" name="phone" id="phone"><span id="phonelSpan"></span> </td> </tr> <tr> <td> 出生日期: </td> <td> <input type="text" name="birthday" id="birthday">例如：2015-8-8<span id="birthdaySpan"></span> </td> </tr> <tr> <td> 性别: </td> <td> <input type="radio" id="man" name="gender" value="male">男<input type="radio" id="women" name="gender" value="female">女<span id="genderSpan"></span> </td> </tr> <tr> <td> 兴趣: </td> <td> <input type="checkbox" name="interest" value="java">Java <input type="checkbox" name="interest" value="HTML">HTML <input type="checkbox" name="interest" value="javascript">JavaScript<span id="interestSpan"></span> </td> </tr> <tr> <td> 城市: </td> <td> <select id="city"> <option value="sd">山东</option> <option value="sh">上海</option> <option value="bj" >北京</option> <option value="gz">广州</option> <option value="cd">成都</option> <option value="qt">其他</option> </select> <span id="citySpan"></span> </td> </tr> <tr> <td colspan="2" align="center"> <input type="button" onclick="check_input()" value="新用户注册"> <input type="button" onclick="Generate_data()" value="产生测试数据"> </td> </tr> </table> </form> </fieldset> </body>目前只能够通过按钮点击执行js代码，消息都是通过弹窗显示。
效果展示：
采用监听鼠标onblur事件，并打印输出方式题型
window.onload = function(){ //通过ID或名字获取每个对象 var usernameObj = document.getElementById("username"); var passwordObj = document.getElementById("password"); var confirmObj = document.getElementById("confirm"); var emailObj = document.getElementById("email"); var birthdayObj = document.getElementById("birthday"); var genderArr = document.getElementsByName("gender"); var interestArr = document.getElementsByName("interest"); var cityObj = document.getElementById("city"); //设置每个对象的onblur事件(对象失去焦点时发生),并调用各自的方法 usernameObj.onblur = checkUsername; passwordObj.onblur = checkPassword; confirmObj.onblur = checkConfirm; emailObj.onblur = checkEmail; birthdayObj.onblur = checkBirthday; genderArr.onblur = checkGender; interestArr.onblur = checkInterest; cityObj.onblur = checkCity; //每个onblur事件的方法,8个方法 function checkUsername(){ var usernameValue = trim(usernameObj.value); var usernameRegex = /^[a-zA-Z_]\w{0,16}$/; var msg ="<img src='img/true.png' style='width:12px'>"; if(usernameValue == null || usernameValue == "") msg ="<font color='red'>用户名必须填写!</font>"; else if(!usernameRegex.test(usernameValue)) msg ="<font color='red'>用户名格式不正确</font>"; var span = document.getElementById("usernameSpan"); span.innerHTML = msg; return msg == "<img src='img/true.png' style='width:12px'>"; } function checkPassword(){ var passwordValue = passwordObj.value; var passwordRegex = /^\w{6,10}$/; var msg ="<img src='img/true.png' style='width:12px'>"; if (!passwordValue) msg = "<font color='red'>密码必须填写!</font>"; else if (!passwordRegex.test(passwordValue)) { msg = "<font color='red'>密码必须6-16位</font>"; //alert(msg); } var span = document.getElementById("passwordSpan"); span.innerHTML = msg; return msg == "<img src='img/true.png' style='width:12px'>"; } function checkConfirm(){ var confirmValue = confirmObj.value; var passwordValue = passwordObj.value; var msg ="<img src='img/true.png' style='width:12px'>"; if (!confirmValue) msg = "<font color='red'>确认密码必须填写!</font>"; else if (confirmValue != passwordValue) msg = "<font color='red'>密码必须一致!</font>"; var span = document.getElementById("confirmSpan"); span.innerHTML = msg; return (msg == "<img src='img/true.png' style='width:12px'>"); } function checkEmail(){ var emailObjValue = emailObj.value; var emailRegex = /^[\w-]+@([\w-]+\.)+[a-zA-Z]{2,3}$/; var msg ="<img src='img/true.png' style='width:12px'>"; if(!emailObjValue) msg = "<font color='red'>Email必须填写!</font>"; else if(!emailRegex.test(emailObjValue)) msg = "<font color='red'>Email格式不正确!</font>"; var span = document.getElementById("emailSpan"); span.innerHTML = msg; return msg == "<img src='img/true.png' style='width:12px'>"; } function checkBirthday(){ var birthdayValue = birthdayObj.value; var birthdayRegex = /^([12]\d{3})-(([1-9])|(1[012])|(0[1-9]))-(([1-9])|([12]\d)|(3[01]))$/; var msg ="<img src='img/true.png' style='width:12px'>"; if(!birthdayValue) msg = "<font color='red'>生日必须填写!</font>"; else if(!birthdayRegex.test(birthdayValue)) msg = "<font color='red'>出生日期格式不正确!</font>"; var span = document.getElementById("birthdaySpan"); span.innerHTML = msg; return msg == "<img src='img/true.png' style='width:12px'>"; } function checkGender(){ //var genderValue = genderObj.value; var msg ="<img src='img/true.png' style='width:12px'>"; if(genderArr[0].checked == genderArr[1].checked) msg = "<font color='red'>性别必须选择!</font>"; var span = document.getElementById("genderSpan"); span.innerHTML = msg; return msg == "<img src='img/true.png' style='width:12px'>"; } function checkInterest(){ var msg ="<img src='img/true.png' style='width:12px'>"; if(!(interestArr[0].checked || interestArr[1].checked || interestArr[2].checked)) msg = "<font color='red'>兴趣必须选择!</font>"; var span = document.getElementById("interestSpan"); span.innerHTML = msg; return msg == "<img src='img/true.png' style='width:12px'>"; } function checkCity(){ //var cityValue = cityObj.value; var msg ="<img src='img/true.png' style='width:12px'>"; if(!cityObj.value) msg = "<font color='red'>城市必须选择!</font>"; var span = document.getElementById("citySpan"); span.innerHTML = msg; return msg == "<img src='img/true.png' style='width:12px'>"; } //获取表单对象,并且为表单提交事件写个方法 var form = document.getElementById("form"); form.onsubmit = function(){ var bUsername = checkUsername(); var bPassword = checkPassword(); var bConfirm = checkConfirm(); var bEmail = checkEmail(); var bBirthday = checkBirthday(); var bGender = checkGender(); var bInterest = checkInterest(); var bCity = checkCity(); //如果,每个上面的每个对象,验证成功,则还回true return bUsername && bPassword && bConfirm && bEmail && bBirthday && bGender && bInterest && bCity; } //去除用户名前后的空格 function trim(s){ return s.replace(/^\s+|\s+$/g,""); } } //以上内容摘自其他文章前台HTML页面
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GB18030"> <title>Insert title here</title> <style type="text/css"> input[type = "text"], input[type = "password"] { width: 150px; } </style> <script type="text/javascript" src="js/checkForm.js"> </script> </head> <body> <fieldset style="width:80% ;margin-left:10%"> <legend> 新用户注册 </legend> <form action="success.html" method="post" id="form"> <table border="1" width="60%" align="center" cellpadding="5" cellspacing="0"> <tr> <td width="20%"> 用户名: </td> <td> <input type="text" name="username" id="username"><span id="usernameSpan"></span> </td> </tr> <tr> <td> 密码: </td> <td> <input type="password" name="password" id="password"><span id="passwordSpan"></span> </td> </tr> <tr> <td> 确认密码: </td> <td> <input type="password" name="confirm" id="confirm"><span id="confirmSpan"></span> </td> </tr> <tr> <td> 邮箱: </td> <td> <input type="text" name="email" id="email"><span id="emailSpan"></span> </td> </tr> <tr> <td> 出生日期: </td> <td> <input type="text" name="birthday" id="birthday"><span id="birthdaySpan"></span> </td> </tr> <tr> <td> 性别: </td> <td> <input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女<span id="genderSpan"></span> </td> </tr> <tr> <td> 兴趣: </td> <td> <input type="checkbox" name="interest" value="java">Java <input type="checkbox" name="interest" value="HTML">HTML <input type="checkbox" name="interest" value="javascript">JavaScript<span id="interestSpan"></span> </td> </tr> <tr> <td> 城市: </td> <td> <select id="city"> <option value="bj" >北京</option> <option value="gz">广州</option> <option value="cd">成都</option> <option value="sd">山东</option> </select> <span id="citySpan"></span> </td> </tr> <tr> <td colspan="2" align="center"> <input type="submit" value="新用户注册"> <input type="button" onclick="Generate_data()" value="产生测试数据"> </td> </tr> </table> </form> </fieldset> <script type="text/javascript"> //产生测试数据 function Generate_data() { document.getElementById("username").value = "QQ764073542"; document.getElementById("password").value = "SoftStar"; document.getElementById("confirm").value = "SoftStar"; document.getElementById("email").value = "QQ764073542@163.com"; //document.getElementById("phone").value = "15194076429"; document.getElementById("birthday").value = "2015-11-11"; document.getElementsByName("gender")[0].checked = "checked"; document.getElementsByName("interest")[0].checked = "checked"; document.getElementsByName("interest")[1].checked = "checked"; document.getElementById("city").value = "sd"; //document.getElementById("usernameSpan").innerHTML = "格式要求2"; } </script> </body></html>效果展示：
0 0
- HTML实现注册功能
- 注册功能实现
- 注册 功能的实现
- 注册功能的实现
- 注册功能的实现
- 超酷HTML 5和CSS3实现登录及注册功能表单
- struts2+hibernate4.1+spring4.1+ajax+HTML+css暂时实现登录注册功能
- 求：html注册界面加功能
- HTML 实现注册小案例
- HTML 实现注册小案例
- HTML实现用户注册界面
- html实现用户注册(模板)
- ios 实现注册 登录功能
- JavaBean实现注册验证功能
- android之实现注册功能
- 开发第一步：实现注册功能
- Ajax实现用户注册功能
- Servlet注册功能的实现
- tomcat的安装
- java compiler level does not match the version of the installed java project facet
- 设计模式 - 结构型模式 - 外观模式
- Oracle expdp/impdp导出导入命令及数据库备份(转)
- ORACLE数据库备份与恢复详解
- HTML实现注册功能
- 系统调用和函数调用
- 二分法查找和快速排序 二分法是分治算法的一种特殊形式，利用分治策略求解时，所需时间取决于分解后子问题的个数、子问题的规模大小等因素，而二分法，由于其划分的简单和均匀的特点，是查找数据时经常采用的一种有
- Metasploit入门
- oracle 10g数据库备份与还原总结(转载）
- error LNK2019: 无法解析的外部符号_cvReleaseImage，该符号在函数_main 中被引用
- android访问网络，下载图片，并设置UI
- [知其然不知其所以然-10] linux dmi table matching
- ios 常见github资料
