您的位置：首页 > 其它

正则表达式验证用户名、邮箱、密码

2016-08-31 14:49 519 查看

前几天碰到一个正则表达式验证表单数据的问题，就找了菜鸟教程的正则表达式过了一遍，顺便做了个小练习。

var reg1=/^[a-zA-Z]\w*$/i;验证用户名：验证以字母开头，可包含字母，数字及下划线的用户名。
[a-zA-Z]表示以字母，\w 匹配包括下划线的任何单词字符，等价于'[A-Za-z0-9_]'，*表示紧连着的前一个字符出现零次或多次。/^、$/分别代表正则表达式的开头及结尾。

完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<style type="text/css">
body{
margin: 0;
padding: 0;
}
div.main{
margin: 100px auto;
width: 50%;
height: 200px;
border: 1px solid #CCC;
padding: 30px 10px;
}
span{
color: #F34949;
font-size: 10px;
/*display: none;*/
margin-left:20px;
}
form{
width: 100%;
height: 100px;
margin: 0px auto;
padding: 30px 0px;
}
/*input{
width: 180px;
}*/
.alr{
text-align: right;
}
</style>
<script type="text/javascript">
function isUser(){
var oVal1 = document.getElementById('user');
var oSpan1 = document.getElementById('userInfo');

var reg1=/^[a-zA-Z]\w*$/i;
if(oVal1.value && !reg1.test(oVal1.value)){
oSpan1.style.display = "inline-block";
}else{
oSpan1.style.display = "none";
}
}

function isPassword(){
var oVal2 = document.getElementById('pass');
var oSpan2 = document.getElementById('passInfo');

var reg2 = /^([a-zA-z]+[0-9]+)|([0-9]+[a-zA-Z]+)$/i;

if(oVal2.value.length >= 8 && reg2.test(oVal2.value)){
oSpan2.style.display = "none";
}else{
oSpan2.style.display = "inline-block";
}
}

function isMail(){
var oVal3 = document.getElementById('mail');
var oSpan3 = document.getElementById('mailInfo');

var reg3 = /^([a-zA-Z0-9_-])+\@([a-zA-Z0-9_-])+.([a-zA-Z])+$/;
if(oVal3.value && reg3.test(oVal3.value)){
oSpan3.style.display = "none";
}else{
oSpan3.style.display = "inline-block";
}
}
</script>
</head>
<body>
<div class="main">
<form>
<label class="col-md-2 alr">用户名：</label>
<input class="col-md-4" type="text" id="user" onkeyup="isUser()" />
<span class="col-md-3" id="userInfo">以字母开头，可包含数字、字母、下划线。</span><br><br>
<label class="col-md-2 alr">密码：</label>
<input class="col-md-4" type="password" id="pass" onkeyup="isPassword()" />
<span class="col-md-3" id="passInfo">至少8位，必须包含字母、数字</span><br><br>
<label class="col-md-2 alr">邮箱：</label>
<input class="col-md-4" type="text" id="mail" onblur="isMail()" />
<span class="col-md-3" id="mailInfo">请输入正确邮箱</span>
</form>
</div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航