ExtJs表单验证的方法总结

女爷i 2021-09-10 07:08 371阅读 0赞

一、基本验证方式，使用vtype属性。

1.alpha只能输入字母，无法输入其他（如数字，特殊符号等）

2.alphanum只能输入字母和数字，无法输入其他

3.email验证，要求的格式是596005496@qq.com

4.url格式验证，要求的格式是http://www.baidu.com

二、其他方式验证。

1.验证最大最小输入字数。（Ext中maxLength和minLength不太管用！）

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style="">
      1 
    </div> 
    <div style="">
      2 
    </div> 
    <div style="">
      3 
    </div> 
    <div style="">
      4 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style="">maxLength&nbsp;:&nbsp;20,</code> 
      <code style="">//允许输入的最大字符数</code> 
     </div> 
     <div style=""> 
      <code style="">maxLengthText&nbsp;:&nbsp;</code> 
      <code style="">"用户帐号最大长度不能超过20个字符！"</code> 
      <code style="">,</code> 
      <code style="">//提示文本</code> 
     </div> 
     <div style=""> 
      <code style="">minLength&nbsp;:&nbsp;3,&nbsp;</code> 
      <code style="">//允许输入的最少字符数</code> 
     </div> 
     <div style=""> 
      <code style="">minLengthText&nbsp;:&nbsp;</code> 
      <code style="">"用户帐号最小长度不能少于3个字符！"</code> 
      <code style="">,</code> 
      <code style="">//提示文本</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

注意：中文字符不是两个字符，比如“你好”算2个字符。

2.正则表达式验证。

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style="">
      1 
    </div> 
    <div style="">
      2 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style="">regex&nbsp;:&nbsp;/^(([0-9]+[a-zA-Z]+)|([a-zA-Z]+[0-9]+))$/,</code> 
     </div> 
     <div style=""> 
      <code style="">regexText&nbsp;:&nbsp;</code> 
      <code style="">"对不起，用户帐号只能输入字母和数字！"</code> 
      <code style="">,</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

三、vtype实现高级验证。

因为Extjs的vtype只实现了四种基本的验证方式，所有需要自己去创建新的验证方式。

在表单初始化时后面加入代码

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style="">
      1 
    </div> 
    <div style="">
      2 
    </div> 
    <div style="">
      3 
    </div> 
    <div style="">
      4 
    </div> 
    <div style="">
      5 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style="">Ext.apply(Ext.form.VTypes,&nbsp;{ </code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">verifycustomer&nbsp;:&nbsp;</code> 
      <code style="">function</code> 
      <code style="">(value)&nbsp;{ </code> 
      <code style="">//验证方法名</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">//验证方法</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">}</code> 
     </div> 
     <div style=""> 
      <code style="">});</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

设置控件的vtype属性为自定义的验证方法名和提示文本vtypeText属性。

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style="">
      1 
    </div> 
    <div style="">
      2 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style="">vtype&nbsp;:&nbsp;</code> 
      <code style="">"verifycustomer"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">vtypeText&nbsp;:&nbsp;</code> 
      <code style="">"对不起，客户账号已经存在！"</code> 
      <code style="">,</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>

例如：

最后只要使用vtype : 'numCheck'即可。

实例：

<table style=""> 
 <tbody style=""> 
  <tr style=""> 
   <td style=""> 
    <div style="">
      1 
    </div> 
    <div style="">
      2 
    </div> 
    <div style="">
      3 
    </div> 
    <div style="">
      4 
    </div> 
    <div style="">
      5 
    </div> 
    <div style="">
      6 
    </div> 
    <div style="">
      7 
    </div> 
    <div style="">
      8 
    </div> 
    <div style="">
      9 
    </div> 
    <div style="">
      10 
    </div> 
    <div style="">
      11 
    </div> 
    <div style="">
      12 
    </div> 
    <div style="">
      13 
    </div> 
    <div style="">
      14 
    </div> 
    <div style="">
      15 
    </div> 
    <div style="">
      16 
    </div> 
    <div style="">
      17 
    </div> 
    <div style="">
      18 
    </div> 
    <div style="">
      19 
    </div> 
    <div style="">
      20 
    </div> 
    <div style="">
      21 
    </div> 
    <div style="">
      22 
    </div> 
    <div style="">
      23 
    </div> 
    <div style="">
      24 
    </div> 
    <div style="">
      25 
    </div> 
    <div style="">
      26 
    </div> 
    <div style="">
      27 
    </div> 
    <div style="">
      28 
    </div> 
    <div style="">
      29 
    </div> 
    <div style="">
      30 
    </div> 
    <div style="">
      31 
    </div> 
    <div style="">
      32 
    </div> 
    <div style="">
      33 
    </div> 
    <div style="">
      34 
    </div> 
    <div style="">
      35 
    </div> 
    <div style="">
      36 
    </div> 
    <div style="">
      37 
    </div> 
    <div style="">
      38 
    </div> 
    <div style="">
      39 
    </div> 
    <div style="">
      40 
    </div> 
    <div style="">
      41 
    </div> 
    <div style="">
      42 
    </div> 
    <div style="">
      43 
    </div> 
    <div style="">
      44 
    </div> 
    <div style="">
      45 
    </div> 
    <div style="">
      46 
    </div> 
    <div style="">
      47 
    </div> 
    <div style="">
      48 
    </div> 
    <div style="">
      49 
    </div> 
    <div style="">
      50 
    </div> 
    <div style="">
      51 
    </div> 
    <div style="">
      52 
    </div> 
    <div style="">
      53 
    </div> 
    <div style="">
      54 
    </div> 
    <div style="">
      55 
    </div> 
    <div style="">
      56 
    </div> 
    <div style="">
      57 
    </div> 
    <div style="">
      58 
    </div> 
    <div style="">
      59 
    </div> 
    <div style="">
      60 
    </div> 
    <div style="">
      61 
    </div> 
    <div style="">
      62 
    </div> 
    <div style="">
      63 
    </div> 
    <div style="">
      64 
    </div> 
    <div style="">
      65 
    </div> 
    <div style="">
      66 
    </div> 
    <div style="">
      67 
    </div> 
    <div style="">
      68 
    </div> 
    <div style="">
      69 
    </div> 
    <div style="">
      70 
    </div> 
    <div style="">
      71 
    </div> 
    <div style="">
      72 
    </div> 
    <div style="">
      73 
    </div> 
    <div style="">
      74 
    </div> 
    <div style="">
      75 
    </div> 
    <div style="">
      76 
    </div> 
    <div style="">
      77 
    </div> 
    <div style="">
      78 
    </div> 
    <div style="">
      79 
    </div> </td> 
   <td style=""> 
    <div style=""> 
     <div style=""> 
      <code style="">&lt;!DOCTYPE&nbsp;HTML&nbsp;PUBLIC&nbsp;</code> 
      <code style="">"-//W3C//DTD&nbsp;HTML&nbsp;4.01&nbsp;Transitional//EN"</code> 
      <code style="">&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&lt;html&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;</code> 
      <code style="">&lt;head&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">&lt;title&gt;validate.html&lt;/title&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">&lt;meta&nbsp;http-equiv=</code> 
      <code style="">"keywords"</code>&nbsp; 
      <code style="">content=</code> 
      <code style="">"keyword1,keyword2,keyword3"</code> 
      <code style="">&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">&lt;meta&nbsp;http-equiv=</code> 
      <code style="">"description"</code>&nbsp; 
      <code style="">content=</code> 
      <code style="">"this&nbsp;is&nbsp;my&nbsp;page"</code> 
      <code style="">&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">&lt;meta&nbsp;http-equiv=</code> 
      <code style="">"content-type"</code>&nbsp; 
      <code style="">content=</code> 
      <code style="">"text/html;&nbsp;charset=UTF-8"</code> 
      <code style="">&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">&lt;link&nbsp;rel=</code> 
      <code style="">"stylesheet"</code>&nbsp; 
      <code style="">type=</code> 
      <code style="">"text/css"</code>&nbsp; 
      <code style="">href=</code> 
      <code style="">"../ext/resources/css/ext-all.css"</code> 
      <code style="">&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">&lt;script&nbsp;type=</code> 
      <code style="">"text/javascript"</code>&nbsp; 
      <code style="">src=</code> 
      <code style="">"../ext/adapter/ext/ext-base.js"</code> 
      <code style="">&gt;&lt;/script&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">&lt;script&nbsp;type=</code> 
      <code style="">"text/javascript"</code>&nbsp; 
      <code style="">src=</code> 
      <code style="">"../ext/ext-all.js"</code> 
      <code style="">&gt;&lt;/script&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">&lt;script&nbsp;type=</code> 
      <code style="">"text/javascript"</code> 
      <code style="">&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">Ext.onReady(</code> 
      <code style="">function</code> 
      <code style="">(){ </code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">Ext.QuickTips.init();</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">//&nbsp;非空验证，通过allowBlank:false实现</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">var</code>&nbsp; 
      <code style="">name&nbsp;=&nbsp;</code> 
      <code style="">new</code>&nbsp; 
      <code style="">Ext.form.TextField(</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">{ </code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">name:</code> 
      <code style="">"name"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">fieldLabel:</code> 
      <code style="">"用户名"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">allowBlank:</code> 
      <code style="">false</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">blankText:</code> 
      <code style="">"用户名不能为空！"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">width:300,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">renderTo:document.body</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">}</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">);</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">//&nbsp;长度验证</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">var</code>&nbsp; 
      <code style="">pwd&nbsp;=&nbsp;</code> 
      <code style="">new</code>&nbsp; 
      <code style="">Ext.form.TextField(</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">{ </code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">name:</code> 
      <code style="">"pwd"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">fieldLabel:</code> 
      <code style="">"密码"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">inputType:</code> 
      <code style="">"password"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">minLength:6,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">maxLength:16,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">minLengthText:</code> 
      <code style="">"密码至少6位！"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">maxLengthText:</code> 
      <code style="">"密码最多16位！"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">width:300,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">renderTo:document.body,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">allowBlank:</code> 
      <code style="">false</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">blankText:</code> 
      <code style="">"密码不能为空！"</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">}</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">);</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">//&nbsp;vtype验证。可以验证包含以下：1.字母和下划线(alpha)。2.字母、数字、下划线(alphanum)。3.邮箱(email)。4.网址(url)</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">var</code>&nbsp; 
      <code style="">url&nbsp;=&nbsp;</code> 
      <code style="">new</code>&nbsp; 
      <code style="">Ext.form.TextField(</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">{ </code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">name:</code> 
      <code style="">"url"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">fieldLabel:</code> 
      <code style="">"网址"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">allowBlank:</code> 
      <code style="">false</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">blankText:</code> 
      <code style="">"网址为必输项！"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">vtype:</code> 
      <code style="">"url"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">vtypeText:</code> 
      <code style="">"您的网址输入有误！"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">width:300,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">renderTo:document.body</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">}</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">);</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">//&nbsp;正则表达式验证</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">var</code>&nbsp; 
      <code style="">file&nbsp;=&nbsp;</code> 
      <code style="">new</code>&nbsp; 
      <code style="">Ext.form.TextField(</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">{ </code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">name:</code> 
      <code style="">"name"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">fieldLabel:</code> 
      <code style="">"Name"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">width:300,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">allowBlank:</code> 
      <code style="">false</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">blankText:</code> 
      <code style="">"name字段不能为空！"</code> 
      <code style="">,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">renderTo:document.body,</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">regex:/^w{8,}$/,</code> 
      <code style="">//至少6个字符</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">invalidText:</code> 
      <code style="">"请输入至少8这个字符！"</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">}</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">);</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code> 
      <code style="">});</code> 
     </div> 
     <div style=""> 
      <code style="">&lt;/script&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;</code> 
      <code style="">&lt;/head&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;</code> 
      <code style="">&lt;body&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code>&nbsp; 
     </div> 
     <div style=""> 
      <code style="">&nbsp;&nbsp;</code> 
      <code style="">&lt;/body&gt;</code> 
     </div> 
     <div style=""> 
      <code style="">&lt;/html&gt;</code> 
     </div> 
    </div> </td> 
  </tr> 
 </tbody> 
</table>