通过自定义属性存储数据实现输入框获得焦点与失去焦点改变value值

http://gopro.ee.cagoe.com/index.html
 



 
html:
<div class="name"><input value="在此输入您的姓名" data-value="在此输入您的姓名" /></div>
<div class="webId"><input value="在此输入您的微博ID" data-value="在此输入您的微博ID" /></div>
<div class="address"><input value="在此输入您的地址" data-value="在此输入您的地址" /></div>
<div class="tel"><input value="在此输入您的电话" data-value="在此输入您的电话" /></div>
<div class="email"><input value="在此输入您的电子邮件" data-value="在此输入您的电子邮件" /></div>
<img src="images/load.png" class="msg_text02 CusAnimateDom " data-delay="400" lazypath="images/surplus/msg_text02.png" />
<img src="images/load.png" class="submit_btn CusAnimateDom " data-delay="400" lazypath="images/surplus/submit_btn.png" />
<div class="agree_btn selected"></div>
<div class="policy_btn"></div>
<div class="select_box province">
    <div class="selected">请选择省份</div>
            <div class="select_list_box" style="display:none;">
                 <div class="select_list">T时代C5</div>
                 <div class="select_list">T时代C3</div>
                 <div class="select_list">T时代C45</div>
                 <div class="select_list">T时代Ce5</div>
                 <div class="select_list">T时代C5</div>
            </div>
     </div>

     <div class="select_box city">
          <div class="selected">请选择城市</div>
             <div class="select_list_box" style="display:none;">
                                <div class="select_list">T时代C5</div>
                                <div class="select_list">T时代C3</div>
                                <div class="select_list">T时代C45</div>
                                <div class="select_list">T时代Ce5</div>
                <div class="select_list">T时代C5</div>
           </div>
</div>
js
//判断自定义select框没有用被勾选
    $(".agree_btn").on("click", function () {

        if ($(this).hasClass("selected")) {
            $(this).removeClass("selected");

        } else {
            $(this).addClass("selected");
        }

    });
    //输入框获得焦点时
    $(".leaveMsg_con input").focus(function () {
        var _dataValue = $(this).attr("data-value");
        var _Value = $(this).val();
        if (_Value == "" || _Value == _dataValue) {
            $(this).val("");
        }
    });
    //输入框失去焦点时
    $(".leaveMsg_con input").blur(function () {
        var _dataValue = $(this).attr("data-value");
        var _Value = $(this).val();
        if (_Value == "" || _Value == _dataValue) {
            $(this).val(_dataValue);
        }
    });
    //提交按钮
    $(".submit_btn").click(function () {

        var _checkphone = /^[1][3-8]\d{9}$/;
        var _checkEmail = /^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$/;
        var _param = {
            "name": $(".name input").val(),
            "webId": $(".webId input").val(),
            "province": _province,
            "city": _city,
            "address": $(".address input").val(),
            "phone": $(".tel input").val(),
            "email": $(".email input").val()

        }

        if (_param.name == "" || _param.name == "在此输入您的姓名") {
            alert("请输入姓名!");

            return;
        }
        if (_param.webId == "" || _param.webId == "在此输入您的微博ID") {
            alert("请输入微博ID!");

            return;
        }

        /***************选择省市开始 ********/
        var _province = $(".province .selected").html();
        var _city = $(".city .selected").html();

        if (_province == "请选择省份") {
            alert("请选择省份");
            return;
        }
        if (_city == "请选择城市") {
            alert("请选择城市");
            return;
        }
        /*************** 选择省市结束********/

        if (_param.address == "" || _param.address == "在此输入您的地址") {
            alert("请输入您的地址!");

            return;
        }

        if (_param.phone == "" || _param.phone == "在此输入您的电话")
        {
            alert("请输入手机号码!");
            //$(".alert_not_null_popup").show();

            return;
        }
        if (!_checkphone.test(_param.phone))
        {
            alert("手机号码格式不正确!");
            //$(".alert_wrong_popup").show();

            return;
        }

        if (_param.email == "" || _param.email == "在此输入您的电子邮件") {
            alert("请输入电子邮件!");

            return;
        }
        if (!_checkEmail.test(_param.email)) {
            alert("电子邮件格式不正确!");

            return;
        }

        if (!($(".agree_btn").hasClass("selected"))) {

            alert("请勾选同意隐私政策!");
            return;
        }

            CmnAjax.PostData("/ajax/Ajax.aspx.cs?method=KeepUserInfo", _param, function (dat) {
            if (dat.IsSuccess == "1") {

                //提交成功
                AnimateFrame.SlideTo("thankPage");

                setTimeout(function () {
                    $("input").val("");
                }, 3000);

                //提交成功之后添加检测

            }
            else if (dat.IsSuccess == "2") {
            //输入的号码已存在
                $(".alert_alread_popup").show();
            }else {
                  alert("用户信息提交失败!");
            }

        });

    });
 
 
时间: 2024-10-05 14:57:22

通过自定义属性存储数据实现输入框获得焦点与失去焦点改变value值的相关文章

PhoneGap的Stroage存储数据的方式

<html> <head> <title>localStorage存储数据</title> <script type="text/javascript"> //设置name对应的值 localStorage.setItem("name", "刘备"); //得到name对应的值 var name = localStorage.getItem("name"); //删除

使用jQuery的data方法来为页面中的某个元素存储数据,(获取焦点,清除默认值)

使用data方法可以避免在DOM中存储数据,有些前端开发er喜欢使用HTML的属性来存储数据: 使用”alt”属性来作为参数名存储数据其实对于HTML来说是不符合语义的. 我们可以使用jQuery的data方法来为页面中的某个元素存储数据: html部分: 1 <form id="testform"> 2 <input type="text" class="clear" value="Always cleared&qu

Hive和Impala加载和存储数据功能曝光

Hive与Impala都是构建在Hadoop之上的数据查询工具,那么在实际的应用中,它们是如何加载和存储数据的呢? Hive和Impala存储和加载表,和所有的关系型数据库一样,有自己的数据管理结构,从它的Server到Database再到表和视图. 在其他的数据库中,表都是以自己特定的文件格式来存储的,比如Oracle有自己的存储格式,而对Hive而言,一个表就是包含一个或多个文件的HDFS目录,这个文件是属于表下面的内容,默认存储路径:/user/hive/warehouse/<table_

【Mark】Android应用开发SharedPreferences存储数据的使用方法

Android应用开发SharedPreferences存储数据的使用方法 SharedPreferences是Android中最容易理解的数据存储技术,实际上SharedPreferences处理的就是一个key-value(键值对)SharedPreferences常用来存储一些轻量级的数据. 1.使用SharedPreferences保存数据方法如下: //实例化SharedPreferences对象(第一步) SharedPreferences mySharedPreferences=

[安卓基础]010. 存储数据(上)

*:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } a { color: #4183C4; text-decoration: none; } a.absent { color: #cc0000; } a.anchor { display: block; padding-left: 30px; margin-left: -30px; cursor: poin

Android存储数据的8种方式

第一种:SharedPreferences 1.使用键值对的方式存储数据 2.通常用于:保存用户的偏好设置.选择是否保存密码.记录文档阅读的位置等 3.实现方式(写入): a).获取SharedPreferences对象     getSharedPreferences("文件名",MODE_PRIVATE/MODE_MULTI_PROCESS) 前者表示只能当前应用程序访问该文件:后者表示可以多个进程访问该文件:文件是存放在:data/data/<package name>

MongoDB存储数据

想要深入了解MongoDB如何存储数据之前,有一个概念必须清楚,那就是Memeory-Mapped Files. Memeory-Mapped Files 下图展示了数据库是如何跟底层系统打交道的. 内存映射文件是OS通过mmap在内存中创建一个数据文件,这样就把文件映射到一个虚拟内存的区域: 虚拟内存对于进程来说,是一个物理内存的抽象,寻址空间大小为2^64: 操作系统通过mmap来把进程所需的所有数据映射到这个地址空间(红线),然后再把当前需要处理的数据映射到物理内存(灰线): (这可以理解

一种存储数据的方法

写程序就是和逻辑和数据打交道,说的简单一点就是和数据打交道.说到数据,数据的存储当然是很重要的. 数据存储也是有一定的方法,在平常中,我们会用到int型来存储数据,或者bool型(C语言中没有,char型)来存储表示0,1的flag.有时候想想,如果只是简单的存储true和false的话,对于unsigned char型来说是否过于浪费了?信息论告诉我们,1bit数据就可以表示true和false,为什么不能将其存到1bit中? 那么,现在,我们开始将数据压缩. 如果有8个这样的数据,我们可以存

Android存储数据方式(转)

转自http://www.cnblogs.com/hanyonglu/archive/2012/03/01/2374894.html   本文介绍Android中的5种数据存储方式. 数据存储在开发中是使用最频繁的,在这里主要介绍Android平台中实现数据存储的5种方式,分别是: 1 使用SharedPreferences存储数据 2 文件存储数据 3 SQLite数据库存储数据 4 使用ContentProvider存储数据 5 网络存储数据 下面将为大家一一详细介绍. 第一种: 使用Sha