正则表达式用户注册界面设计

iAsmoday

2024-04-24 帮助1人

学新通

<!DOCTYPE html>
<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>

这篇好文章是转载于：学新通技术网

正则表达式用户注册界面设计

photoshop保存的图片太大微信发不了怎么办

Android 11 保存文件到外部存储，并分享文件

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

怎样阻止微信小程序自动打开

TikTok加速器哪个好免费的TK加速器推荐