<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>用户注册</title>
<style type="text/css">
body {
background-color: rgb(177, 208, 224);
font: normal 12px Trebuchet MS;
color: #000;
}
.roundedCorners {
width: 350px;
padding: 10px;
background: #58bc58;
box-shadow: 0px 0px 10px 0px #888888;
border: 1px solid #DDEEF6;
border-radius: 6px;
margin: auto;
}
.roundedCorners-textbox {
border: 1px solid #999;
width: 250px;
}
.checkbox {
margin-left: 30px;
border: 1px solid #999;
width: 20px;
}
.label {
display: inline-block;
width: 50px;
text-align: center;
}
.default {
color: grey;
font-size: 12px;
}
.input {
color: grey;
font-size: 12px;
}
</style>
</head>
<script>
window.onload = function () {
/*
表单提交是默认行为
* preventDefault()
* returnValue = false;
知识点：
* 正则表达式的方法
* reg.test(str)：用正则表达式reg验证str是否合法
* exec() 等同于 match
* 分组：()
* 引用
* 正则内引用：\n \1,\2
* 正则外引用：$n $1,$2
* 非：
* ^
* [^\d]
* 表示所有字符：[\s\S],[\w\W],[\d\D]
*/
var btnCheck = document.getElementById(‘btnCheck‘);
btnCheck.onclick = function (e) {
/*
如果以下表单有一个不符合，则不允许提交表单
*/
e = e || window.event;
/*
验证账号
* 不能为空，
* 不能使用特殊字符（数字、字母、下划线、横杠）开头，
* 必须以字母开头，
* 长度6-20
*/
var username = document.getElementById(‘username‘).value;
if (!/^[a-z][\w\-]{5,19}$/.test(username)) {
alert(‘您输入的用户名不合法‘);
// e.preventDefault();
// return;
return false;
}
//昵称只能输入中文
var nickname = document.getElementById(‘nickname‘).value;
if (!/^[\u2E80-\u9FFF]+$/.test(nickname)) {
alert(‘昵称必须为中文‘);
return false;
}
/*
电子邮件
jinrong.xie@qq.com
123@qq.com
x_x@163.com
x-x@a-r.com.cn
x.x@laoxie.com
邮箱用户名必须3-30个字符
*/
var email = document.getElementById(‘email‘).value;
if (!/^[a-z0-9][\w\-\.]{2,29}@[a-z0-9\-]{2,67}(\.[a-z\u2E80-\u9FFF]{2,6})+$/.test(email)) {
alert(‘邮箱格式错误‘);
return false;
}
/*
身份证
18/15
445655 19900707 2165
445655 19900707 211x
*/
var identity = document.getElementById(‘identity‘).value;
if (!/^(\d{17}|\d{14})[\dx]$/.test(identity)) {
alert(‘身份证格式错误‘);
return false;
}
/*
手机号码
11位
158 8888 8888
1 [34578]
*/
var phone = document.getElementById(‘phone‘).value;
if (!/^1[3-9]\d{9}$/.test(phone)) {
alert(‘手机号错误‘);
return false;
}
/*
生日
1999/05/08
1999-5-8
19990508
1999-05/08 不合法
199905
引用分组
* 正则内：\n
* 正则外:$n
分组顺序：以左括号出现的顺序为分组顺序
*/
var birthday = document.getElementById(‘birthday‘).value;
if (!/^\d{4}([\/\-]?)\d{1,2}\1\d{1,2}$/.test(birthday)) {
alert(‘生日格式错误‘);
return false;
}
/*
密码
长度6-20
不能包含空格
*/
var password = document.getElementById(‘password‘).value;
if (!/^\S{6,20}$/.test(password)) {
alert(‘密码禁止空格‘);
return false;
}
var confirm_pwd = document.getElementById(‘confirm_pwd‘).value;
if (confirm_pwd != password) {
alert(‘两次输入密码不一致，请你仔细看看‘);
return false;
}
}
// 根据身份自动写入生日
document.getElementById(‘identity‘).onblur = function () {
// 445655199007072165
var res = this.value.match(/\d{6}(\d{8})\d{4}/);
if (res) {
res = res[1];
}
document.getElementById(‘birthday‘).value = res;
}
}
</script>
<body>
<form id="myform" action="05success.html" method="get">
<div class="roundedCorners">
<label class="label">账号</label>
<input id="username" name="username" type="text" placeholder="用户名长度为6-20，禁止特殊字符" class="default roundedCorners-textbox" />
<br />
<br />
<label class="label">昵称</label>
<input id="nickname" name="nickname" type="text" class="roundedCorners-textbox" />
<br />
<br />
<label class="label">电子邮件</label>
<input id="email" name="email" type="text" class="roundedCorners-textbox" />
<br />
<br />
<label class="label">身份证</label>
<input id="identity" name="identity" type="text" class="roundedCorners-textbox" />
<br />
<br />
<label class="label">手机号码</label>
<input id="phone" name="phone" type="text" class="roundedCorners-textbox" />
<br />
<br />
<label class="label">生日</label>
<input id="birthday" name="birthday" type="text" class="roundedCorners-textbox" />
<br />
<br />
<label class="label">密码</label>
<input id="password" name="password" type="password" class="roundedCorners-textbox" />
<br />
<br />
<label class="label">确认密码</label>
<input id="confirm_pwd" name="confirm_pwd" type="text" class="roundedCorners-textbox" />
<br />
<br />
<input type="checkbox" class="checkbox" />
<label>10天内免登陆</label>
<br/>
<br/>
<input type="submit" id="btnCheck" value="确定" />
<input type="reset" value="清空" />
</div>
</form>
</body>
</html>