<!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">

    <title>尽知网</title>

    <link href="css/bootstrap.css" rel="stylesheet">

    <link href="css/font-awesome.css" rel="stylesheet">

    <link href="css/sweet-alert.css" rel="stylesheet">

    <link href="css/common.css" rel="stylesheet">

    <link href="css/index.css" rel="stylesheet">

    <link href="css/media.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->

    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->

    <!--[if lt IE 9]>

    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

</head>

<body>

<!--header-->

<nav id="jz-nav" class="navbar navbar-default">

    <div class="container-fluid">

        <div class="navbar-header">

            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">

                <span class="sr-only">Toggle navigation</span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

                <span class="icon-bar"></span>

            </button>

            <a class="navbar-brand" href="#">

                <img class="img-responsive" src="data:images/jz-logo.png" alt="">

            </a>

        </div>

        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

            <ul class="nav navbar-nav navbar-right">

                <li><a class="cur" href="/尽知/index.html">首页</a></li>

                <li class="jz-nav-center"><a href="#">个人中心</a></li>

                <li><a href="#">发布</a></li>

                <li><a href="/尽知/login.html">登陆</a></li>

                <li><a href="/尽知/register.html">注册</a></li>

            </ul>

        </div>

    </div>

</nav>

<!--header end-->

<!--登陆表单-->

<div class="jz-register">

    <div class="container-fluid">

        <div class="row">

            <div class="col-xs-12 col-sm-6">

                <form class="form-signin form-register" id="form-sign" method="post" action="">

                    <h2 class="jz-register-title">注册账号  <span>已有账户，立即</span><a href="/尽知/login.html">登录</a></h2>

                    <input name="myusername" id="myusername" type="text" class="form-control" placeholder="账户：" autofocus="">

                    <input name="mypassword" id="mypassword" type="password" class="form-control" placeholder="密码">

                    <input name="myrepassword" id="myrepassword" type="password" class="form-control" placeholder="确认密码" autofocus="">

                    <input name="phone" id="phone" type="password" class="form-control" placeholder="手机号">

                    <a href="javascript:;" class="text-center jz-getcode">点击获取验证码</a>

                    <input name="code" id="code" type="text" class="form-control" placeholder="验证码" autofocus="">

                    <button id="register" class="btn btn-lg btn-primary btn-block" type="submit">同意以下协议并注册</button>

                    <div class="jz-user text-center">

                        <input type="checkbox" id="agree" name="agree"/>

                        <a href="javascript:;" data-toggle="modal" data-target="#myModal"> 《尽知网用户协议》</a>

                    </div>

                </form>

            </div>

            <div class="col-xs-12 col-sm-6">

                <div class="jz-film-introduce">

                    <p>如果您不想把你的店铺展示在我们的网站，请到个人中心点击”撤销展示”，我们将会第一时间对您的店铺取消展示;</p>

                    <p>部分店铺可能出现漏拍的情况，如果我们网站没有发现你的店铺请到主页点击申请拍摄;</p>

                    <p>新店开业请联系我们免费拍摄！我们将免费为您推荐到头条;

                        如果我们的网址上没有您的店(城内)，请联系我们免费为您进行拍摄;

                        如需添加更多场景请到个人中心点击添加场景或联系我们！</p>

                </div>

            </div>

        </div>

    </div>

</div>

<!--登陆表单 end-->

<!--footer-->

<footer>

    <div class="jz-footer">

        <div class="container-fluid">

            <div class="row">

                <div class="col-xs-12 col-sm-6">

                    <ul>

                        <li><a href="javascript:;">免责声明</a></li>

                        <li><a href="javascript:;">使用协议</a></li>

                        <li><a href="javascript:;">投诉建议</a></li>

                    </ul>

                </div>

                <div class="col-xs-12 col-sm-6">

                    <span>电话:18225336165/18523753491  邮箱:578988509@qq.com</span> </br>

                    <span>工作时间9:00-16:00  qq群：15489314  地址：重庆市黔江区正阳街道群力社区155号</span>

                </div>

            </div>

        </div>

    </div>

</footer>

<!--footer end-->

<!--用户协议model-->

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">

    <div class="modal-dialog" role="document">

        <div class="modal-content">

            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>

                <h4 class="modal-title" id="myModalLabel">尽知网用户协议须知</h4>

            </div>

            <div class="modal-body">

                ...

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

            </div>

        </div>

    </div>

</div>

<!--用户协议 end-->

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

<script src="common/jquery.js"></script>

<script src="common/bootstrap.min.js"></script>

<script src="common/jquery.validate.min.js"></script>

<script src="common/sweet-alert.min.js"></script>

<script src="common/jquery.cookie.js"></script>

<script>

$(function (){

    jQuery.validator.addMethod("isMobile", function(value, element) {

        var length = value.length;

        var mobile = /^(13[0-9]{9})|(18[0-9]{9})|(14[0-9]{9})|(17[0-9]{9})|(15[0-9]{9})$/;

        return this.optional(element) || (length == 11 && mobile.test(value));

    }, "请正确填写您的手机号码");

    /*表单验证*/

    $("#register").click(function() {

        /*表单验证  */

        $("#form-sign").validate({

            rules: {

                myusername: {

                    required: true

                },

                mypassword: {

                    required: true

                },

                myrepassword: {

                    required: true,

                    equalTo: "#mypassword"

                },

                phone : {

                    required : true,

                    minlength : 11,

                    // 自定义方法：校验手机号在数据库中是否存在

                    // checkPhoneExist : true,

                    isMobile : true

                },

                code : {

                    digits : true,

                    required : true

                },

                agree: "required"

            },

            messages: {

                myusername: {

                    required: "请输入账户"

                },

                mypassword: {

                    required: "请输入密码"

                },

                myrepassword: {

                    required: "请输入密码",

                    equalTo: "两次密码输入不一致"

                },

                phone : {

                    required : "请输入手机号",

                    minlength : "确认手机不能小于11个字符",

                    isMobile : "请正确填写您的手机号码"

                },

                code : {

                    required : "请输入验证码",

                    digits : "验证码应该输入数字"

                },

                agree: "请接受我们的声明"

            },

            submitHandler: function (form) {

                var $form = $(form);

                $.ajax({

                    type: "POST",

                    url: '',

                    data: $form.serializeArray(),

                    beforeSend: function () {

                        $form.find(':submit').prop('disabled', true);

                    },

                    success: function (json) {

                        if(json.errmsg == 1) {

                            swal({

                                title: "",

                                html: false,

                                text: "",

                                type: "success",

                                showCancelButton: false,

                                confirmButtonText: "确定",

                                closeOnConfirm: true

                            });

                            return

                        }

                        swal({

                            title: "注册成功",

                            html: false,

                            text: "注册成功",

                            type: "success",

                            showCancelButton: false,

                            confirmButtonText: "确定",

                            closeOnConfirm: true

                        }, function(inputValue){

                            // window.location.href = ""; //?"+Math.random();

                            /*setTimeout(function() {

                             swal('Ajax request finished!');

                             }, 2000);*/

                        });

                    },

                    complete: function () {

                        $form.find(':submit').prop('disabled', false);

                    }

                });

            }

        });

    });

})

</script>

</body>

</html>

表单注册及自定义validate手机验证码验证实例的更多相关文章

  1. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. Android逆向破解表单注册程序

    Android逆向破解表单注册程序 Android开发 ADT: android studio(as) 程序界面如下,注册码为6位随机数字,注册成功时弹出通知注册成功,注册失败时弹出通知注册失败. 布 ...

  3. form表单注册——HTML

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  4. jquery.validate.js 验证表单时，在IE当中未验证就直接提交的原因

    jquery.validate.js 验证表单时,在IE当中未验证就直接提交的原因 今天利用了jquery.validate.js来验证表单,发现在火狐.谷歌浏览器当中都可以进行验证,但是在IE系列浏 ...

  5. 用 Flask 来写个轻博客 (20) — 实现注册表单与应用 reCAPTCHA 来实现验证码

    Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 reCAPTCHA 应用 reCAPTCHA 前文列表 用 Flask ...

  6. PHP正则表达式及表单注册案例

    正则表达式是一种具有特定模式的用来匹配文本的字符串 preg_match 匹配 $pattern = '/php/'; $subject = "php 是最好的编程语言,php 没有之一!& ...

  7. form表单使用(博客系统的登陆验证，注册)

    先从小的实例来看form的用法 登陆验证实例,来看form的常规用法 1. forms.py # 用于登陆验证验证 from django.core.validators import RegexVa ...

  8. 简单好用的表单校验插件——jQuery Validate基本使用方法总结

    jquery validate当前最新版本是1.17.0,下载链接是:https://github.com/jquery-validation/jquery-validation/releases/t ...

  9. jQuery_完成表单注册检验

    在校验表单的时候会很麻烦,但是jq可以用很简单的方法来检验,即使用validate. 原表单: 代码 <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. java8的十大新特性

    推荐学习的博客: http://blog.csdn.net/renfufei/article/details/24600507/-------讲解的非常通俗易懂 http://blog.csdn.ne ...

  2. Git相关安装包打包下载

    Git相关软件偶尔需要***才能下载,故分享于此 1.Git-2.15.0-64-bit.exe 2.TortoiseGit-2.5.0.0-64bit.msi 3.TortoiseGit-Langu ...

  3. python web框架（bottle，flask，tornado）

    Python的WEB框架 Bottle Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. pip i ...

  4. C#知识点总结系列：3、C#中Delegate和Event

    一.Delegate委托可以理解为一个方法签名. 可以将方法作为另外一个方法的参数带入其中进行运算.在C#中我们有三种方式去创建委托,分别如下: public delegate void Print( ...

  5. Python3中实现简单的购物车程序

    product_list = [ ('iphone',5800), ('imac',15800), ('watch',9800), ('cloth',550), ('coffe latee',35), ...

  6. 利用POI读取word文档实例

    package read.document; import java.io.FileInputStream; import java.io.FileNotFoundException; import ...

  7. 51nod 1350 斐波那契表示（递推+找规律）

    传送门 题意 分析 我们发现该数列遵循下列规律: 1 1,2 1,2,2 1,2,2,2,3 1,2,2,2,3,2,3,3 我们令A[i]表示f[i]开始长为f[i-1]的i的最短表示和 那么得到A ...

  8. 【OD深入学习】Java多线程面试题

    一.参考文章 1. Java线程面试题 Top 50 2. Java面试——多线程面试题 3. JAVA多线程和并发基础面试问答 4. 15个顶级Java多线程面试题及回答 二.逐个解答 三.一语中的 ...

  9. Java整体之JavaEE

    思维导图 (Xmind)链接:http://pan.baidu.com/s/1pKTOTRH 密码:oq7f <iframe src="http://www.xmind.net/emb ...

  10. [POI2009]KAM-Pebbles BZOJ1115 [ 待填坑 ] 博弈

    有N堆石子,除了第一堆外,每堆石子个数都不少于前一堆的石子个数.两人轮流操作每次操作可以从一堆石子中移走任意多石子,但是要保证操作后仍然满足初始时的条件谁没有石子可移时输掉游戏.问先手是否必胜. 感谢 ...