<style>
button{
background-color: aqua;
}
div{
margin-top: 50px;
}
.main{
width:80%;
top:0;left:0;right:0;bottom:0;
margin: auto;
padding-top: 40px;
}
</style>
<div class = "main">
<h3>==》简单的正则表达式面试题《==</h3>
<h5>查看源码请使用"检查" </h5>
<div id = "div1">
<p> 1. 每三个数添加一个小数点 </p>
<p style="color:burlywood">科学计数法表示方式</p>
<p style = "color:chartreuse">如：1000000000 --> 100,000,000</p>
<input type ="text" id = "num" value=""/>
<button onclick="change()">转换科学计数法</button>
<span id ="result" style="color:green"></span>
</div>
<script>
function change(){
var str = document.getElementById("num").value;
var reg = /(?=(\B)(\d{3})+$)/g;
var result = str.replace(reg,",");
var add = document.getElementById("result");
add.innerHTML ="结果："+result+".00";
}
</script>
<div id = "div2">
<p>2. 检查电话号码</p>
<p style ="color:seagreen">请输入您的手机号码：
<input class="phone" type="text" />
<button onclick = "check()">验证</button>
</p>
</div>
<script>
var div = document.getElementById("div2");
var p = document.createElement("p");
div.append(p);
function check(){
var phone = document.getElementsByClassName("phone")[0].value;
var reg = /(^[1][3,5,6,9][0-9]{9}$)/;
var result = reg.exec(phone);
if(phone == null || phone == ""){
p.style.color = "rgb(254 163 87)";
p.innerHTML = "您的手机号码为空";
}else{
if( result == null ){
p.style.color ="red";
p.innerHTML = "手机格式有误，请重新输入";
}else{
p.style.color ="rgb(18 183 245)";
p.innerHTML = "手机格式正确";
}
}
}
</script>
<div id ="emaildiv">
<p> 3. 邮箱验证</p>
输入您163的邮箱：<input type="text" id = "email" /> <button id = "btnemail" onclick = "checkEmail()" > 检验邮箱格式</button>
</div>
<script>
var div = document.getElementById("emaildiv");
var i = document.createElement("i");
div.append(i);
function checkEmail(){
var email = document.getElementById("email").value +"";
var reg = /(^[A-z0-9][A-z0-9_-]+[@][a-z0-9]{2,}[.][com,cn]{2,3}$)/g;
var result = reg.test(email);
if(email == null || email ==""){
i.style.color="rgb(104 33 122)";
i.innerHTML = "邮箱不能为空";
}else{
if(result){
i.style.color = "rgb(37 177 243)";
i.innerHTML = "邮箱正确";
}else{
i.style.color = "rgb(236 49 59)";
i.innerHTML = "邮箱格式不正确正确";
}
}
}
</script>
</div>
