Ext JS数据校验（六）

一、重要性

        用户输入的数据有时候是不可靠的，如果不能对用户输入的数据进行校验和处理，也许开发出来的应用根本无法使用。必须先规定好各项数据该如何填写，如果输入错误 就不能提交到后台。关于这一点，IE和FireFox有些不同。如果校验失败，在Firefox下调用submit()是不会执行提交的，但是，在IE下必须先使用form。isValid()自行判断，如果返回false，就不能再调用submit()，否则仍然会将非法数据提交到后台。

        EXT把验证封装到了表单的控件中。

二、验证方式

（1）输入不能为空

new  Ext.form.TextField（{

    name：‘text’，

    fieldLabel：‘文本框’，

    allowBlank：false

}）;

说明：allowBlank默认是true，也就是说可以不输入数据，将它改成false。如果没有输入任何数据，文本框下就会出现红线。这种提示方式比弹出提示框更好用，也更容易让用户接受。不过，因为allowBlank不是在Ext.form.Field中定义的，所以并不是所有控件都可以使用它。

（2）最大长度和最小长度

new  Ext.form.TextField（{

    fieldLabel：‘文本框’，

    name：‘text’，

    maxLength：10，

    minLength：5

}）；

说明：数据库只允许输入255个字符。当用户输入的数据超出最大长度时就会引起错误。允许输入的最小长度校验刚好相反。

（3）借助vtype

new  Ext.form.TextField（{

    fieldLabel：‘文本框’，    

    name：‘text’，

    vtype：‘email’

}）；

说明：EXT提供了一套默认的校验方案，就是一系列输入规则和错误提示。如果使用他么，就不需要去背诵那一长串正则表达式，只需记住vtype的值，然后配置在控件中即可。需要是哟个概念哪一种验证信息，只需要把vtype设置成对应的值即可，当然也可以自己进行扩展。这些验证信息都定义在Ext.form.VType中，默认情况下，VType一共有4种验证信息：

    1.alpha：只能输入英文字母；

    2.alphanum：只能输入字母和数字；

    3.email：电子邮箱；

    4.url：网址。

（4）自定义校验规则

new  Ext.form.TextField（{

    fieldLabel：‘文本框’，

    name：‘text’

    regex：/^{\u4E00-\u9FA5]+$/，

    regexText：‘只能输入汉字’

}）；

说明：自定义校验规则就是允许自定义正则表达式，可以编写一个regex对输入数据进行校验，无论是何种形式的数据，都能对其进行判断。

（5）NumberField

说明：Ext.form.NumberField是Ext.form.TextField的子类，它本来应该继承上面所讲述的那些验证方式。但是，NumberField却有更特殊的验证方式。

        在NumberField中只能输入数字，这种校验方式是其他控件都没有的。其他控件都是在提交时对已输入的数据进行校验。NumberField却根本不让输入不符合要求的数据：

        1.直接从键盘输入字母和非数字字符：无法输入NumberField；

        2.尝试输入有多个小数点的非法数字字符：NumerField只能限制输入的字符，一旦输入结束，它会自动进行校验。从左侧开始截取，一直保留到合法的数字格式为止；

        3.直接把带有非数字的字符串粘贴到NumberField：粘贴是成功了，但在编辑结束后，NumberField又会对内容进行校验，把非法数据转化成最接近的数字；

》》》数字配置相关：

        1.不想让用户输入负数：将参数allowNegative设置为false，于是用户不能再输入负号，参数的默认值为true；

        2.不想让用户输入小数：将参数allowDecimals设置为false，于是用户不能输入小数点，参数的默认值为true；

        3.设置小数精度：默认情况下是保留到小数点后两位，即百分位。修改参数decimalPrecision的值，决定精确到小数点后多少位；

        4.minValue和maxValue规定可输入数字的范围：这是数字专有的。

转载于:https://my.oschina.net/tobeexpertismydream/blog/2990629