<!DOCTYPE html>
<html lang="en">
<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>
</head>
<style>
input {
margin-bottom: 10px;
}
#ye,
#mo,
#day {
width: 40px;
}
</style>
<body>
<form action="">
    姓名：<input type="text" id="name" name="name"><span id="name1"></span><br>
    姓氏：<input type="text" id="na" name="na"><span id="na1"></span><br>
   登录名：<input type="text" id="dlm" name="dlm"><span id="dlm1"></span><br>
    密码：<input type="text" id="password" name="password"><span id="passworda"></span><br>
再次输入密码：<input type="text" id="password1" name="password1"><span id="password1a"></span><br>
  电子邮箱：<input type="email" id="email" name="email"><span id="email1"></span><br>
     性别：<input type="radio" id="nan" name="sex">
<label for="nan">男</label>
<input type="radio" id="nv" name="sex">
<label for="nv">女</label><br>
     头像：<input type="file"><br>
     爱好：<input type="checkbox" id="aihao" name="aihao">运动
<input type="checkbox" id="aihao" name="aihao">聊天
<input type="checkbox" id="aihao" name="aihao">玩游戏<br>
   身份证号：<input type="text" id="sfzh" name="sfzh"><span id="sfzh1"></span><br>
   出生日期：<input type="date"><br>
        <button type="submit" id="submit"
onclick="return a()">提交</button>  <button type="reset">重置</button>
</form>
</body>
<script>
var _name = document.getElementById('name'),
_na = document.getElementById('na'),
_dlm = document.getElementById('dlm'),
_password = document.getElementById('password'),
_password1 = document.getElementById('password1'),
_email = document.getElementById('email'),
_submit = document.getElementById('submit'),
_sfzh = document.getElementById('sfzh'),
nameflag = false, naflag = false, dlmflag = false, passwordflag = false, password1flag = false, emailflag = false, sfzhflag = false;
_name.onblur = function () {
if (_name.value == '') {
name1.innerHTML = "用户名不能为空";
name1.style.color = 'red';
return nameflag = false;
} else {
for (var i = 0; i < _name.value.length; i++) {
var c = _name.value.charAt(i);
if (!isNaN(c)) {
name1.innerHTML = "名字输入不能含有数字";
name1.style.color = 'red';
return nameflag = false;
}
}
} document.getElementById(name1.innerHTML = "");
}
_na.onblur = function () {
if (_na.value == '') {
na1.innerHTML = "用户名不能为空";
na1.style.color = 'red';
return naflag = false;
} else {
for (var i = 0; i < _na.value.length; i++) {
var c = _na.value.charAt(i);
if (!isNaN(c)) {
na1.innerHTML = "名字输入不能含有数字";
na1.style.color = 'red';
return naflag = false;
}
}
} na1.innerHTML = "";
}
_dlm.onblur = function () {
for (var i = 0; i < _dlm.value.length; i++) {
var a = _dlm.value.charCodeAt(i);
if (a >= 48 && a <= 57 || a == 95 || a >= 97 && a <= 122) {
dlm1.innerHTML = "";
dlm1.style.color = 'red';
dlmflag = true;
break;
} else {
dlm1.innerHTML = "用户名包含a-z，0-9或下划线";
dlm1.style.color = 'red'
dlmflag = false;
}
}
}
_password.onblur = function () {
if (_password.value.length < 6) {
passworda.innerHTML = "密码至少为6位数";
passworda.style.color = 'red';
return passwordflag == false;
} passworda.innerHTML = "";
}
_password1.onblur = function () {
if (_password1.value != _password.value) {
password1a.innerHTML = "两次密码不一致";
password1a.style.color = 'red';
return password1flag == false;
}
password1a.innerHTML = "";
}
_email.onblur = function () {
var a = _email.value;
var b = _password.value;
if (a === '') {
alert('邮箱不能为空');
return emailflag = false;
} else if (a.includes('@') == false) {
alert('邮箱必须含有@');
return emailflag = false;
} else if (a.includes('.') == false) {
alert('邮箱必须含有.');
return emailflag = false;
}
}
_sfzh.onblur = function () {
if (_sfzh.value != /\d{18}/) {
sfzh1.innerHTML = "请填写正确的身份证号码";
sfzh1.style.color = 'red';
}
sfzh1.innerHTML = "";
return sfzhflag == false;
}
function a() {
if (nameflag == false && naflag == false && dlmflag == false && passwordflag == false && password1flag == false && emailflag == false && sfzhflag == false) {
alert("请重新检查表单");
return false;
} else {
alert('提交成功')
}
}
</script>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
