boodstrap 简单的注册验证

最新推荐文章于 2023-01-28 10:16:46 发布

stayingAlone

最新推荐文章于 2023-01-28 10:16:46 发布

阅读量1k

点赞数 1

文章标签： bootstrap 验证

本文链接：https://blog.csdn.net/stayingAlone/article/details/53540922

版权

<%@ 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>
    <title>Using Ajax to submit data</title>

    <link rel="stylesheet" href="${pageContext.request.contextPath}/3rd-part/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/3rd-part/dist/css/bootstrapValidator.css"/>

    <script type="text/javascript" src="${pageContext.request.contextPath}/3rd-part/jquery-1.8.2.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/3rd-part/dist/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/3rd-part/dist/js/bootstrapValidator.js"></script>
</head>
<body>

<div class="container">
   <h1 align="center" style="margin-top: 100px;font-weight: bold;margin-bottom: 40px;" >注册商城账号</h1>

     
     <form style="margin-left: 400px;" id="defaultForm" method="post" class="form-horizontal" >

         
         <div class="form-group" style="height: 60px;" >
             <div align="left" class="col-lg-5" style="width:380px;" >
                 <input type="text" class="form-control"
                 name="phone" placeholder="请输入手机号码"
                 style="height: 45px;"
                  />
             </div>
         </div>

         <div class="form-group" style="height: 60px;" >
             <div align="left" class="col-lg-5" style="width:380px;" >
                 <input type="text" class="form-control"
                 name="mail" placeholder="请输入邮箱"
                 style="height: 45px;" />
             </div>
         </div>

         <div class="form-group" style="height: 60px;" >
             <div align="left" class="col-lg-5" style="width:380px;" >
                 <input type="password" class="form-control"
                 name="password" placeholder="请输入密码"
                 style="height: 45px;" />
             </div>
         </div>

         <div style="margin-left: -270px;" class="form-group">
             <div class="col-lg-9 col-lg-offset-3">
                 <button type="submit" name="submit" class="btn btn-warning"
                 style="width: 350px;height: 45px; margin-top:10px;" >立即注册</button>
             </div>
         </div>
     </form>

</div>
<script type="text/javascript">
$(document).ready(function() {
    /**
     * 下面是进行插件初始化
     * 你只需传入相应的键值对
     * */
    $('#defaultForm').bootstrapValidator({
            feedbackIcons: {/*输入框不同状态，显示图片的样式*/
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {/*验证*/
                phone: {/*键名username和input name值对应*/
                    validators: {
                        notEmpty: {/*非空提示*/
                            message: '请输入手机号码'
                        } ,
                        regexp: {
                            regexp: /^[0-9]{11}$/,
                            message: '手机号码为11位数字'
                        }/*最后一个没有逗号*/
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '请输入密码'
                        },
                        stringLength: {
                            min: 6,
                            max: 16,
                            message: '密码长度必须在6到16之间'
                        }
                    }
                },
                mail: {
                    validators: {
                        notEmpty: {
                            message: '请输入邮箱'
                        },
                        regexp: {
                            regexp: /^\w+@\w+\.(com|cn|net)$/,
                            message: '邮箱格式不正确'
                        }
                    }
                }
            }
            /* submitHandler: function (validator, form, submitButton) {
                alert("submit");
            } */
        }).on('success.form.bv', function(e){//点击提交之后
            // Prevent form submission 应该是阻止表单提交的
            e.preventDefault();
           //自己写的
           $.ajax({
               url:"/appstore/user/saveUser.do",
               type:"post",
               data:$("form").serialize(),
               dataType:"json",
               success:function(i){
                   alert(i);
                   if(i>0){
                       location.reload();
                       alert("注册成功");
                   }
               }
           });


        });


});

</script>
</body>
</html>