请老师帮忙检查一下
来源：4-8 编程练习
Carol246
2019-07-16 06:36:58
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background-color: #eee;
overflow-y: scroll;
}
.wrap > .header{
height: 40px;
line-height: 40px;
background-color: #3092D1;
padding-left: 20px;
color: #fff;
font-size: 18px;
}
.wrap > .con{
width: 600px;
margin: 50px auto;
}
.wrap > .con > .item{
margin-top: 20px;
}
.wrap > .con > .item > .text{
display: inline-block;
width: 100px;
text-align: right;
}
.wrap > .con > .item > .input{
width: 200px;
box-sizing: border-box;
}
.wrap > .con > .item > .prompt{
color: #f00;
font-size: 13px;
}
.wrap > .con > .submit{
width: 80px;
height: 40px;
background-color: #3092D1;
border: 1px solid #333;
border-radius: 4px;
color: #fff;
font-size: 16px;
margin: 30px 170px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="header">用户注册</div>
<div class="con">
<p class="username item">
<span class="text">用户名：</span>
<input type="text" class="input">
<span class="prompt"></span>
</p>
<p class="password item">
<span class="text">登录密码：</span>
<input type="password" class="input">
<span class="prompt"></span>
</p>
<p class="confirm item">
<span class="text">确认密码：</span>
<input type="password" class="input">
<span class="prompt"></span>
</p>
<p class="name item">
<span class="text">姓名：</span>
<input type="text" class="input">
<span class="prompt"></span>
</p>
<p class="sex item">
<span class="text">性别：</span>
<select class="input">
<option value="male">男</option>
<option value="female">女</option>
</select>
<span class="prompt"></span>
</p>
<p class="IDCard item">
<span class="text">身份证号码：</span>
<input type="text" class="input">
<span class="prompt"></span>
</p>
<p class="email item">
<span class="text">邮箱：</span>
<input type="text" class="input">
<span class="prompt"></span>
</p>
<p class="telephone item">
<span class="text">手机号码：</span>
<input type="text" class="input">
<span class="prompt"></span>
</p>
<button class="submit">提交</button>
</div>
</div>
<script>
// 获取模块
var item = {
username: document.querySelector('.username'),
password: document.querySelector('.password'),
confirm: document.querySelector('.confirm'),
name: document.querySelector('.name'),
IDCard: document.querySelector('.IDCard'),
email: document.querySelector('.email'),
telephone: document.querySelector('.telephone'),
btn: document.querySelector('.submit')
};
// 获取输入框
var input = {
username: item.username.querySelector('.input'),
password: item.password.querySelector('.input'),
confirm: item.confirm.querySelector('.input'),
name: item.name.querySelector('.input'),
IDCard: item.IDCard.querySelector('.input'),
email: item.email.querySelector('.input'),
telephone: item.telephone.querySelector('.input')
};
// 获取用于显示提示语的文本框
var prompt = {
username: item.username.querySelector('.prompt'),
password: item.password.querySelector('.prompt'),
confirm: item.confirm.querySelector('.prompt'),
name: item.name.querySelector('.prompt'),
IDCard: item.IDCard.querySelector('.prompt'),
email: item.email.querySelector('.prompt'),
telephone: item.telephone.querySelector('.prompt')
};
// 定义提示语
var promptText = {
username: '6-20位字母、数字或“_”，字母开头',
password: '6-18位，包含数字、字母或符号，中间不能有空格',
confirm: '两次输入密码不一致',
name: '真实姓名为两位到四位的中文',
IDCard: '请输入18位的身份证号码',
email: '邮箱格式不正确',
telephone: '电话号码不正确'
};
// 定义正则表达式
var regexp = {
username: /^[a-z]\w{5,19}$/i,
password: /^\S{6,18}$/,
name: /^[\u4e00-\u9fa5]{2,4}$/,
IDCard: /^\d{15,18}$|^\d{17}x$/,
email: /^(?:[a-z0-9]|[a-z0-9]\w*[a-z0-9])@(?:[a-z]+\.)+(?:com|cn)$/i,
telephone: /^1(?:3\d|47|5[0-35-9]|8[025-9])\d{8}$/
};
// 验证函数
function check(k){
if(k === 'confirm'){
input[k].onblur = function(){
if(this.value === ''){
prompt[k].innerHTML = '请设置密码';
}else if(this.value === input['password'].value){
prompt[k].innerHTML = 'OK';
}else{
prompt[k].innerHTML = promptText[k];
}
};
return;
}
input[k].onblur = function(){
if(regexp[k].test(this.value)){
prompt[k].innerHTML = 'OK';
}else{
prompt[k].innerHTML = promptText[k];
}
}
}
for(var k in input){
check(k);
}
// 绑定提交按钮的事件
item.btn.onclick = function(){
var result = true;
for(var l in input){
input[l].onblur();
if(prompt[l].innerHTML !== 'OK'){
result = false;
}
}
if(result){
alert('验证成功！');
}
}
</script>
</body>
</html>写回答
1回答
-
同学你好！
代码效果实现的是可以的验证邮箱的时候@后面可以添加上数字，如123123@163.com也需要通过验证：
如果帮助到了你 欢迎采纳 祝学习愉快~
1
相似问题