4-8编程题邮箱验证问题
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>正则表达式编程题</title>
<style type="text/css">
body{
background: #F0F0F0;
color: dimgrey;
font-family: "宋体";
}
.reg{
width: 100%;
height: 50px;
color: white;
background: dodgerblue;
text-indent: 1.5em;
line-height: 50px;
font-size: 20px;
}
.wrap{
width: 60%;
margin: 50px auto;
line-height: 40px;
}
.txt_left{
text-align: right;
width: 100px;
display: inline-block;
margin-left: 400px;
}
.txt_right{
color: red;
}
.txtRight{
color: red;
}
select{
width: 173px;
height: 21px;
color: dimgrey;
}
#btn{
width: 80px;
height: 40px;
background: royalblue;
color: white;
border: none;
border-radius: 10px;
outline: none;
margin-top: 50px;
margin-left: 550px;
}
</style>
</head>
<body>
<div class="reg">用户注册</div>
<div id="wrap" class="wrap">
<span class="txt_left">用户名：</span>
<input type="text" id="0" class="ipt" />
<span class="txt_right submit"></span>
<br />
<span class="txt_left">登录密码：</span>
<input type="text" id="1" class="ipt" />
<span class="txt_right submit"></span>
<br />
<span class="txt_left">确认密码：</span>
<input type="text" id="passwdConfirm" />
<span class="txtRight submit" id="txtRight"></span>
<br />
<span class="txt_left">姓名：</span>
<input type="text" id="2" class="ipt" />
<span class="txt_right submit"></span>
<br />
<span class="txt_left">性别：</span>
<select>
<option value="male">男</option>
<option value="female">女</option>
</select>
<span style="opacity: 0.01;">OK</span>
<br />
<span class="txt_left">身份证号码：</span>
<input type="text" id="3" class="ipt" />
<span class="txt_right submit"></span>
<br />
<span class="txt_left">邮箱：</span>
<input type="text" id="4" class="ipt" />
<span class="txt_right submit"></span>
<br />
<span class="txt_left">手机号码：</span>
<input type="text" id="5" class="ipt" />
<span class="txt_right submit"></span>
<br />
<button id="btn">提交</button>
</div>
<script type="text/javascript">
var inputBoxs=document.getElementsByClassName('ipt');
var txts_right=document.getElementsByClassName('txt_right');
var passwdConfirm=document.getElementById('passwdConfirm');
var txtRight=document.getElementById('txtRight');
var btn=document.getElementById('btn');
var len=inputBoxs.length;
var flag=false;
var submits=document.getElementsByClassName('submit');
var len2=submits.length;
//定义一个数组来存放正则表达式
var patterns=[
/^[a-zA-Z]\w{5,19}$/i,
/^[^\s]{3,18}$/i,
/^[\u4e00-\u9fa5]{2,4}$/,
/^(?:\d{15}|\d{17}x|\d{18})$/,
/^[a-zA-Z0-9]+(?:[.-_][a-zA-Z0-9]+)*@(?:[\w]+\.)+[a-zA-Z]{2,3}$/,
/^1\d{10}$/
];
//定义一个数组来存放输入错误提示
var mistakes=[
'6-20位字母、数字或“_”，字母开头',
'3-18位，包含数字，字母或符号，中间不能有空格',
'真实姓名为两位到四位的中文',
'请输入正确的身份证号码',
'邮箱格式不正确',
'电话号码不正确'
]
for(var i=0;i<len;i++){
inputBoxs[i].onblur=function(){
if(patterns[this.id].test(this.value)){
txts_right[this.id].innerHTML='OK';
flag=true;
}else{
txts_right[this.id].innerHTML=mistakes[this.id];
}
}
}
passwdConfirm.onblur=function(){
if(this.value==''){
txtRight.innerHTML='请输入密码！';
}else if(this.value!=null&&this.value==inputBoxs[1].value){
txtRight.innerHTML='OK';
}else{
txtRight.innerHTML='两次输入密码不一致';
}
}
btn.onclick=function(){
for(var i=0;i<len2;i++){
if(submits[i].innerHTML!='OK'){
flag=false;
}
}
if(flag){
alert("验证成功！");
}else{
alert("信息未完善！")
}
}
</script>
</body>
</html>为什么我在邮箱栏输入“”123-123@qq.com“”匹配不到，而我把‘-’换成‘_’或者‘.’,都能够匹配
正在回答 回答被采纳积分+1
var formbox = document.getElementById('formbox');
var pwd1 = "";
var forms ={
getElementsByClassName:function (str){
var searchClass = str.searchClass;//存储要查找的类名
var node = str.node|| document;//存储要查找的范围
var tag = str.tag||'*';//存储一定范围内要查找的标签
var result = [];
// 判断浏览器不支持getElementsByClassName方法
if(document.getElementsByClassName){ //如果浏览器支持
var nodes = node.getElementsByClassName(searchClass)
if(tag !=='*'){
for(var i=0;node=nodes[i++];){
if(node.tagName === tag.toUpperCase()){
result.push(node);
}
}
}else{
result = nodes;
}
return result;
}else{ //使IE8以下的浏览器能够支持该属性
var els = node.getElementsByTagName(tag);
var elsLen = els.length;
var i,j;
var pattern = new RegExp("(^|\\s)" + searchClass + "(\\s|$)");
for(i = 0,j=0;i<elsLen;i++){
if(pattern.test(els[i].className)){ //检测正则表达式
result[j] = els[i];
j++;
}
}
return result;
}
}
}
// 获取inputs类
var inputs = forms.getElementsByClassName({
searchClass:'inputs',
node:document
})
// 获取textboxGroup类
var textboxGroup = forms.getElementsByClassName({
searchClass:'textbox-group',
node:document
})
// 获取tips类
var tips = forms.getElementsByClassName({
searchClass:'tips',
node:document
})
// 获取rights类
var rights = forms.getElementsByClassName({
searchClass:'rights',
node:document
})
// 获取点击按钮
var btns = forms.getElementsByClassName({
searchClass:'btn',
node:document
})
// 正则条件
var regular = {
// 6-20位字母、数字或“_”,字母开头
'users':/^[a-zA-Z]{1}[\w+]{2,19}$/,
// 密码6-18位，包括数字字母或符号，中间不能有空格
'pwd':/^[\S]{6,18}$/,
// 是真是姓名，两位到四位的中文汉字
'chineseNames':/^[\u4e00-\u9fa5]{2,4}$/,
// 验证身份证号 15位或者18位的数字，18位时最后一位可能是x
'idCard':/^[1-9]{1}[\d]{14}$|^[1-9]{1}[\d]{16}([0-9]|[xX])$/,
// 验证邮箱、12323@qq.com、lulu_s@open.com、lu_lu_z@qq.com.cn等
'email':/^[a-z1-9]+(?:[._-][a-z0-9]+)*@([a-z0-9])+(?:[._-][a-z0-9]+)*\.[a-z]{2,4}$/i,
// 验证手机号码
'telphone':/^1(3|4|5|7|8)\d{9}$/
}
// 错误提示信息
var errorInfo =[
'6-20位字母、数字或“_”,字母开头',
'请输入密码，不能除了空格之外',
'两次输入密码不一致',
'两位到四位的中文汉字',
'要求15位或者18位的数字',
'请输入正确的邮箱',
'手机号码应为11位数字，以13/14/15/17/18开头'
]
// 兼容事件
var EventUtil = {
addEvent:function(ele,type,handler){
if(ele.addEventListener){
ele.addEventListener(type,handler,false);
}else if(ele.attachEvent){
ele.attachEvent('on' + type,handler);
}
}
}
// 循环input数组
function each(array,fn){
for(var i=0;i<array.length;i++){
fn(i,array[i]);
}
}
// 遍历失去焦点事件
each(inputs,function(index,ele){
EventUtil.addEvent(ele,'blur',function(){
work.disInformation(ele,index);
});
})
// 核心计算
var work ={
disInformation:function (ele,index){
if(work.tureFlase(ele,index)){
tips[index].innerHTML = 'OK';
}else{
ele.value ="";
tips[index].innerHTML = errorInfo[index];
}
},
// 判断正则，返回true或false；
tureFlase:function (ele,index){
switch(index){
case 0:return regular.users.test(ele.value);
break;
case 1:pwd1 = ele.value;work.judgepwd(index,pwd1); return regular.pwd.test(ele.value);
break;
case 2:return ele.value === pwd1 && pwd1!="";
break;
case 3:return regular.chineseNames.test(ele.value);
break;
case 4:return regular.idCard.test(ele.value);
break;
case 5:return regular.email.test(ele.value);
break;
case 6:return regular.telphone.test(ele.value);
break;
}
},
// 当两次密码成功输入时，重新修改登录密码，重新判断；
judgepwd:function (index,pwd1){
index++;
if(inputs[index].value === pwd1){
return;
}else{
tips[index].innerHTML = errorInfo[index];
}
}
}
// 点击按钮校验表单
EventUtil.addEvent(btns[0],'click',function(){
var i = 0,len = inputs.length;
each(inputs,function(index,ele){
if(!ele.value==''){
i++;
if(i == len){
alert('提交成功');
}
}else if(ele.value==''){
tips[index].innerHTML = errorInfo[index];
}
})
})
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星