Stingray验证机制

Filter

系统中的验证使用的是Filter库来完成，利用Filter配置几个属性和参数就实现了表单验证，简化了工作。基本原理很简单，在onload之后按照属性查找元素，然后绑定相应的change/blur事件，当表单数据发生变动的时候就会触发验证函数。

Filter示例

日期格式的例子：

<!--下面这些必不可少
filter="DATE" dtype="" param="" 
class="hasDatepicker" 
-->
<div class="component EditorText" ref="EditorText" filter="DATE" param dtype>
    <SPAN class="notRequired hasDatepicker">Date Scanned</SPAN>
    <INPUT id="Scaned_Date1" name="Scaned_Date1">
</div>

<!--整型-->
<div style="left:0px;top:5px;" class="component EditorText" ref="EditorText" filter="INTEGER" dtype="" param="">
    <SPAN style="FONT-SIZE: 1em; CURSOR: text" class=notRequired>xxx</SPAN>
    <INPUT style="width:250px" id="xxxxxxxxxxxxxx" title="Please click here to enter the inspection date." tabindex="0" name="xxxxxxxxxxxxxx" maxLength=50>
</div>
<!--金额-->
<div style="left:0px;top:5px;" class="component EditorText" ref="EditorText" filter="MONEY" dtype="" param="">
    <SPAN style="FONT-SIZE: 1em; CURSOR: text" class=notRequired>xxx</SPAN>
    <INPUT style="width:250px" id="xxxxxxxxxxxxxx" title="Please click here to enter the inspection date." tabindex="0" name="xxxxxxxxxxxxxx" maxLength=50>
</div>
<!--email-->
<div style="left:0px;top:5px;" class="component EditorText" ref="EditorText" filter="EMAIL" dtype="" param="">
    <SPAN style="FONT-SIZE: 1em; CURSOR: text" class=notRequired>xxxx</SPAN>
    <INPUT style="width:250px" id="xxxxxxxxxxxxxx" title="Please click here to enter the inspection date." tabindex="0" name="xxxxxxxxxxxxxx" maxLength=50>
</div>

手动触发验证

Validator.Filters.GREATERTHANEQUALS.filter(credit_debit, "FLOAT", 0);

所有的Filter列表

DATE
EMAIL
EMAILS
EQUAL
FEIN
FLOAT
INTEGER
MONEY
PASSWORD
PHONE
SSN
STATE
TIME
ZIPCODE
GREATERTHAN
GREATERTHANEQUALS
LESSTHAN
LESSTHANEQUALS
CUSTOMEXPRESSION 
CUSTOMFUNCTION

带参数多Filter的配置

<div class="component EditorText" ref="EditorText" style="" filter="DATE|GREATERTHANEQUALS|LESSTHANEQUALS" dtype="|DATE|DATE" param="|01/01/1900|01/01/2100">
    <span class="hasDatepicker required" style="">Effective Date</span>
    <input id="PQ_EffectiveDate" name="PQ_EffectiveDate" maxlength="10" class="hasDatepicker" style="width: 150px;" tabindex="0" title="" type="text" value="10/14/2014">
</div>

filter="INTEGER" param="" dtype="INTEGER" 
filter="MONEY" param="" dtype="" 
filter="DATE" param="" dtype="" 
filter="DATE|GREATERTHANEQUALS" dtype="|DATE" param="|01/01/1900" 
filter="DATE|GREATERTHANEQUALS|LESSTHANEQUALS" dtype="|DATE|DATE" param="|01/01/1900|01/01/2100" 
filter="STATE" param="" dtype="" 
filter="INTEGER|GREATERTHAN" param="|0" dtype="|INTEGER" 
filter="FLOAT|GREATERTHAN" param="|0" dtype="|FLOAT"
filter="PHONE" param="" dtype=""
filter="LESSTHANEQUALS|GREATERTHANEQUALS" param="999999|1000" dtype="FLOAT|FLOAT" 

正则式实现验证

如何使用正则式实现验证参考这篇文章：JavaScript正则式入门

posted @ 2017-02-28 09:36 by Mark