4-8正则表达式
来源:4-8 编程练习
soso_crazy
2019-03-21 13:15:30
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.wrap {
width: 500px;
height: 500px;
margin: 20px auto;
background-color: lightgray;
}
nav {
background-color: blue;
color: #ffffff;
padding-left: 20px;
text-align: left;
}
label {
display: inline-block;
width: 100px;
text-align: right
}
input,
select {
margin: 7px 0;
width: 150px;
}
section {
width: 350px;
height: 400px;
margin: 50px auto;
}
input[type='submit'] {
width: 80px;
height: 30px;
display: block;
/* 因为按钮是内联元素设置margin不会居中,所以要设置为block */
margin: 27px auto;
border-radius: 5px;
border: none;
background-color: skyblue;
text-align: center;
color: #ffffff;
}
</style>
</head>
<body>
<div class="wrap">
<nav>用户注册</nav>
<section>
<form action="">
<label for="username">用户名:</label>
<input type="text" name="user" id="username">
<span class="tip"></span>
<br>
<label for="loginPassWord">登陆密码:</label>
<input type="password" name="loginPassWord" id="loginPassWord">
<span class="tip"></span>
<br>
<label for="confirmPassWord">登陆密码:</label>
<input type="password" name="confirmPassWord" id="confirmPassWord">
<span class="tip"></span>
<br>
<label for="name">姓名:</label>
<input type="text" name="name" id="name">
<span class="tip"></span>
<br>
<label for="sex">性别:</label>
<select id="sex">
<option>男</option>
<option>女</option>
</select>
<span class="tip"></span>
<br>
<label for="idNum">身份证号:</label>
<input type="text" name="idNum" id="idNum">
<span class="tip"></span>
<br>
<label for="email">邮箱:</label>
<input type="email" name="email" id="email">
<span class="tip"></span>
<br>
<label for="tel">手机号码:</label>
<input type="tel" name="tel" id="tel">
<span class="tip"></span>
<br>
<input type="submit" value="提交">
</form>
</section>
</div>
</body>
</html>
<script>
var username = document.getElementById('username'),
tips = document.querySelectorAll('.tip');
var Reg = /正则/;
username.onblur = function() {
var Reg = /^[a-zA-Z]\w{5-19}$/;
if (this.value == '') {
tips[0].innerHTML = '用户名不能为空';
tips[0].style.color = 'red';
} else {
if (!Reg.exec(username.value)) { //不符合正则
tips[0].innerHTML = '字母、数字或“_”,字母开头';
tips[0].style.color = 'red';
} else {
tips[0].innerHTML = '格式正确';
tips[0].style.color = 'green';
}
}
}
</script>
为什么不能提示格式正确?我的正则表达式哪里出问题了?
1回答
好帮手慕星星
2019-03-21
你好,在正则表达式中,数量之间应该用逗号分隔:
可以重新测试下,祝学习愉快!
相似问题