直播软件app开发，js 表单验证，登录注册
直播软件app开发，js 表单验证，登录注册
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.conter {
margin: 0 auto;
/* padding: 20px; */
width: 550px;
height: 500px;
box-shadow: 1px 1px 3px #000;
overflow: hidden;
}
input {
width: 250px;
height: 30px;
}
h1 {
line-height: 1;
width: 550px;
/* height: 100px; */
border-bottom: 5px solid #3275c3;
margin: 0;
padding: 20px;
}
p {
margin-left: 40px;
}
button {
width: 100px;
height: 40px;
border: 2px solid #d3e1fb;
border-radius: 10px;
font-size: 18px;
color: #fff;
margin-left: 150px;
}
.cuowu {
border: 2px solid #f00;
}
.dui {
border: 2px solid #3275c3;
}
</style>
</head>
<body>
<div>`
<h1>新用户注册</h1>
<form action="">
<p>
<span> 用户名：</span><input type="text" id="id">
</p>
<p>
<span>  密码：</span><input type="password" id="pwd">
</p>
<p>
<span>确认密码：</span><input type="password" id="pswd">
</p>
<p>
<span>电子邮箱：</span><input type="text" id="you">
</p>
<p>
<span>手机号码：</span><input type="text" id="shouji">
</p>
<p>
<span>  生日：</span><input type="text" id="sheng">
</p>
<button type="submit" id="submit">注册完成</button>
</form>
</div>
</body>
<script>
var oIpt1 = document.getElementById("id");
var oIpt2 = document.getElementById("pwd");
var oIpt3 = document.getElementById("pswd");
var oIpt4 = document.getElementById("you");
var oIpt5 = document.getElementById("shouji");
var oIpt6 = document.getElementById("sheng");
var obtn = document.getElementById("submit");
var false1 = false, false2 = false, false3 = false,
false4 = false, false5 = false, false6 = false;
// 用户名--------------------------
oIpt1.onblur = function () {
var zh = /^[a-zA-Z][a-zA-Z0-9]{3,15}$/;
var val = oIpt1.value;
if (val.length === 0) {
alert("名字不能为空");
false1 = false;
oIpt1.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} if (zh.test(val) === false) {
alert("输入格式不对");
false1 = false;
oIpt1.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} else {
oIpt1.className = "dui"; //条件成立时 添加 类名（边框变蓝）
false1 = true;
}
}
// 密码--------------------------
oIpt2.onblur = function () {
var zh = /^[a-zA-Z0-9]{4,13}$/;
var val = oIpt2.value;
if (val.length === 0) {
alert("名字不能为空");
false1 = false;
oIpt2.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} if (zh.test(val) === false) {
alert("输入格式不对");
false1 = false;
oIpt2.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} else {
oIpt2.className = "dui"; //条件成立时 添加 类名（边框变蓝）
false2 = true;
}
}
// 确认密码--------------------------
oIpt3.onblur = function () {
var val = oIpt3.value;
if (val.length === 0) {
alert("名字不能为空");
false1 = false;
oIpt3.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} if (val !== oIpt2.value) {
alert("输入密码不一致");
false1 = false;
oIpt3.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} else {
oIpt3.className = "dui"; //条件成立时 添加 类名（边框变蓝）
false3 = true;
}
}
// 电子邮箱--------------------------
oIpt4.onblur = function () {
var val = oIpt4.value;
var zh = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
if (val.length === 0) {
alert("邮箱不能为空");
false4 = false;
oIpt4.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} if (zh.test(val) === false) {
alert("输入邮箱格式不对");
false4 = false;
oIpt4.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} else {
oIpt4.className = "dui"; //条件成立时 添加 类名（边框变蓝）
false4 = true;
}
}
//手机号----------------------------------------------
oIpt5.onblur = function () {
var val = this.value;
var zh = /^[1][0-9]{10}$/;
if (val.length === 0) {
alert("不能为空");
false5 = false;
oIpt5.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} if (zh.test(val) === false) {
alert("输入号码格式不对");
false5 = false;
oIpt5.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} else {
oIpt5.className = "dui"; //条件成立时 添加 类名（边框变蓝）
false5 = true;
}
}
//生日-------------------------------------------------
oIpt6.onblur = function () {
var val = this.value;
var zh = /^(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)$/;
if (val.length === 0) {
alert("不能为空");
false6 = false;
oIpt6.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} if (zh.test(val) === false) {
alert("输入格式不对");
false6 = false;
oIpt6.className = "cuowu"; //条件不成立时 添加 类名（边框变红）
return;
} else {
oIpt6.className = "dui"; //条件成立时 添加 类名（边框变蓝）
false6 = true;
}
}
//提交-------------------------------------------------
obtn.onclick = function () {
if (!false1 || !false2 || !false3 || !false4 || !false5 || !false6) {
alert("请重新检查表单");
return false
}
}
</script>
</html>
以上就是直播软件app开发，js 表单验证，登录注册， 更多内容欢迎关注之后的文章
浙公网安备 33010602011771号