版权声明：本文原创为夏狮狮，转载请说明出处！ https://blog.csdn.net/weixin_42470791/article/details/82121429
js实现注册
常用的正则表达式大全:http://blog.csdn.net/onebigday/article/details/5429868 正则表达式在信息的匹配，验证上起很大的作用。 深入理解正则表达式http://www.cnblogs.com/China3S/archive/2013/11/30/3451971.html
下面是代码区
一.css样式代码块
<style type="text/css">
body{
background-color:rgb(177, 208,224); font: normal 12px Trebuchet MS; color:#000;
}
.roundedCorners{
width:350px; padding:10px;
background-color:#DDEEF6;
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>二.HTML代码块
<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>三.js代码块
<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;
}
/*
电子邮件
[email protected]
[email protected]
[email protected]
[email protected]
[email protected]
邮箱用户名必须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>阅读后欢迎任何一个小可爱发表意见以及建议 ，还需不停进步 不停学习呢❥