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

你好,在正则表达式中,数量之间应该用逗号分隔:

http://img.mukewang.com/climg/5c9335970001703b05190100.jpg

可以重新测试下,祝学习愉快!

0

0 学习 · 14456 问题

查看课程