使用前先下载好bootstarp需要的js,css并导入,还有jquery文件
验证方式正则表达式可以自己改,活学活用
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link href="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
<script src="${pageContext.request.contextPath}/static/common/jquery-2.2.3.min.js"></script>
<script src="${pageContext.request.contextPath}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div style="width: 400px;margin: 0 auto;border: 1px solid #269abc;padding: 30px;" >
<form id="addUser" action="/weike/insertUser" method="post" role="form" class="form-horizontal">
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">用户名：</label>
</div>
<div class="col-xs-9">
<input type="text" name="userName" class="form-control">
<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-9">
<input type="text" name="phone" class="form-control">
<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-9">
<input type="text" name="qq" class="form-control">
<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-9">
<input type="text" name="password" class="form-control">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">dept：</label>
</div>
<div class="col-xs-9">
<input type="text" name="dept" class="form-control">
</div>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<script type="text/javascript">
$(function () {
//验证失败进行换颜色,和提示
function isError(obj, html) {
obj.parent().parent().addClass("has-error");
obj.next().html(html);
}
//验证成功
function isOK(obj) {
obj.parent().parent().removeClass("has-error");
obj.parent().parent().addClass("has-success");
obj.next().html("");
}
//验证用户名
function verifyUserName(obj) {
var userNameValue = obj.val();
if(userNameValue==""){
isError(obj,"用户名不能为空");
return false;
}else{
isOK(obj);
return true;
}
}
//验证密码
function verifyPassword(obj) {
var passwordValue = obj.val();
if(passwordValue.length<6){
isError(obj,"密码长度不够6位");
return false;
}else{
isOK(obj);
return true;
}
}
//验证电话号码
function verifyPhone(obj) {
var phoneValue = obj.val();
var re = /^0\d{2,3}-?\d{7,8}$/;
if(!re.test(phoneValue)){
isError(obj,"电话号码不正确")
return false;
}else{
isOK(obj);
return true;
}
}
//验证qq邮箱
function verifyQQ(obj) {
var qqValue = obj.val();
var email = /^(\w-*\.*)+@(\w-?)+(\.\w{2,})+$/;
if(!email.test(qqValue)){
isError(obj,"电话号码不正确")
return false;
}else{
isOK(obj);
}
}
//给它们分别定义失焦事件
$("input[name='userName']").blur(function () {
verifyUserName($(this));
})
$("input[name='password']").blur(function () {
verifyPassword($(this));
})
$("input[name='phone']").blur(function () {
verifyPhone($(this));
})
$("input[name='qq']").blur(function () {
verifyQQ($(this));
})
//提交方法进行验证
$("#addUser").submit(function () {
var userName = verifyUserName($("input[name='userName']"));
var password = verifuPassword($("input[name='password']"));
var phone = verifuPhone($("input[name='phone']"));
var qq = verifuQQ($("input[name='qq']"));
return userName&&password&&phone&&qq;
})
})
</script>
</div>
</body>
</html>