使用bootstrap用来表单验证

最新推荐文章于 2024-06-15 10:09:22 发布

qq_43154385

最新推荐文章于 2024-06-15 10:09:22 发布

阅读量947

点赞数

分类专栏：前端文章标签： bootstrap form

本文链接：https://blog.csdn.net/qq_43154385/article/details/84314213

版权

前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

效果图如下：

失焦验证如图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;
    }
  
}

qq_43154385

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
使用bootstrap用来表单验证

效果图如下：失焦验证如图1，电话必须唯一，如果数据库有该电话，失焦则弹出手机号已经被占用，请重新输入！两次密码输入必须一致，否则弹出如图三。实现代码如下：&lt;%-- Created by IntelliJ IDEA. User: 丑丑 Date: 2018/11/20 Time: 10:36 To change this template use...
复制链接

扫一扫

专栏目录