js常用总结

最新推荐文章于 2020-09-21 17:54:36 发布

蒙太纳奇

最新推荐文章于 2020-09-21 17:54:36 发布

阅读量136

点赞数

CC 4.0 BY-SA版权

分类专栏： js-jq 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_38331606/article/details/96475150

js-jq 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一个简单的网页表单验证与异步提交实现方案，包括手机号验证、错误提示显示及通过AJAX进行表单数据提交的具体实现过程。

1. onblur , onclick调用方法

2. input值的获取： var value = $('#id').val(); $('#id').val("设置值")

3. 普通div值的设置： $('#idmobileNum').html("*请输入您的手机号");

4. console.log("***[m]ajax返回结果:"+data);

5. window.location.href="brandSbtOk.html";

6. 手机号正则校验： https://blog.youkuaiyun.com/qq_38331606/article/details/96474685

7. 异步提交任务：$.ajax({ });

手机号：<input name="mobileNum" id="mobileNum" maxlength="11" onblur="mobileNumFunction();" type="text" />
错误信息：<div class="error" id="idmobileNum"></div>

提交按钮：<input onclick="saveBrandServerM('0');" type="button" class="subbtn" value="提交" />

function mobileNumFunction(){
   var mobileNum = trim($('#mobileNum').val());
   if(mobileNum == "" || mobileNum .length > 11) {
       $('#idmobileNum').html("*请输入正确的手机号");
       return false;
   }
    $('#idmobileNum').html("");
    return true;
}

function saveBrandServerM(){

    var mobileNum = trim($('#mobileNum').val());
   //表单提交
   $.ajax({
       url:'saveBrandServer.do',
       type: "POST",
       data:{mobileNum:mobileNum},
       dataType: 'text',
       success: function(data) {
           console.log("***[m]ajax返回结果:"+data);
           if(data != null && data == "ok") {
               window.location.href="brandSbtOk.html";
           }else if(data != null && data == "mobileNumError") {
               $('#idmobileNum').html("*请输入正确的手机号");
           }else {
               $('#idmobileNum').html("*数据填写有误,请重新输入");
           }
       }
   });
}