javascript注册信息代码功能实现
user_add.jsp的内容呢
（1）完成注册页面样式如下：
（2）页面提交，用户注册信息不符合规范，要显示红色提示框，如下：
（3）页面提交，用户注册信息不符合规范，要显示绿色提示框，如下：
分析：HTML实现页面元素，css做页面美化，javaScript 实现逻辑校验；用户注册规则采用正则表达式。
1、HTML实现注册页面。
注：在本文中，对代码的详细解释都放在了相应的代码旁边注释内，类似代码不重复注释。
<span style="font-size:14px;"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <!-- HTTP标题信息(HTTP-EQUIV) --> <title>用户注册页面</title> <link type="text/css" rel="stylesheet" href="register.css"> <!--引入外部定义好的register.css文件 --> <script type="text/javascript" src="register.js"></script> <!--引入外部定义好的register.js文件 --> </head> <body> <form action="" method="" onsubmit="return validateForm()"> <!-- 当触发提交事件时调用validateForm()方法 --> <table border="26" align="center" width="50%"> <caption >用户注册</caption> <tr> <td align="right"> <sup><font color="red">*</font></sup>用户名： </td> <td><input type="text" name="username" id="username" class="input_class" onblur="checkUsername(this)" /><span id="username_span">用户名由3-5个字符组成</span></td> </tr> <tr> <td align="right"> <sup><font color="red">*</font></sup>密码： </td> <td><input type="password" name="password" id="password" class="input_class" onblur="checkPassword(this)" /><span id="password_span">请输入8-12位密码</span></td> </tr> <tr> <td align="right"> <sup><font color="red">*</font></sup>确认密码： </td> <td><input type="password" name="rePassword" id="rePassword" class="input_class" onblur="checkRePassword(this)" /><span id="rePassword_span">两次密码不一致</span></td> </tr> <tr> <td align="right"> <sup><font color="red">*</font></sup>Email： </td> <td><input type="text" name="Email" id="Email" class="input_class" onblur="checkEmail(this)" /><span id="Email_span" >格式示例：xxxxxxxx@163.com</span></td> </tr> <tr> <td align="right"> <sup><font color="red">*</font></sup>真实姓名： </td> <td><input type="text" name="realName" id="realName" class="input_class" onblur="checkName(this)" /><span id="realName_span">由2-5个中文组成</span></td> </tr> <tr> <td align="right"> <sup><font color="red">*</font></sup>省份： </td> <td><select name="province" id="province" onblur="checkProvince(this)"> <option value="--请选择--">--请选择--</option> <option value="河北">河北</option> <option value="山西">山西</option> <option value="山东">山东</option> <option value="海南">海南</option> </select><span id="province_span">请选择省份</span></td> </tr> <tr> <td align="left" colspan="2"> <sup><font color="red">*</font></sup>技术方向： <input type="radio" name="jishu" id="java" value="java" checked="checked" />java <!-- 技术方向默认选中java --> <input type="radio" name=".jishu" id=".net" value=".net" />.net <input type="radio" name="jishu" id="php" value="php" />php <input type="radio" name="jishu" id="网页" value="网页" />网页 <input type="radio" name="jishu" id="IOS" value="IOS" />IOS </td> </tr> <tr> <td align="center" colspan="2"> <!-- 合并两列 --> <input type="submit" class="aaa" value="注册" /> <input type="reset" class="aaa" value="重置" /> </td> </tr> </table> </form> </body></html> </span>2、css进行页面美化。
在本文 css 代码中主要根据类选择器、标签选择器来设置相应的标签样式：
<span style="font-size:14px;">.input_class { /*设置class属性名称为input_class的标签内容*/ width:250px; height:16px; } caption{ /*设置caption标签内容*/ font-size:30px; color:red; text-shadow: yellow 6px 0px 5px; font-stretch: wider; font-weight: 900; } .aaa{ /*设置class属性名称为aaa的标签内容*/ font-size:16px; font-weight: bold;} </span>3、javaScript 进行逻辑校验。
在javaScript 代码中需要用到正则表达式来简化验证：
<span style="font-size:14px;">/** * @author 胡根得 * 2015/12/08 */ //用户名： var usernameRegex = /^w{3,15}$/; //密码： var passwordRegex = /^w{6,12}$/; //邮箱： var emailRegex = /^w+@w+(.w+)+$/; //真实姓名： var realNameRegex = /^[u4e00-u9fa5]{2,5}$/; //alert("222"); function validateForm(){ //定义validateForm方法用于客户端校验 var flag = true; //校验用户名 var usernameNode = byId("username"); //获得ID值为username的节点对象 var username = usernameNode.value; //获得usernameNode节点的值，即用户在username文本框内填写的值 if(!usernameRegex.test(username)){ //验证获得到的值是否符合正则表达式 byId("username_span").style.color = "red"; //如果不符合，则将ID值为username_span的节点对象内容变为红色 flag = false; //返回false，不提交 } //校验密码 var passwordNode = byId("password"); //获得ID值为password的节点对象 var password = passwordNode.value; if(!passwordRegex.test(password)){ byId("password_span").style.color = "red"; flag = false; } //确认密码 var rePasswordNode = byId("rePassword"); //获得ID值为rePassword的节点对象 var rePassword = rePasswordNode.value; if(!password==rePassword){ byId("rePassword_span").style.color = "red"; flag = false; }else if(!passwordRegex.test(rePassword)){ byId("rePassword_span").style.color = "red"; flag = false; }else{ byId("rePassword_span").style.color = "green"; } //校验邮箱 var emailNode = byId("Email"); //获得ID值为Email的节点对象 var email = emailNode.value; if(!emailRegex.test(email)){ byId("Email_span").style.color = "red"; flag = false; } //校验姓名 var realNameNode = byId("realName"); //获得ID值为realName的节点对象 var realName = realNameNode.value; if(!realNameRegex.test(realName)){ byId("realName_span").style.color = "red"; flag = false; } //校验省份 var provinceNode = byId("province"); //获得ID值为province的节点对象 var province = provinceNode.value; if("--请选择--" == province){ byId("province_span").style.color = "red"; flag = false; } return flag; } function byId(id){ //自定义方法，用于获取传递过来的ID值对应的节点对象 return document.getElementById(id); } function checkUsername(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范 //校验用户名 var username = node.value; //得到传递过来的节点对象的值 if(!usernameRegex.test(username)){ //验证是否符合节点对应的正则表达式 byId("username_span").style.color = "red"; //不符合，相应内容变成红色 }else{ byId("username_span").style.color = "green"; //符合，相应内容变成绿色 } } function checkPassword(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范 //校验密码 var password = node.value; //alert("111"); if (!passwordRegex.test(password)) { byId("password_span").style.color = "red"; } else { byId("password_span").style.color = "green"; } } function checkRePassword(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范 //确认密码 var rePassword = node.value; var password = byId("password").value; //alert(repassword+"***"+password); if(!password==rePassword){ byId("rePassword_span").style.color = "red"; }else if(!passwordRegex.test(rePassword)){ byId("rePassword_span").style.color = "red"; }else{ byId("rePassword_span").style.color = "green"; } } function checkEmail(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范 //校验邮箱 var email = node.value; if(!emailRegex.test(email)){ byId("Email_span").style.color = "red"; }else{ byId("Email_span").style.color = "green"; } } function checkName(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范 var realName = node.value; if(!realNameRegex.test(realName)){ byId("realName_span").style.color = "red"; }else{ byId("realName_span").style.color = "green"; } } function checkProvince(node){ //当鼠标离开节点时调用此方法，验证节点内容是否符合注册规范 var province = node.value; if("--请选择--" == province){ byId("province_span").style.color = "red"; }else{ byId("province_span").style.color = "green"; } }
--------------------- 作者：胡根得 来源：CSDN 原文：https://blog.csdn.net/fightfaith/article/details/50277337 版权声明：本文为博主原创文章，转载请附上博文链接！