正则表达式用户注册界面设计
-
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<title>用户注册</title>
-
<style>
-
* {
-
margin: 0;
-
padding: 0;
-
background-color: #cecbcb;
-
}
-
div {
-
width: 600px;
-
margin: auto;
-
}
-
span {
-
color: #76151d;
-
}
-
table {
-
margin-top: 36px;
-
}
-
td {
-
padding: 12px;
-
}
-
input {
-
width: 150px;
-
height: 24px;
-
border-radius: 3px;
-
}
-
button {
-
width: 90px;
-
height: 30px;
-
border-radius: 5px;
-
background-color: #54b454;
-
}
-
</style>
-
<script>
-
//1.验证用户名 6~10位字母、数字,第一位必须是字母
-
function checkUsername(id,infoId) {
-
var reg = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/
-
var username = document.getElementById(id).value;
-
if (!reg.test(username)) {
-
setInfo(infoId,'用户名为6~10位字母/数字,首位是字母')
-
return false
-
}
-
return true
-
}
-
//2.验证密码 6~10位数字
-
function checkPassword(id,infoId) {
-
var reg = /^[0-9]{6,10}$/
-
var password = document.getElementById(id).value;
-
if (!reg.test(password)) {
-
setInfo(infoId,'密码为6~10位数字')
-
return false
-
}
-
return true
-
}
-
//3.重复密码
-
function checkPasswordAgain(pwd1,pwd2,infoId) {
-
var pwd1 = document.getElementById(pwd1).value;
-
var pwd2 = document.getElementById(pwd2).value;
-
if (pwd1 != pwd2) {
-
setInfo(infoId,'两次输入的密码不一致')
-
return false
-
}
-
return true
-
}
-
//4.电子邮箱
-
function checkEmail(id,infoId) {
-
var reg = /^\w[-\w. ]*@([A-Za-z0-9][-A-Za-z0-9] \.) [A-Za-z]{2,14}$/
-
var email = document.getElementById(id).value;
-
if (!reg.test(email)) {
-
setInfo(infoId,'电子邮箱格式不正确')
-
return false
-
}
-
return true
-
}
-
//5.手机号
-
function checkTel(id,infoId) {
-
var reg = /^[0-9]{11}$/
-
var tel = document.getElementById(id).value;
-
if (!reg.test(tel)) {
-
setInfo(infoId,'手机号为11位数字')
-
return false
-
}
-
return true
-
}
-
//6.QQ
-
function checkQQ(id,infoId) {
-
var reg = /^[1-9][0-9]{5,9}$/
-
var qq = document.getElementById(id).value;
-
if (!reg.test(qq)) {
-
setInfo(infoId,'QQ为6~10位的数字')
-
return false
-
}
-
return true
-
}
-
//7.验证所有
-
function checkAll() {
-
if (checkUsername('username','usernameInfo') && checkPassword('password','passwordInfo') &&
-
checkPasswordAgain('password','passwordAgain','passwordAgainInfo') &&
-
checkTel('tel','telInfo') && checkEmail('email','emailInfo') && checkQQ('qq','qqInfo')) {
-
return true
-
}
-
return false
-
}
-
//8.设置提示信息
-
function setInfo(id,info) {
-
document.getElementById(id).innerText = info;
-
}
-
//9.清空信息
-
function clearInfo(id) {
-
document.getElementById(id).innerText = ""
-
}
-
</script>
-
</head>
-
<body>
-
<div id="div1">
-
<form action="#" method="post" onsubmit="return checkAll()">
-
<table>
-
<tr>
-
<td><label>账号</label></td>
-
<td>
-
<input type="text" id="username" placeholder="请输入账号" autofocus="autofocus"
-
onblur="checkUsername('username','usernameInfo')" onfocus="clearInfo('usernameInfo')" />
-
</td>
-
<td><span id="usernameInfo"></span></td>
-
</tr>
-
<tr>
-
<td><label>密码</label></td>
-
<td>
-
<input type="password" id="password" placeholder="请输入密码"
-
onblur="checkPassword('password','passwordInfo')" onfocus="clearInfo('passwordInfo')" />
-
</td>
-
<td><span id="passwordInfo"></span></td>
-
</tr>
-
<tr>
-
<td><label>确认密码</label></td>
-
<td>
-
<input type="password" id="passwordAgain" placeholder="请再次输入密码"
-
onblur="checkPasswordAgain('password','passwordAgain','passwordAgainInfo')"
-
onfocus="clearInfo('passwordAgainInfo')" />
-
</td>
-
<td><span id="passwordAgainInfo"></span></td>
-
</tr>
-
<tr>
-
<td><label>邮箱</label></td>
-
<td>
-
<input type="text" id="email" placeholder="请输入电子邮箱"
-
onblur="checkEmail('email','emailInfo')" onfocus="clearInfo('emailInfo')" />
-
</td>
-
<td><span id="emailInfo"></span></td>
-
</tr>
-
<tr>
-
<td><label>手机号</label></td>
-
<td>
-
<input type="text" id="tel" placeholder="请输入手机号"
-
onblur="checkTel('tel','telInfo')" onfocus="clearInfo('telInfo')"/>
-
</td>
-
<td><span id="telInfo"></span></td>
-
</tr>
-
<tr>
-
<td><label>QQ</label></td>
-
<td>
-
<input type="text" id="qq" placeholder="请输入QQ"
-
onblur="checkQQ('qq','qqInfo')" onfocus="clearInfo('qqInfo')" />
-
</td>
-
<td><span id="qqInfo"></span></td>
-
</tr>
-
<tr>
-
<td colspan="2" style="text-align: center">
-
<button type="submit">注册</button>
-
<button type="reset">重置</button>
-
</td>
-
</tr>
-
</table>
-
</form>
-
</div>
-
</body>
-
</html>
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhgffafb
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01