完成下图中验证提示功能。
备注：手机号码使用文本框即可
运行效果：
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>201731061203+许嘉欣</title>
<script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
<style>
.test{
background-color: #D1EEEE;
}
input:focus{
outline: none;
border-radius: 0.3125rem;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}
select:focus{
outline: none;
}
</style>
</head>
<body>
<h2 align="center" style="color: dodgerblue">新用户注册</h2>
<hr size="2" color="dodgerblue"/>
<table align="center" style="margin-top: 50px;">
<tr>
<td style="text-align:right;"><span style="color: #FF0000;">*</span><span style="color: gray;">用户名：</span><td>
<td style="text-align: left;"><input type="text" id="username" style="border: 1px solid lightskyblue; border-radius: 5px;"/></td>
<tr>
<tr>
<td></td>
<td></td>
<td colspan="2" id="yonghu" style="text-align: left;font-size: small;color: red;"></td>
</tr>
<tr>
<td style="text-align:right;"><span style="color: #FF0000;">*</span><span style="color: gray;">邮箱：</span><td>
<td style="text-align: left;color: gray;"><input type="text" id="useremail" style="border: 1px solid lightskyblue; border-radius: 5px;"/>@
<select style="border: 1px solid lightskyblue; border-radius: 5px;">
<option selected="selected">163.com</option>
<option>qq.com</option>
<option>sina.com</option>
</select>
</td>
<tr>
<tr>
<td></td>
<td></td>
<td colspan="2" id="youxiang" style="text-align: left;font-size: small;color: red;"></td>
</tr>
<tr>
<td style="text-align:right;"><span style="color: #FF0000;">*</span><span style="color: gray;">密码：</span><td>
<td style="text-align: left;"><input type="password" id="userpwd" style="border: 1px solid lightskyblue; border-radius: 5px;"/></td>
<tr>
<tr>
<td></td>
<td></td>
<td colspan="2" id="mima" style="text-align: left;font-size: small;color: red;"></td>
</tr>
<tr>
<td style="text-align:right;"><span style="color: #FF0000;">*</span><span style="color: gray;">确认密码：</span><td>
<td style="text-align: left;"><input type="password" id="userrepwd" style="border: 1px solid lightskyblue; border-radius: 5px;"/></td>
<tr>
<tr>
<td></td>
<td></td>
<td colspan="2" id="remima" style="text-align: left;font-size: small;color: red;"></td>
</tr>
<tr>
<td style="text-align:right;"><span style="color: #FF0000;">*</span><span style="color: gray;">手机号码：</span><td>
<td style="text-align: left;"><input type="text" id="userphone" style="border: 1px solid lightskyblue; border-radius: 5px;"/></td>
<tr>
<tr>
<td></td>
<td></td>
<td colspan="2" id="shouji" style="text-align: left;font-size: small;color: red;"></td>
</tr>
<tr>
<td></td>
<td></td>
<td><input style="background: dodgerblue;border: 1px solid dodgerblue;border-radius: 3px;margin-left: 55px;margin-top: 20px;" type="button" value="注册" "checkuse()" /></td>
</tr>
</table>
<script>
function checkuse()
{
var use1=$('#username').val();
var use2=$('#useremail').val();
var use3=$('#userpwd').val();
var use4=$('#userrepwd').val();
var use5=$('#userphone').val();
if(use1==""||use1.length<2||use1.length>10)
{
document.getElementById('yonghu').innerHTML="2~10个字符，可使用字母、数字、下划线！";
$('#username').addClass('test');
}
if(use2==""||use2.length<6||use2.length>18)
{
document.getElementById('youxiang').innerHTML="6~18个字符，可以使用字母，数字，下划线！";
$('#useremail').addClass('test');
}
if(use3!=""&&!use3!=use1)
{
document.getElementById('mima').innerHTML="密码和用户名不能完全相同!";
$('#userpwd').addClass('test');
}
if(use4!=""&&use4!=use3)
{
document.getElementById('remima').innerHTML="两次密码不一致!";
$('#userrepwd').addClass('test');
}
var myReg = /^13[0-9]{9}$|14[0-9]{9}|15[0-9]{9}$|18[0-9]{9}|17[0-9]{9}$/;
if(use5!=""&&!myReg.test(use5))
{
document.getElementById('shouji').innerHTML="请填写正确的手机号!";
$('#userphone').addClass('test');
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
