ExtJS学习心得(验证规则)

最新推荐文章于 2017-11-14 21:29:00 发布

hwq_1987

最新推荐文章于 2017-11-14 21:29:00 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

文章标签： extjs function email action css url

本文链接：https://blog.csdn.net/hwq1987/article/details/6201305

本文介绍了如何使用ExtJS美化表单样式、实现表单验证及表单提交等功能。通过实例代码展示了表单元素的绑定与自定义验证方法，以及如何处理表单提交流程。

ExtJS学习心得（三）

Posted 周二, 04/15/2008 - 20:24 by admin

这里主要讲一下表单的应用：）

一、美化表单：
ExtJS自带的CSS效果可以让表单非常漂亮，
如果你觉自带的这些效果不够漂亮，可以到本站的资源下载专区，下载其他皮肤.
下载地址： [url=http://www.extjs.org.cn/index.php?q=download/]
在使用前先将ext-all.css文件导入页面，然后加入以下代码

      01.
      <div class="x-box-ml">
     
      02.
      <div class="x-box-mr">
     
      03.
      <div class="x-box-mc">
     
      04.
      <form id="regform">
     
      05.
      <fieldset align="middle">
     
      06.
      <legend><font class="btitle" color="#ff7300">
     
      07.
      <strong class="style7">帐号信息</strong></font></legend>
     
      08.
      <table width="100%" align="center">
     
      09.
      <tr>
     
      10.
      <td style="text-align: right">
     
      11.
      会员Email
     
      12.
      </td>
     
      13.
      <td style="text-align: left" width="300">
     
      14.
      <input type="text" id="UserEmail" name="UserEmail" />
     
      15.
      <span id="msg" style="display: none"></span>
     
      16.
      </td>
     
      17.
      </tr>
     
      18.
      <tr>
     
      19.
      <td style="text-align: right">
     
      20.
      登录密码
     
      21.
      </td>
     
      22.
      <td style="text-align: left">
     
      23.
      <input id="UserPwd" name="UserPwd" type="password" />
     
      24.
      </td>
     
      25.
      </tr>
     
      26.
      <tr>
     
      27.
      <td style="text-align: right">
     
      28.
      密码确认
     
      29.
      </td>
     
      30.
      <td style="text-align: left">
     
      31.
      <input id="UserPwd1" name="UserPwd1" type="password" />
     
      32.
      </td>
     
      33.
      </tr>
     
      34.
      </table>
     
      35.
      </fieldset>
     
      36.
      <div id="regbutton">
     
      37.
      </div>
     
      38.
      </form>
     
      39.
      </div>
     
      40.
      </div>
     
      41.
      </div>
     
      42.
      <div class="x-box-bl">
     
      43.
      <div class="x-box-br">
     
      44.
      <div class="x-box-bc">
     
      45.
      </div>
     
      46.
      </div>
     
      47.
      </div>

二、绑定及验证表单：
以上只是将表单显示出来了，如需对表单域操作，还需要在JS里写相关的代码进行绑定

      01.
      var fm2 = new Ext.form.BasicForm('regform');   
     
      02.
      //加入验证框
     
      03.
      fm2.add(new Ext.form.TextField({
     
      04.
      allowBlank: false,//不能为空
     
      05.
      blankText:'EMAIL不能为空，且请确保有效地址！',
     
      06.
      //regex:re,//正则验证
     
      07.
      invalidText:'EMAIL格式不正确或此EMAIL已被注册！',
     
      08.
      validator:checkEmail//自定义验证函数
     
      09.
      }).applyTo(userEmail)); 
     
      10.
       
      11.
      fm2.add(new Ext.form.TextField({
     
      12.
      allowBlank: false,//不能为空
     
      13.
      blankText:'密码不能为空！'
     
      14.
      }).applyTo(Ext.get('UserPwd')));
     
      15.
       
      16.
      fm2.add(new Ext.form.TextField({
     
      17.
      allowBlank: false,//不能为空
     
      18.
      blankText:'密码不能为空！',
     
      19.
      invalidText:'2次密码不相同！',
     
      20.
      validator:vailda//自定义验证函数
     
      21.
      }).applyTo(Ext.get('UserPwd1'))); 
     
      22.
       
      23.
      fm2.add(new Ext.form.TextField({
     
      24.
      allowBlank: false,//不能为空
     
      25.
      blankText:'会员名称不能为空！'
     
      26.
      }).applyTo('CustomerName'));

ExtJS能对表单进行非常灵活的验证，上面是将表单的字段绑定起来，同时添加了相应的验证，并且也支持自定义函数验证，以下是对比2个输入框密码是否相同的自定义函数

      01.
      /**
     
      02.
      * 验证密码是否相同
     
      03.
      */
     
      04.
      function vailda()
     
      05.
      {
     
      06.
      if(Ext.get('UserPwd').dom.value==Ext.get('UserPwd1').dom.value)
     
      07.
      return true;
     
      08.
      else
     
      09.
      return false;  
     
      10.
      }

如果想让效果更好，还要在绑定代码里加多一句

1. Ext.QuickTips.init();

加入此代码后，表单验证的错误消息会在鼠标放到相应字段时显示出来

三、表单提交：
先将提交按钮进行注册，然后再对此按钮进行操作

      01.
      //注册按钮
     
      02.
      Ext.get('regform').un("submit", fm2.onSubmit, fm2);
     
      03.
      var regButton = new Ext.Button('regbutton', {
     
      04.
      text: ' 注 册 ',
     
      05.
      handler: function(){
     
      06.
      if (fm2.isValid()) {
     
      07.
      Ext.Msg.show({
     
      08.
      title:'再确认一下',
     
      09.
      modal : false,
     
      10.
      msg: '您确定资料正确吗?',
     
      11.
      buttons: Ext.Msg.OKCANCEL,
     
      12.
      fn:  function(btn, text){
     
      13.
      if (btn == 'ok'){
     
      14.
      fm2.submit({
     
      15.
      url: 'Register.htm',
     
      16.
      params: {
     
      17.
      oper: 'submit'
     
      18.
      },
     
      19.
      msgethod: 'POST',
     
      20.
      waitMsg:'正在提交,请稍等'
     
      21.
      });
     
      22.
      }
     
      23.
      },
     
      24.
      animEl: 'regbutton'
     
      25.
      }).getDialog().moveTo(200, 100);
     
      26.
      } else {
     
      27.
      Ext.Msg.show({
     
      28.
      title:'信息',
     
      29.
      msg: '请填写完整后再提交!',
     
      30.
      modal : false,
     
      31.
      buttons: Ext.Msg.OK
     
      32.
      }).getDialog().moveTo(200, 100);
     
      33.
      }
     
      34.
      }
     
      35.
      });
     
      36.
      fm2.on({
     
      37.
      //提交之前
     
      38.
      beforeaction: function(form, action){
     
      39.
      regButton.disable();
     
      40.
      },
     
      41.
      //提交完成后
     
      42.
      actioncomplete: function(form, action){           
     
      43.
      if(action.type == 'submit'){
     
      44.
      regButton.enable();
     
      45.
      }       
     
      46.
      if(action.result.success){
     
      47.
      Cookies.set('Allcard_userName', Ext.get('CustomerName').dom.value);
     
      48.
      Ext.Msg.show({
     
      49.
      title:'成功',
     
      50.
      msg: '恭喜,您已注册成功!',
     
      51.
      modal : false,
     
      52.
      fn: showResult,
     
      53.
      buttons: Ext.Msg.OK
     
      54.
      }).getDialog().moveTo(200, 100);   
     
      55.
      }
     
      56.
      else{
     
      57.
      Ext.Msg.show({
     
      58.
      title:'错误',
     
      59.
      msg: '抱歉！您注册失败，请联系管理员!',
     
      60.
      modal : false,
     
      61.
      buttons: Ext.Msg.OK
     
      62.
      }).getDialog().moveTo(200, 100);
     
      63.
      }           
     
      64.
      },
     
      65.
      //提交失败后
     
      66.
      actionfailed: function(form, action){
     
      67.
      regButton.enable();
     
      68.
      }
     
      69.
      });