5.1-团队项目-每日任务-输入限制检测

1、完善各个身份人愿信息填写时的输入限制

2、完成情况

注册页面，各项输入限制已完成

<%@ page contentType="text/html;charset=UTF-8" language="java"%>
<jsp:include page="login_head.jsp"></jsp:include>
<form id="regForm" action="${pageContext.request.contextPath}/register"
method="post">
<h1>用户注册</h1>
<div>
<input style="margin: 0px;" type="text" name="login_mail"
class="form-control" placeholder="注册邮箱" />
<div style="width: 350px; height: 20px; margin-bottom: 5px;">
<span id="mail" class="help-block"
style="margin-right: 220px; margin-top: 0px; margin-bottom: 0px;"></span>
</div>
</div>
<div>
<input style="margin: 0px;" type="password" name="pwd" maxlength="20"
class="form-control" placeholder="密码 6-20位" />
<div style="width: 350px; height: 20px; margin-bottom: 5px;">
<span id="pwd" class="help-block"
style="margin-right: 220px; margin-top: 0px; margin-bottom: 0px;"></span>
</div>
</div>
<div>
<input style="margin: 0px;" type="password" name="pwd2"
class="form-control" maxlength="20" placeholder="重复密码" />
<div style="width: 350px; height: 20px; margin-bottom: 5px;">
<span id="pwd2" class="help-block"
style="margin-right: 220px; margin-top: 0px; margin-bottom: 0px;"></span>
</div>
</div>
<div>
<button type="submit" class="btn btn-default">注册</button>
</div>
<div class="clearfix"></div>
<div class="separator">
<div class="clearfix"></div>
<br />
<div>
<h1>
<i class="fa fa-paw"></i> Gentelella Alela!
</h1>
<p>©2016 All Rights Reserved. Gentelella Alela! is a Bootstrap 3
template. Privacy and Terms</p>
</div>
</div>
</form>
<jsp:include page="login_foot.jsp"></jsp:include>
<script type="text/javascript">
var msg = "${msg}";
if (msg.length > 0) {
if (msg = "注册成功") {
alert(msg);
window.location = "${pageContext.request.contextPath}/login.jsp";
}
}
$(function() {
var exp = /[1-9][0-9]{4,}@qq.com/;
$("input[name='login_mail']").on('input propertychange', function() {
if ($(this).val()) {
if (!exp.test($(this).val())) {
$(this).parent().removeClass("has-error");

$(this).parent().addClass("has-error");
$("#mail").text("请输入正确的邮箱格式");
} else {
$(this).parent().removeClass("has-error");
$("#mail").text("");
}
} else {
$(this).parent().removeClass("has-error");
$("#mail").text("");
}
})
$("input[name='pwd']").on('input propertychange', function() {
if ($(this).val()) {
if ($("input[name='pwd']").val().length < 6) {
$(this).parent().removeClass("has-error");

$(this).parent().addClass("has-error");
$("#pwd").text("请输入正确的密码格式");
} else {
$(this).parent().removeClass("has-error");
$("#pwd").text("");
}
} else {
$(this).parent().removeClass("has-error");
$("#pwd").text("");
}
})
$("input[name='pwd2']").on('input propertychange', function() {
if ($(this).val()) {
if ($(this).val() != $("input[name='pwd']").val()) {
$(this).parent().removeClass("has-error");

$(this).parent().addClass("has-error");
$("#pwd2").text("请输入正确的重复密码");
} else {
$(this).parent().removeClass("has-error");
$("#pwd2").text("");
}
} else {
$(this).parent().removeClass("has-error");
$("#pwd2").text("");
}
})
$("#regForm").submit(function() {
var a = $("#mail").text();
var b = $("#pwd").text();
var c = $("#pwd2").text();
var mail = $("input[name='login_mail']").val();
var pwd = $("input[name='pwd']").val();
var pwd2 = $("input[name='pwd2']").val();
if (!mail) {
$("input[name='login_mail']").parent().addClass("has-error");
$("#mail").text("此项不能为空!");
return false;
}
if (!pwd) {
$("input[name='pwd']").parent().addClass("has-error");
$("#pwd").text("此项不能为空!");
return false;
}
if (!pwd2) {
$("input[name='pwd2']").parent().addClass("has-error");
$("#pwd2").text("此项不能为空!");
return false;
}
if (a == "" && b == "" && c == "") {
return true;
} else {
return false;
}
})
})
</script>

3、明日任务

社员提交社团申请表功能

__EOF__

本文作者：往心。
本文链接：https://www.cnblogs.com/lx06/p/14761835.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！