<!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. MVC下载文件方式

    MVC下载文件方式 http://www.cnblogs.com/liang--liang/archive/2012/10/20/2732745.html 方式一: public FileStream ...

  2. 【后台测试】手把手教你jmeter压测

    ◆版权声明:本文出自胖喵~的博客,转载必须注明出处.  转载请注明出处:http://www.cnblogs.com/by-dream/p/5611555.html 我知道我迟早是要踏上了后台测试之路 ...

  3. 当div自适应的高度超过预设的高度的时候出现滚动条的办法

    方法一:主要是 min-height:50px; max-height:200px;overflow: auto; <div id="ss" style="widt ...

  4. Git commit 常见用法

        Git commit git commit 主要是将用户通过git add命令添加到暂存区里的改动给提交到本地的版本库,关于版本库的构成可以查看我先前的笔记. 每次提交我们都会在本地版本库生成 ...

  5. VirtualBox Win7 虚拟机 共享文件夹设置

    1.主机(Win10) 点击共享文件夹,例如D:\VMs\Sharefolder\,选择'属性->共享->共享',选择'Everyone',点击'添加',权限级别'读取/写入',然后一路点 ...

  6. dump redo日志文件的信息

    通常会用到以下两个命令:1.'alter session'命令用来dump redo日志的文件头2.'alter system dump logfile'命令用来dump redo文件的内容 以上命令 ...

  7. resin or tomcat .war e.g. note

    经常想在后台找WEB对应文件,做个记录 jar cvf step1.war . 命令将jsp(内含有html等数据局),等编译成war包目录下的文件有index.jps,eg.css -------- ...

  8. JAVA经典算法40题（1-20）

    [程序1]   题目:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第四个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少?   1.程序分析:   兔子的规律 ...

  9. 2016/12summary

    应用服务器处理业务逻辑,web服务器处理html文件.web服务器更加简单.应用服务器有tomcat,jboss,weblogic,web服务器有IIS,Apache. 徐总:core里面做业务逻辑, ...

  10. BJFU 1057

    描述 斐波那契额数列,我们都知道.现在qingyezhu想求斐波那契的某项值对2的某次方的结果.你可以帮一下他吗?他好可怜哦!计算了N的N次方次都错了,也挨了ben大哥的N的N次方次的训了.我想你是个 ...