<!DOCTYPE html>
<html>
<head>
    <meta charset="gb2312">
    <title>恰恰瓜子兑换</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <link href="http://css.jj.cn/css/my_mob/activity/qiaqiaguazi.css"  rel="stylesheet"/>
    <script src="http://css.jj.cn/js/pub_rem.js" type="text/javascript" ></script>
    <script src="http://css.jj.cn/js/jquery.js" type="text/javascript"></script>
</head>
<body>
<!--structure s-->
    <div class="wrapper">
        <div class="header">
            <a href="#">活动详情 > ></a>
            <img src="http://img1.jj.cn/acts/2016/hd_20160527_2/qq_banner.jpg" />
        </div>
        <form action="#" id="form_list_submit" method="post">
            <ul class="form_list">
                <li>
                    <input id="check_phone" type="text" name="mobile" placeholder="手机号" />
                    <em id="check_phone_err"></em>
                </li>
                <li>
                    <input type="password" id="check_password" placeholder="登录密码" />
                    <em id="check_password_err"></em>
                </li>
                <li class="phone_num">
                    <span class="phone_word" id="check_phone_num">
                        <input type="text" class="no_input" placeholder="输入验证码" disabled/>
                        <span></span>
                        <button class="obtain_word" type="button">获取验证码</button>
                    </span>
                    <span id="phone_word_err"></span>
<!--                    <input type="text" id="smscode" type="text" value="" disabled/>
                    <span class="get_num" type="button"  id="getCode" onclick="getMsgCode();" >获取验证码</span>-->
                </li>
            </ul>
            <button class="but big_but" id="submit_but" type="button">我要参加</button>
        </form>
    </div>
<script type="text/javascript" src="http://css.jj.cn/js/my.cl/2015/input_check_15.js"></script>
<script language="JavaScript" type="text/javascript">
    $("#check_phone").blur(function () {
        var pnone_num = $(this).val();
        var car_check = input_check.check_phone({
            num: pnone_num
        });
        input_check.notice({
            id: "check_phone_err",
            msg: car_check.MSG,
            flag: car_check.REV,
            fn: function () {
                var msg = ""
                $("#check_phone")[0].on_check = car_check.REV;            
                if(car_check.REV){
                    $.getJSON("http://a4.act.jj.cn/reg/check_loginname.php?loginname=" + pnone_num + "&regtype=2&n=1&callback=?", function (data) {
                        if(data.REV){
                            input_check.check_phone_num({
                                ajax_url:"http://a4.act.jj.cn/reg/get_sms_code.php",
                                box_id: "check_phone_num",
                                typeID: 10,
                                smsControlID: 5,
                                mobile: pnone_num,
                                fn:function(obj){
                                    input_check.notice({
                                        id: "phone_word_err",
                                        msg: obj.MSG,
                                        flag: obj.REV
                                    });
                                    $("#check_phone_num input")[0].on_check = obj.REV;
                                }
                            });
                        }else{
                            msg = decodeURI(data.MSG)
                            input_check.notice({
                                id: "check_phone_err",
                                msg: msg,
                                flag: data.REV
                            });
                        }
                    });

                }
            }
        });
    }).focus(function (ev) {
        var ev = ev || event;
        input_check.notice({
            id: "check_phone_err",
            ev: ev
        });
    });

    $("#check_password").blur(function () {
        var password = $(this).val();
        var car_check = input_check.check_pwd({
            num: password
        });
        input_check.notice({
            id: "check_password_err",
            msg: car_check.MSG,
            flag: car_check.REV,
            fn: function () {
                $("#check_password")[0].on_check = car_check.REV
            }
        });
    }).focus(function (ev) {
        var ev = ev || event;
        input_check.notice({
            id: "check_password_err",
            ev: ev
        });
    });

    $('#submit_but').click(function(){
        var submit_but = true;
        if(!$("#check_phone")[0].on_check){
            var submit_but = false;
            $("#check_phone")[0].focus();
            $("#check_phone")[0].blur();
        }
        if(!$("#check_password")[0].on_check){
            var submit_but = false;
            $("#check_password")[0].focus();
            $("#check_password")[0].blur();
        }
        if(!$("#check_phone_num input")[0].on_check){
            var submit_but = false;
            input_check.notice({
                id: "phone_word_err",
                msg: "请输入验证码",
                flag: false
            });
        }

        if(submit_but){
            form_list_submit.submit();
        }

    });
</script>
<script type="text/javascript" src="http://css.jj.cn/js/acts/2016match/pop_box.js" > </script>
</body>
</html>

[必会] 表单验证+弹框~老司机原生js的更多相关文章

  1. react.js 表单验证-登录框

    import React,{ Component } from 'react'; import style from 'cms.css'; ​ /** * 路由路径 登录成功后页面跳转到index * ...

  2. [JavaScript] 表单验证不通过不提交的JS写法

    主要是本世纪初的写法.<script> function validateForm(f) { if (f.name.value == "") { alert(" ...

  3. 基于Jquery Validate 的表单验证

    基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Vali ...

  4. jquery validate强大的jquery表单验证插件

    jquery validate的官方演示和文档地址: 官方网站:http://jqueryvalidation.org/ 官方演示:http://jqueryvalidation.org/files/ ...

  5. jQuery-easyui和validate表单验证实例

    jQuery EasyUI 表单 - 表单验证插件validatebox 使用时需要向页面引入两个css文件如下: <link rel="stylesheet" href=& ...

  6. jQuery.validate.js表单验证插件

    jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head& ...

  7. tipsText表单验证（注册）

    注册表单验证脚本 <script src="/assets/skins/js/jquery-1.11.2.min.js"></script> <scr ...

  8. ElementUi rules表单验证

    ElementUi 表单验证 工作中常用到的JS验证 可以在pattern中书写正则,并且配合elementUI进行表单验证. pattern 属性规定用于验证输入字段的模式.模式指的是正则表达式. ...

  9. jquery.validate.js使用之自定义表单验证规则

    jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 ...

随机推荐

  1. 【转】OpenStack奥斯汀峰会Keynotes国内抢先看

    http://www.openstack.cn/?p=5341 OpenStack奥斯汀峰会Keynotes国内抢先看入口:http://www.tudou.com/home/_903780397/i ...

  2. Extjs 图片的自动缩放

    function resizeImage(obj) { var width = Ext.getCmp('welcome').getWidth(); //welcome 为一Panel的id 分割线下的 ...

  3. python Shapely 使用指南

    翻译:http://toblerity.org/shapely/manual.html 引入包 from shapely.geometry import Point from shapely.geom ...

  4. JavaAPI_01

    >JavaAPI 文档注释可以在:类,常量,方法上声明 文档注释可以被javadoc命令所解析并且根据内容生成手册 package cn.fury.se_day01; /** * 文档注释可以在 ...

  5. tcp protocol number

    在计算机网络OSI模型中,TCP端口完成第四层传输层所指定的功能.我们的电脑与网络连接的许多应用都是通过TCP端口实现的.本文与大家分享部分TCP端口的介绍. 21端口:21端口主要用于FTP(Fil ...

  6. R数据实战vehicles--1

    新建项目vehicles-project 数据文件vehicles.csv与varlabels.txt放在项目文件中

  7. Java之美[从菜鸟到高手演变]之Spring源码学习 - 环境搭建

    准备工作 1.下载安装STS(Spring Tool Suite),在eclipse market里直接搜索.下载.安装.2.下载安装gradle, Spring源码使用gradle构建,下载后解压到 ...

  8. c++网络编程错误（WSAStartup）

    在使用CodeBlocks编译C++程序时, 编译程序的时候出现如下错误: undefined reference to `inet_addr@4'undefined reference to `ge ...

  9. python IDE

    提供给开发者 10 款最好的 Python IDE http://www.oschina.net/news/57468/best-python-ide-for-developers vim windo ...

  10. C 语言中的指针和内存泄漏

    引言对于任何使用 C 语言的人,如果问他们 C 语言的最大烦恼是什么,其中许多人可能会回答说是指针和内存泄漏.这些的确是消耗了开发人员大多数调试时间的事项.指针和内存泄漏对某些开发人员来说似乎令人畏惧 ...