ssm+bootstrap验证练习01注册验证(方法一)之代码实现

来源：互联网发布：license 开发 node 编辑：程序博客网时间：2024/06/08 12:46

验证的效果

验证用户名：

验证电话号码

public interface UserMapper {
// 添加的方法
public void insert(Address a);

public void add(User user);

public User selectByName(String username);
}

=======================================================

userMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.frank.dao.UserMapper">

<insert id="insert" parameterType="address">
insert into t_address (user_address,user_id)values(#{user_address},#{user.id});
</insert>

<insert id="add" parameterType="user">
insert into t_user (username,password,phone)values(#{username},#{password},#{phone});
</insert>

<select id="selectByName" parameterType="user" resultType="user">
select * from t_user where username=#{username}
</select>
</mapper>

=================================================

controller类

@Controller
@RequestMapping("user")
public class ControllerTest {

@Autowired
private UserService service;

//添加的方法
@RequestMapping("insert")
public String insert(Address a,User user,HttpSession session,Model model){
service.add(user);
a.setId(user.getId());
service.insert(a);
session.setAttribute("address",a.getUser_address());
return "login";
}

@RequestMapping("exist")
@ResponseBody
public String exist(String username){
boolean exist = service.exist(username);
System.out.println("-----:"+username);
if(exist){
return "ok";
}
return "error";
}
}

==========================================

UserServiceImpl类

@Service
@Transactional
public class UserServiceImpl implements UserService{

@Autowired
private UserMapper userMapper;

@Override
public void insert(Address a) {
// TODO Auto-generated method stub
userMapper.insert(a);
}

@Override
public void add(User user) {
// TODO Auto-generated method stub
userMapper.add(user);
}

/*
*
*/
@Override
public boolean login(User user) {
User login = userMapper.selectByName(user.getUsername());
if(login!=null && user.getPassword().equals(login.getPassword())){
return true;
}
return false;
}

/*
*
*/
@Override
public boolean exist(String username) {
User user = userMapper.selectByName(username);
if(user!=null){
return true;
}
return false;
}

}

===============================================

reg.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">

<title>My JSP 'index.jsp' starting page</title>
<script src="static/js/jquery-1.10.1.js"></script>

<script src="static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<link href="static/bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />

<script src="static/bootstrapvalidator/dist/js/bootstrapValidator.min.js"></script>
<link href="static/bootstrapvalidator/dist/css/bootstrapValidator.min.css" rel="stylesheet" />

<script type="text/javascript">
$(function(){
var username=true;
var phonenum=true;
//获取username框的焦点
$("#name").focus(function(){
$("#but").prop("disabled",true);
});
//获取phone框的焦点
$("#phone").focus(function(){
$("#but").prop("disabled",true);
});
//失去焦点时
$("#name").blur(function(){
$("span").empty();
var name=$(this).val();
if(name=="" && name==null){
var span=$("<span>用户名不能为空！</span>");
$(this).after(span);
$("#divname").addClass("has-error");
}else{
$.post("user/exist.do",{"username":name},
function(data){
if(data=="ok"){

var span=$("<span>用户名重复，请修改</span>");
$("#name").after(span);
$("#divname").removeClass("has-success").addClass("has-error");
username=false;
}else{
var span=$("<span>√</span>");
$("#name").after(span);
$("#divname").removeClass("has-error").addClass("has-success");
$("#but").removeAttr("disabled");
username=true;
}
},
"json");
}
});

$("#phone").blur(function(){
$("span").empty();
var phone=$(this).val();
//正则表达式验证手机号码
if(!(/^1[3|4|5|8][0-9]\d{4,8}$/.test(phone))){
var span=$("<span>手机号格式不对</span>");
$(this).after(span);
$("#divphone").addClass("has-error");
phonehao=false;
}else{
phonehao=true;
var span=$("<span>√</span>");
$("#phone").after(span);
$("#divphone").removeClass("has-error").addClass("has-success");
$("#but").removeAttr("disabled");
}
});

$("#but").click(function(){
if(username && phonehao){
$("#form1").submit();
}else{
alert("信息错误");
}

});

});
</script>
<body>

<form class="form-horizontal" role="form" action="user/insert.do" id="form1">
<div class="form-group" id="divname">
<label for="firstname" class="col-sm-2 control-label">用户名</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="name" name="username"
placeholder="请输入用户名" >
</div>
</div>
<div class="form-group" id="divpass">
<label for="lastname" class="col-sm-2 control-label">密码</label>
<div class="col-sm-10">
<input type="password" class="form-control" id="pass" name="password"
placeholder="请输入密码">
</div>
</div>
<div class="form-group" id="divphone">
<label for="lastname" class="col-sm-2 control-label">手机号</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="phone" name="phone"
placeholder="请输入手机号">
</div>
</div>
<div class="form-group">
<label for="lastname" class="col-sm-2 control-label">地址</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="user_address"
placeholder="请输入地址">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="button" class="btn btn-default " id="but">注册</button>
</div>
</div>
</form>
</body>
</html>

阅读全文

0 0