效果图如下:
失焦验证如图1,电话必须唯一,如果数据库有该电话,失焦则弹出手机号已经被占用,请重新输入!
两次密码输入必须一致,否则弹出如图三。
实现代码如下:
<%--
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/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<%--class="container-fluid" style="background-color: #4cae4c"--%>
//container :布局
<div class="container">
<div style="width: 600px;height:450px;margin: 0 auto;border: 1px solid #269abc;padding: 30px;" >
//表单
<form action="${pageContext.request.contextPath}/user/insertOne" id="addregisterdiv"
method="post" role="form" class="form-horizontal tab-pane" enctype="application/x-www-form-urlencoded">
<div style="margin: 0 auto;padding: 30px;" >
<div class="form-group">
<div class="col-xs-3">
<label class="control-label">用户名:</label>
</div>
<div class="col-xs-9">
<input type="text" id="userName" name="username" class="form-control" value="" placeholder="请输入昵称">
<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" id="phone" name="iphone" class="form-control" placeholder="电话即登录用户名">
<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="qq" class="form-control" placeholder="请输入邮箱">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<div class="col-xs-4">
<label class="control-label" >密码:</label>
</div>
<div class="col-xs-8">
<input id="mm1" type="password" name="password" class="form-control">
<span class="help-block"></span>
</div>
</div>
<div class="form-group">
<div class="col-xs-4">
<label class="control-label">确认密码:</label>
</div>
<div class="col-xs-8">
<input type="password" id="mm2" class="form-control">
<span class="help-block"></span>
</div>
</div>
</div>
<input type="button" class="btn" value="注册" id="register"
style="font-size: 22px;width: 350px;background-color: red;color: white;margin-left: 60px"/>
</form>
</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>
var pp = $("input[name='iphone']");
function aj() {
var iphs =pp.val();
//用ajax获取数据库里的用户名
$.ajax({
type:"post",
url:"${pageContext.request.contextPath}/user/selectIphone",
dataType:"json",
data:{"iphone":iphs},
success:function(data) {
if(!data){
pp.next().html("手机号已经被占用,请重新输入");
pp.parent().parent().addClass("has-error");
return false;
}
isOk(pp);
}
});
return true;
}
$(function () {
//点击input框想要输入后 鼠标再点击其他地方的失焦状态
$("input[name='username']").blur(function () {
verifyUsername($(this));
});
$("#addregisterdiv input[name='password']").blur(function () {
verifyPassword($(this));
});
$("input[name='qq']").blur(function () {
verifyQq($(this));
});
pp.blur(function () {
verifyIphone($(this));
});
$("#mm2").blur(function () {
verifyMm2($(this));
});
//form表单提交触发的boolean值判断
$("#register").click(function () {
//var obj = verifyUsername($("input[name='username']"));
var pas = verifyPassword($("#mm1"));
var qqq = verifyQq($("input[name='qq']"));
var pho = verifyIphone(pp);
var pwd2 = verifyMm2($("#mm2"));
var a = !$("#userName").parent().parent().hasClass("has-error");
if(pas &&qqq &&pho&&a&&pwd2){
var data = $("#addregisterdiv").serialize();
$.ajax({
url:"${pageContext.request.contextPath}/user/insertOne",
data:data,
type:"post",
datatype:"json",
success:function (data) {
if(data.success){
location.reload();
}
}
})
}
});
});
//2次密码
function verifyMm2(pwd2) {
/*获取提示框*/
var mm2MSG = pwd2.val();
/*获取第一个框输入的密码*/
var pwd1 = $("#addregisterdiv input[name='password']").val();
/*进行比对*/
if(pwd1!=mm2MSG){
isError(pwd2,"两次输入的密码不一致!")
return false;
}else {
isOk(pwd2);
return true;
}
}
//用户名不能为空
function verifyUsername(obj) {
var objval=obj.val();
if(null==objval||""==objval){
//校验失败
isError(obj,"用户名不能为空");
return false;
}else{
isOk(obj);
return true;
}
}
//手机号码11位,并进行正则验证
function verifyIphone(pho) {
var phoval=pho.val();
var reg = /^1\d{10}$/;
if((!reg.test(phoval))||phoval==""||phoval==null){
isError(pho,"手机号格式不正确");
return false;
}else{
return aj();
}
}
//邮箱验证
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();
var reg = /^[a-zA-Z]\w{5,19}$/;
if(pasval.length<6||!reg.test(pasval)){
isError(pas,"密码格式不正确,请重新输入!");
return false;
}else{
isOk(pas);
return true;
}
}
</script>
</body>
</html>
controller:
package com.buba.witkey.controller;
import com.buba.witkey.pojo.User;
import com.buba.witkey.pojo.UserComplete;
import com.buba.witkey.service.UserCompleteService;
import com.buba.witkey.service.UserService;
import com.buba.witkey.utils.ResultUtil;
import com.sun.org.apache.xpath.internal.operations.Mod;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import javax.annotation.Resource;
import javax.servlet.http.HttpSession;
@RequestMapping("/user")
@Controller
public class UserController {
@Resource
private UserService userService;
//注册账户
@RequestMapping("/insertOne")
@ResponseBody
public ResultUtil insertOne(User user){
ResultUtil i = userService.insertOne(user);
return i;
}
//查找手机是否已经注册
@RequestMapping("/selectIphone")
@ResponseBody
public Boolean selectIphone(String iphone){
User u = userService.selectIphone(iphone);
if (u!=null){
return false;
}
return true;
}
}