<!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. Oracle中PL/SQL简介、基本语法以及数据类型

    Oracle中PL/SQL简介.基本语法以及数据类型 一.PL/SQL简介. Oracle PL/SQL语言(Procedural Language/SQL)是结合了结构化查询和Oracle自身过程控 ...

  2. sshpass 用法举例

    关于sshpass 背景 在Linux后台中,经常会用到ssh.scp等命令.需要进行认证,手动输入密码,是交互式的过程. 当将ssh.scp等命令做成自动化脚本时,可能需要非交互式的登录过程,此时可 ...

  3. myEclipse 界面窗口打不开问题

    用的myEclipse版本为2014,在其他工作空间没有此问题,在此工作有此问题. 解决办法: 把当前工作空间视图重置即可

  4. LeetCode Kth Largest Element in an Array

    原题链接在这里:https://leetcode.com/problems/kth-largest-element-in-an-array/ 题目: Find the kth largest elem ...

  5. vi基本命令

    http://www.cnblogs.com/younggun/p/3190820.html 要记得经常练习

  6. c#.net常用字符串函数 字符串常用方法

    RegionsStr = RegionsStr.Remove(RegionsStr.LastIndexOf(","), 1);   //去掉最后一个逗号 Compare 比较字符串 ...

  7. SD卡读写遇到的一些函数

    SD_SPI_ReadWriteByte(0XFF): 你的数据线写0xff,就是一直保持高,clk就有了8个,可以说只是发送的数据是0xff,这又不是SD的命令,但是它必须要靠控制器提供时钟才能工作 ...

  8. Spark实战4:异常检测算法Scala语言

    异常检测原理是根据训练数据的高斯分布,计算均值和方差,若测试数据样本点带入高斯公式计算的概率低于某个阈值(0.1),判定为异常点. 1 创建数据集转化工具类,把csv数据集转化为RDD数据结构 imp ...

  9. 解决jQuery ajax跨域问题，Google、IE、Firefox亲测有效

    直接上最后的结果吧 JS: $.ajax({ type: "GET", async: false, crossDomain: true, url: "www.test.c ...

  10. xcode编译错误

    1.xcode无效文件的编译错误. 问题: clang: error: no such file or directory: '/Users/admin/client/trunk/sengoku_sc ...