jquery h5注册页面及功能函数封装

r囧r小猫 2021-07-25 17:54 299阅读 0赞

## h5 注册页面 ##

很久没有用过jquery了，都差点忘记如何在html中引入自定义的js文件了。

在html文件中引入自定义的js文件，可以通过script标签引入，为了能够执行js文件中的方法，可以用立即执行函数进行函数封装。

具体写法如下：

(function(){ 
    	//里面是代码块
    })()

或者是这样的:

(function(){ 
    	//里面是代码块
    }())

### 判断访问终端 ###

为了保证兼容性，可以通过判断访问终端的方式来获取当前的环境。

因为像微信 QQ等，是不能直接在微信/QQ中打开某个链接进行下载东西的。最常见的方式就是通过点击右上角的扩展按钮，然后进入到浏览器中，进行东西的下载。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]  
判断访问终端的代码：

### request参数的处理 ###

//url参数获取
    function request(strName) { 
         var strHref = document.location.href;
         var intPos = strHref.indexOf("?");
         var strRight = strHref.substr(intPos + 1);
         var arrTmp = strRight.split("&");
         for(var i = 0; i < arrTmp.length; i++) { 
             var arrTemp = arrTmp[i].split("=");
             if(arrTemp[0].toUpperCase() == strName.toUpperCase())
                 return arrTemp[1];
         }
         return undefined;
     }

### 通过百度地图API获取当前定位 ###

**小知识点**

`script`标签中的`src`属性，如果是为了能够更加方便`http`或者`https`协议，可以使用相对协议地址的方式来进行处理。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]  
我之前用的百度地图api做的公司官网，在引用百度api时，用的就是写死的`http`协议，在本地使用`nignx`的时候，就会提示我`http`协议错误的信息，我当时的解决办法就是用`https`代替了`http`,现在看来，直接使用相对协议地址会更灵活一些。

### 手机号格式的验证 ###

//手机验证
    function verifyPhone() { 
      var reg = /^1(3|4|5|6|7|8|9)\d{9}$/;
      var tel = $.trim($('#phone').val());
      if (tel == '') { 
        $.MsgBox.Confirm("温馨提示", "请输入手机号");
        return false;
      }
      if (!reg.test(tel)) { 
        $.MsgBox.Confirm("温馨提示", "请输入正确的手机格式");
        return false;
      }
      return tel;
    }

### 点击跳转新的页面 ###

//jsonp回调
    window.download = function (data) { 
      if (data.code == 200) { 
        window.location.href = data.h5Url;
      } else { 
        $.MsgBox.Confirm("温馨提示", data.msg);
      }
    };

如果是想要打开一个新的页面，则可以通过`window.open = data.h5Url`

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center]: /images/20210725/16b467c2bb424f79bd36f57ac2a52450.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20210725/fbab5128db0d4c648c524e1d9f9af32f.png