[必会] 表单验证+弹框~老司机原生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>
时间: 2024-08-24 18:06:28

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

html5表单验证消息框

Email <!DOCTYPE html> <html> <head> <title>TODO supply a title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> .ema

基于Jquery Validate 的表单验证

基于Jquery Validate 的表单验证 jquery.validate.js是jquery下的一个验证插件,运用此插件我们可以很便捷的对表单元素进行格式验证. 在讲述基于Jquery Validate的表单验证前,我们先回顾一下基础纯JS的表单验证. 1.回顾基于JS的表单验证 我们先写一个简单的验证邮箱.手机号的表单,页面代码如下: 1 <form action="XXXX.action" method="post" onsubmit="r

jquery validate触发表单验证

jquery validate是常用的表单验证插件.遇到一个jquery validate表单验证不触发的问题 目前写法:$(function(){  $("#form").validate({     rules : {            themeColor: {                required : true            },            --        },        messages : {            themeCol

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

jquery.validate.js使用之自定义表单验证规则,下面列出了一些常用的验证法规则 jquery.validate.js演示查看 jquery validate强大的jquery表单验证插件 http://www.51xuediannao.com/js/jquery/jquery_validate/ ======================================================== //扩展验证规则 //邮箱 表单验证规则jQuery.validator.

tipsText表单验证(注册)

注册表单验证脚本 <script src="/assets/skins/js/jquery-1.11.2.min.js"></script> <script src="/scripts/jquery/jquery.form.min.js" type="text/javascript"></script> <script src="/scripts/jquery/Validform_v

jQuery/javascript实现网页注册的表单验证

1 <html> 2 <head> 3 <meta charset="utf-8"> 4 <title>注册表单验证</title> 5 <script src="jquery.js"></script> 6 <style type="text/css"> 7 table{background-color:pink;width:80%;height:3

通用js表单验证工具类插件-is.js

is.js是一个强大的通用js表单验证工具类.你可以使用js.js来检测任何东西,例如检测所给的值是否为参数,是否是数组,是否是超链接,甚至可以检测浏览器类型,正则表达式和数学表达式等. is.js根据检测的类型分为:类型检测.正则表达式检测.算数检测.环境检测.时间检测.Presence检测.对象检测.字符串检测数组检测和配置检测. 在线文档:http://www.htmleaf.com/Demo/201502091353.html 下载地址:http://www.htmleaf.com/jQ

jQuery.validate.js表单验证插件

jQuery.validate.js表单验证插件的使用 效果: 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-e

模态框的理解 ,jQ: loading,进度条, 省级联动 ,富文本编辑器 表单验证 插件

模态框: 打开一个弹框 不关闭它就不能做框外的操作 必须关闭或弹出另外的弹框 加载延迟loading + 进度条只要有请求 就处理一下监控ajax 全局事件jquery: 开始     $('#box').ajaxStart() 多个ajax共享一个Start 发送 .ajaxSend() 成功 .ajaxSuccess() 完成 . ajaxComplete() 完成后有错误 .ajaxError() 停止 .ajaxStop()多个ajax共享一个Stop Nprogress:进度条引入 c