您现在的位置: 主页 > 睿峰资讯 > 技术宝典 >

Web开发中表单的处理(1)|睿峰web前端技术干货

时间:2017-08-03 16:39:04   来源:睿峰教育  作者:睿峰

成都web前端培训机构

一、表单既重要又复杂
表单是Web应用中最重要的部份,因为大多数“富数据”都是通过表单从用户那里获得的。

表单之所复杂,有如下原因:

   1.表单输入需要在页面和服务器同时修改这份数据
   2.修改的内容需要在页面的其它地方反映出来
   3.用户的输入可能存在很多问题,所以需要验证输入的内容
   4.用户界面需要清晰地显示出可能出现的预期结果和错误信息
   5.字段之间的依赖可能存在复杂的业务逻辑
   6.希望不依赖DOM选择器就能轻松测试表单


二、处理表单的不同方式

当表单被提交(通过浏览器或AJAX)时,某种程度上它必须被编码。如果不明确地指定
编码,则默认为application/x-wwwform-urlencoded

1、原生表单的处理
   注意:1、form标签中的属性的处理,form标签中必须包含下列两个属性
            action="/user/signin"
            method="POST"
         2、input 必须包含name属性且值不能为空
            name="loginname"
         3、提交按钮不伦用input还是button都必须放在form标签所包裹的区域内(初学者注意)

   实例:

   <form name="signinForm"
         id="signinForm"
         class="form-horizontal"
         action="/user/signin"
         method="POST">
       <div class="form-group">
           <label class="col-sm-2 control-label"> Login Name :</label>
           <div class="col-sm-10">
               <input class="form-control"
                      type="text"
                      placeholder="请输入登录名"
                      name="loginname"
                      id="loginname"
                      required>

           </div>
       </div>
       <div class="form-group">
           <label class="col-sm-2 control-label"> Password :</label>
           <div class="col-sm-10">
               <input class="form-control"
                      type="password"
                      placeholder="请输入密码"
                      name="pwd"
                      id="pwd"
                      required>
           </div>
       </div>
       <div class="form-group text-left" id="ErrorMsg-panle">
           <label class="col-sm-2 control-label"> </label>
           <div class="col-sm-10">
               <span id="ErrorMsg" class="alert alert-danger"></span>
           </div>
       </div>
       <div class="form-group">
           <label class="col-sm-2 control-label"> </label>
           <div class="col-sm-10">
               <input type="button"
                      value="登录"
                      onclick="validatorForm();"
                      id="btn-submit"
                      class="btn btn-default">
                 
               <input class="btn btn-default"
                      type="reset" value="取消" >
           </div>
       </div>
   </form>
 <script src="./vendor/validator-js/validator.min.js"></script>
 <script>

        function validatorForm() {
            var ret = true;
            if(validator.isEmpty($("#loginname").val())){
                ret = false;
                alert("登录名不能为空!");
                $("#loginname").focus();
                return false;
            }

            if(validator.isEmpty($("#pwd").val())){
                ret = false;
                alert("密码不能为空!");
                $("#pwd").focus();
                return false;
            }


        }
  </script>

(未完待续)



Web前端工程师学习路线、方式详解|成都web前端培

上一篇:成都UI设计培训,对比3中不同设计的方式  
下一篇:软件测试中软件质量的10条知识|成都软件测试培

开班信息

ios全科班 8.14 热招

软件测试定制班 8.14 热招

软件测试定制班 7.31 爆满

HTML5定制班 8.7 热招

HTML5定制班 7.31 爆满

JAVA开发定制班 8.14 热招

UI设计全科班 8.14 热招

UI设计定制班 7.31 爆满

学员专访

黄锟

iOS开发工程师

薪资:7000元/月

李建科 HTML5开发工程师 薪资:10500元/月

李声楷 java工程师 薪资:保密

李新 HTML5开发工程师 薪资:9800元/月

张文敏 iOS开发工程师 薪资:7500元/月

睿峰教育——做受尊敬的培训机构 价值观: 敬畏 感恩 责任 创新 使命——通过移动互联产品提升人类生活品质 join us