<!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. Python程序设计2——列表和元组

    数据结构:更好的说法是从数据角度来说,结构化数据,就是说数据并不是随便摆放的,而是有一定结构的,这种特别的结构会带来某些算法上的性能优势,比如排序.查找等. 在Python中,最基本的数据结构是序列( ...

  2. 使用 classList API

    一.classList API 是什么 属于 DOM API,HTML5 引入,用来操作 HTML 标签的 class 属性值. classList 属性是一个只读的类数组对象,"实时&qu ...

  3. 自动化打包资源混淆集成python实践----打包

    1.自动化打包方案 1)友盟多渠道多渠道打包 2)gradle productFlavors系统的条件编译 3)美团打包 4)APK文件注释写入渠道号 2.各打包方案简介 1)友盟多渠道多渠道打包(w ...

  4. jQuery 插件开发——countdown（倒计时）

    故事背景:按照惯例,先写下故事背景,其实也是再次汇报下最近开发情况的.做电商的都知道,这是个活动季啊,双十一.双十二.元旦....各种啊..其实说这么多就是想表达最近比较忙.呵呵^_^,正好今天抽点空 ...

  5. snmp snmp4j的使用

    snmp4j的使用 一.什么是snmp及snmp4j? snmp是 Simple Network Management Protocol (简单网络管理协议)的简写. SNMP4J是一个用Java来实 ...

  6. java java启动方式

     java启动方式 两种方案: 1.守护进程方式启动: java –jar命令: 例如:C:\eclise\work\test.jar C:\eclise\work\test.java 打开dos:输 ...

  7. mysql在linux下的安装与优化

    mysql5.6 http://www.cnblogs.com/bookwed/p/5896619.html mysql5.7 http://blog.csdn.net/wb96a1007/artic ...

  8. OpenCV&Qt学习之四——OpenCV 实现人脸检测与相关知识整理

    开发配置 OpenCV的例程中已经带有了人脸检测的例程,位置在:OpenCV\samples\facedetect.cpp文件,OpenCV的安装与这个例子的测试可以参考我之前的博文Linux 下编译 ...

  9. 黑马MySQL数据库学习day01 MySQL8和MySQL5.5暴力破解密码

  10. java：数据结构复习（三）链表队列

    @TOC 和栈一样,队列也是表,但是使用队列的特点是先进先出. 队列模型 队列的基本操作是入队,它是在表的末端插入一个元素,和出队,它是删除在表开头的一个元素 graph LR A[<kbd&g ...