<%--
Created by IntelliJ IDEA.
User: 丑丑
Date: 2018/11/20
Time: 10:36
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="${pageContext.request.contextPath}/static/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<%--class="container-fluid" style="background-color: #4cae4c"--%>
<div class="container">
<div style="width: 600px;height:450px;margin: 0 auto;border: 1px solid #269abc;padding: 30px;" >
<form id="addUserForm" action="${pageContext.request.contextPath}/user/insertOne" method="post" role="form" class="form-horizontal">
<div class="col-xs-12" style="text-align: center;color: #2aabd2">
<h1>添加用户</h1>
<br>
</div>
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">用户名：</label>
</div>
<div class="col-xs-6">
<input type="text" name="userName" class="form-control">
</div>
<div class="col-xs-3">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">电话：</label>
</div>
<div class="col-xs-6">
<input type="text" name="phone" class="form-control">
</div>
<div class="col-xs-3">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">QQ：</label>
</div>
<div class="col-xs-6">
<input type="text" name="qq" class="form-control" placeholder="请输入邮箱">
</div>
<div class="col-xs-3">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">密码：</label>
</div>
<div class="col-xs-6">
<input type="text" name="password" class="form-control">
</div>
<div class="col-xs-3">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">部门：</label>
</div>
<div class="col-xs-6">
<input type="text" name="dept" class="form-control">
</div>
<div class="col-xs-3">
<span class="help-block"></span>
</div>
</div>
<div class="col-xs-3 col-xs-offset-9">
<input type="submit" class="btn btn-primary" value="提交"/>
</div>
</form>
<button class="btn btn-success" style="font-size: 60px;color: #F00">
<span class="glyphicon glyphicon-heart"></span>
我爱你
</button>
</div>
</div>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.2.1.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
<script>
$(function () {
//点击input框想要输入后 鼠标再点击其他地方的失焦状态
$("input[name='userName']").blur(function () {
verifyUserName($(this));
});
$("input[name='password']").blur(function () {
verifyPassword($(this));
});
$("input[name='qq']").blur(function () {
verifyQq($(this));
});
$("input[name='phone']").blur(function () {
verifyPhone($(this));
});
//form表单提交触发的boolean值判断
$("#addUserForm").submit(function () {
var obj = verifyUserName($("input[name='userName']"));
var pas = verifyPassword($("input[name='password']"));
var qqq = verifyQq($("input[name='qq']"));
var pho = verifyPhone($("input[name='phone']"));
return obj &&pas &&qqq &&pho;
});
});
//手机号码11位，并进行正则验证
function verifyPhone(pho) {
var phoval=pho.val();
var reg = /^1\d{10}$/;
if((!reg.test(phoval))|| phoval == ""||phoval==null){
isError(pho,"手机号格式不正确");
return false;
}else{
isOk(pho);
return true;
}
}
//邮箱验证，并进行正则验证
function verifyQq(qqq) {
var qqqval=qqq.val();
//邮箱正则表达式
var reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
if(qqqval === ""||!reg.test(qqqval)){ //输入不能为空
isError(qqq,"邮箱格式不对")
return false;
}else{
isOk(qqq);
return true;
}
}
//密码必须大于6位
function verifyPassword(pas) {
var pasval=pas.val();
if(pasval.length<=6||pasval==null||pasval==""){
isError(pas,"密码必须大于6位数");
return false;
}else{
isOk(pas);
return true;
}
}
//用户名不能为空
function verifyUserName(obj) {
var objval=obj.val();
if(null==objval||""==objval){
//校验失败
isError(obj,"用户名不能为空");
return false;
}else{
isOk(obj);
return true;
}
}
//失败
function isError(er,html) {
er.parent().parent().addClass("has-error");
er.parent().next().children().html(html);
}
//成功
function isOk(ok) {
ok.parent().parent().removeClass("has-error");
ok.parent().parent().addClass("has-success");
ok.parent().next().children().html("");
}
</script>
</body>
</html>
使用bootstrap用来表单验证
猜你喜欢
转载自blog.csdn.net/qq_43154385/article/details/84314213
今日推荐
周排行