zoukankan      html  css  js  c++  java
  • [必会] 表单验证+弹框~老司机原生js

    <!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>
  • 相关阅读:
    golang基础之第一个go程序
    golang基础之工程结构
    golang基础之初识
    Prometheus神器之监控K8s集群
    Kubernetes使用GlusterFS实现数据持久化
    Go使用Makefile构建
    快排的2种分区图解
    密钥交换之DH算法
    go mod使用
    socket常见选项之SO_REUSEADDR,SO_REUSEPORT
  • 原文地址:https://www.cnblogs.com/fengluzheweb/p/5554202.html
Copyright © 2011-2022 走看看