<!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. Hadoop的Writerable在Spark无法序列化的问题

    Spark序列化这块网上讲的比较少,自己还没来得及看这块代码,今天编程的时候遇到一个Hadoop的Writerable实现在Spark无法序列化的问题.我的代码如下: object EntryApp ...

  2. python 常用的一些库

    AllPairs 2.0.1Appium-Python-Client 0.24asn1crypto 0.24.0attrs 17.4.0AutoItLibrary 1.1bcrypt 3.1.4bea ...

  3. web网站第一次加载慢的解决方法

    找到对应的应用程序池  将高级设置里的 闲置超时改为0

  4. char 与 unsigned char的区别和取值范围

    1.char和unsigned char 都是一个byte,8个bit.char是无符号类型,首位bit是符号位. 2.取值范围不同: (1)unsigned char的取值范围:0~2^8-1(0~ ...

  5. JavaScript 判断 Undefined 类型

    var cookiestr = ''; chrome.cookies.getAll( { 'url': 'https://mp.weixin.qq.com', 'secure': true }, fu ...

  6. 获取GridView控件总列数

    GridView控件,它不管是放在MasterPage母版页内,还是放在Page单独网页内,它不管是自动显示列AutoGenerateColumns="true",还是手动定列Au ...

  7. iOS模拟器录屏转gif神器

    我发现苹果的Quick Time Player用来录屏就挺好用的.打开后选择 文件 - 新建屏幕录制 - 点击录制按钮, 划出要录制的模拟器窗体 - 点击录制就可以了. 录制成mov格式还要再转成gi ...

  8. Linux开机自动挂载文件fstab介绍

    这个文件描述系统中各种文件系统的信息.一般而言,应用程序仅读取这个文件,而不对它进行写操作.对它的维护是系统管理员的工作. [root@localhost mnt]# cat /etc/fstab # ...

  9. 「模拟赛20180406」膜树 prufer编码+概率

    题目描述 给定一个完全图,保证\(w_{u,v}=w_{v,u}\)且\(w_{u,u}=0\),等概率选取一个随机生成树,对于每一对\((u,v)\),求\(dis(u,v)\)的期望值对\(998 ...

  10. 数据结构19: BF算法(普通模式匹配算法)

    判断两个串之间是否存在主串与子串的关系,这个过程称为串的模式匹配. 在串的模式匹配过程,子串 T 通常被叫做“模式串”. 普通的模式匹配(“BF”算法) 判断两个串是否存在子串与主串的关系,最直接的算 ...