注册页面:
源代码(与上一篇的《利用CSS对注册页面实现修饰》不一样的地方标注红色):
<!DOCTYPE html>
<html>
<head>
<title>注册页面</title>
<style type="text/css">@import url(2-8-CSS.css);</style>
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="description" content="this is my page">
<meta name="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<script language="javascript" src="2-10-javascript.js"></script> <!--这里采用的是链接外部JavaScript的方法-->
</head>
<body>
<form action="2-10-javascript.js">
<table border="0" align="center" width="700">
<tr><td colspan="3" align="center" height="40" id="title">填写注册信息</td></tr>
<tr><td id="t">用户名:*</td>
<td> <input type="text" name="username"></td>
<td id="i">用户名由字母开头,后跟字母,数字或下划线!</td>
</tr>
<tr><td id="t">密码:*</td>
<td> <input type="password" name="userpassword"></td>
<td id="i">设置登录密码,至少6位!</td>
</tr>
<tr><td id="t">确认密码:*</td>
<td> <input type="password" name="userpassword1"></td>
<td id="i">请再输入一次你的密码!</td>
</tr>
<tr><td id="t">性别:*</td>
<td> <input type="radio" name="usersex" value="男" checked>男
<input type="radio" name="usersex" value="女">女</td>
<td id="i">请选择你的性别!</td>
</tr>
<tr> <td id="t">邮箱地址:*</td>
<td> <input type="text" name="useremail" ></td>
<td id="i"> 请填写你的常用邮箱,可以用次此邮箱找回密码!</td>
</tr>
<tr><td valign="top" id="t">基本情况:*</td>
<td colspan="2">
<textarea name="userbasicinfo" rows="5" cols="50"></textarea></td>
</tr>
<tr><td colspan="3" align="center" height="40">
<input type="checkbox" name="accept" value="yes">
我已仔细阅读并同意接受用户使用协议</td>
</tr>
<tr><td colspan="3" align="center" height="40">
<input type="Button" value="确认" onClick="validate()"/>
<input type="reset" value="取消">
</td>
</tr>
</table>
</form>
</body>
</html>
2-10-JavaScript.js
function validate(){
var name=document.forms[0].username.value;
var pwd=document.forms[0].userpassword.value;
var pwd1=document.forms[0].userpassword1.value;
var email=document.forms[0].useremail.value;
var accept=document.forms[0].accept.checked;
var reg1=/[a-zA-Z]\w*/; //这里使用的是正则表达式
var reg2=/\w+([-+.']\w+)*@\w+([-.]\w+)*.\w+([-.]\w+)*/;
if(name.length<=0)alert("用户名不能为空!");
else if(!reg1.test(name))alert("用户名格式不正确!");
else if(pwd.length<6) alert("密码长度必须大于等于6!");
else if(pwd!=pwd1) alert("两次密码不一致!");
else if(!reg2.test(email)) alert("邮件格式不正确!");
else if(accept==false) alert("您需要仔细阅读并同意接受用户使用协议!");
else document.forms[0].submit();
}
测试界面:
这个案例用到了正则表达式,因此翻看了上学期的java课本复习了一下。
[a-zA-Z]:表示可以是a-zA-Z中包含的任何一个字母。
\w:表示可用于标识符的字符(不包括美元符号)。
\w*:表示*的前一个字符出现零次或多次。
/:表示正则表达式的开始和结束。