@bravf 2014-06-25T04:00:03.000000Z 字数 6803 阅读 1711

Stars API介绍

javascript

上一篇中，我们介绍了Stars的场景，今天介绍api。

Stars.FormControl

<form id="myForm"></form>
<div id="myForm2" data-stars-type="form"></div>
<button class="submitBtn">提交</button>
<script>
var myFormControl = new Stars.FormControl('#myForm')
var myForm2Control = new Stars.FormControl('#myForm2')
var myFormControl = Stars.control('#myFrom')
var myForm2Control = Stars.control('#myForm2')
$('.submitBtn').on('click', function (){
    if (myFormControl.check()){
        //验证通过
    }
    else {
        //验证没通过
    }
})
</script>

可以通过new一个FormControl对象，也可以通过Stars.control快捷方式，注意如果不是form元素在用快捷方式时候要标记上data-stars-type="form"。

Stars.TextControl

<input type="text" placeholder="请填写5-10个数字(可为空)" id="num"/>
<span id="numTip"></span>
<script>
//对应input的control
var numControl = new Stars.TextControl('#num')
//如果用快捷方式numControl = Stars.control('#num')
//必填规则
var requiredRule = Stars.required()
//可为空规则(就是对必填取非)
var notRequiredRule = new Stars.NotRule(requiredRule)
//或者用快捷方式notRequiredRule = Stars.not(requiredRule)
//数字规则
var numRule = new Stars.RegRule(/^\d+$/, '必须是数字')
//长度规则
var lenRule = new Stars.FuncRule(function (control){
    var len = control.val().length
    return len>=5 && len<=10
}, '长度在5-10之间')
//或者用快捷方式lenRule = Stars.length([5, 11], '长度在5-10之间')
//数字和长度规则要同时满足
var numLenRule = new Stars.AndRule(numRule, lenRule)
//或者用快捷方式numLenRule = Stars.and(numRule, lenRule)
//可为空和（数字和长度规则）只需要满足一个
var emptyOrNumLenRule = new Stars.OrRule(notRequiredRule, numLenRule)
//或者用快捷方式emptyOrNumLenRule = Stars.or(notRequiredRule, numLenRule)
//把规则添加到numControl
numControl.add(emptyOrNumLenRule)
//给numContrl设置提示信息的展示位置
numControl.setTipEle('#numTip')
//把numControl添加到formControl中
myFormControl.add(numControl)
//********************************************
//整个上面如果都用快捷方式写
with(Stars){
    myFormControl.add(
        control('#num').add(
            or(
                not(required()),
                and(
                    rule(/^\d+$/, '必须是数字'),
                    length([5, 11], '长度在5-10之间')
                )
            )
        ).setTipEle('#numTip')
    )
}
</script>

上面例子基本解释了rule相关的基础类和组合类，再复杂的规则也可以自由组合出来，并且伴有针对不同规则有不同的提示。

Stars.RadioControl

<input type="radio" id="isCheck"/>
<script>
new Stars.RadioControl('#isCheck')//或者Stars.control('#isCheck')
</script>

Stars.SelectControl

<select id="mySelect">
    <option value="-1">请选择</option>
    <option value="1">北京</option>
</select>
<script>
new Stars.SelectControl('#mySelect')//或者Stars.control('#mySelect')
</script>

Stars.CheckboxControl

<input type="checkbox" id="myCB"/>
<script>
new Stars.CheckboxControl('myCB')//或者Stars.control('myCB')
</script>

Stars.AndControl && Stars.OrControl

<p class="words">请提交您的退款原因，以便我们改进服务（至少选一项）</p>
<input type="checkbox" class="Qt_checkbox " value="1"/>预约不上
<input type="checkbox" class="Qt_checkbox " value="2"/>计划有变，没时间消费
<input type="checkbox" class="Qt_checkbox reason-other" value="8"/>其它
<textarea class="Qt_textb reason-other-txt" style="display:none"></textarea>
<div class="notice reason-notice" style="display:none"></div>
<script>
var tips = [
'请至少选择一张骆驼券',
'提出您的宝贵意见，1~400个字',
'请至少选择一种退款原因'
]
var $otherReasonTxt = $('.reason-other-txt')
var $reasonList = $('input')
var $other = $('.reason-other')
//至少选一项退款原因
var anyControl = Stars.any($reasonList, tips[2])
//其他原因没选中
var emptyOtherControl = Stars.control($other).add(Stars.not(Stars.required()))
//其他原因选中
var requiredOtherControl = Stars.control($other).add(Stars.required(tips[1]))
//其他原因细节内容长度在1-400
var otherTxtControl = Stars.control($otherReasonTxt).add(Stars.length([1, 401], tips[1]))
//当其他原因选中时候才检测其他原因内容
var andOtherControl = new Stars.AndControl(requiredOtherControl, otherTxtControl)
//或者用快捷方式andOtherControl = Stars.And(requiredOtherControl, otherTxtControl)
//要么其他原因不选中，要么选中
var orOtherControl = new Stars.OrControl(emptyOtherControl, andOtherControl)
//或者用快捷方式orOtherControl = Stars.or(emptyOtherControl, andOtherControl)
//至少选择一个退款原因和"要么其他原因不选中，要么选中"要同时满足
var allControl = Stars.and(anyControl, orOtherControl)
//***********************************
//以上都用快捷方式来表示
with (Stars){
    myform.add(
        //下面两个情况要同时满足
        and(
            //至少选一个
            any($reasonList, tips[2]),
            //下面规则至少满足一个
            or(
                //$other没选中
                control($other).add(not(required())),
                //下面两个情况要同时满足
                and(
                    //$other选中
                    control($other).add(required(tips[1])),
                    //$otherReasonTxt内容长度在1-400，length前闭后开
                    control($otherReasonTxt).add(length([1, 401], tips[1]))
                )
            )
        //设置提示的位置
        ).setTipEle('.reason-notice')
    )
}
</script>

上面例子基本描述了control相关的基础类和组合类，用来解决表单元素和元素之间有联动的时候如何描述之间的关系。

Stars.IORule

new Stars.IORule('/hello.php?name=', function (control, data){
    return data.status
}, '用户名已经存在')

重点说下IORule，它一般指的是ajax验证，由于是异步验证，而其他rule都是同步验证，导致模型不一，很难处理，一开始在IORule的check方法中会返回一个Promise对象，然后在集合中对Promise对象单独处理，而其他都是简单处理一个bool值，从而导致Stars系统内部实现很混乱。所以在比较长的时间内我去掉了对IORule的支持，于是系统内部变的比较简单可靠，因为都是同步，但终究算不上完美。

后来终于想明白可以通过转化为状态机来变异步为同步，实际上很简单，就是在IORule记录一个自己当前的验证状态status，在check方法中只要返回status即可，ajax执行完毕后修改状态再强制对应的control做一次整体check，问题就解决了，变成了同步check，系统就无需对IORule做任何妥协。下面是一个例子：

<input type="checkbox" id="isNum"/>是否注册编号
<input type="text" id="num" placeholder="5位数字编号"/>
<span id="numTip"></span>
<script>
function numIOCheck(control, data){
    return data.status
}
with (Stars){
    css.controlError = 'error'
    var numControl = control('#num').add(
        rule(/^\d+$/, '必须是数字'),
        length([5, 6], '长度必须是5'),
        rule('http://localhost/gitcafe/Stars/io.json?x=', numIOCheck, '编号已经存在')
    )
    or(
        control('#isNum').add(not(required())),
        and(
            control('#isNum').add(required()),
            numControl
        )
    ).setTipEle('#numTip')
}
</script>

Stars.RegRule

new Stars.RegRule(/\d+/, 'msg')

Stars.FuncRule

new Stars.FuncRule(function (control){
    //control参数为funcRule所属control对象
}, 'msg')

Stars.NotRule

var rule = new Stars.RegRule(/\d+/, 'msg')
var notRule = new Stars.NotRule(rule)//NotRule对一个rule的check结果取反

Stars.AndRule

new Stars.AndRule(rule1, rule2)//rule1和rule2要同时满足

Stars.OrRule

new Stars.OrRule(rule1, rule2)//rule1和rule2满足一个即可

Stars.rule

//根据参数生成不同的rule对象
Stars.rule(/\d+/, 'msg')
Stars.rule(function(){}, 'msg')

Stars.not

//Stars.NotRule的快捷方式
Stars.not(rule1) == new Stars.NotRule(rule1)

Stars.control

//根据参数不同生成不同的control，主要根据元素的tag类型
Stars.control('#form') == new Stars.FormContorl('#form')
Stars.control('#input') == new Stars.TextControl('#input')
Stars.control('#select') == new Stars.SelectContrl('#select')
.....

Stars.and

//Stars.AndRule或者Stars.AndControl的快捷方式，根据参数动态判断是rule还是control
Stars.and(rule1, rule2) == new Stars.AndRule(rule1, rule2)
Stars.and(control1, control2) == new Stars.AndControl(control1, control2)

Stars.or

//Stars.OrRule或者Stars.OrControl的快捷方式，根据参数动态判断是rule还是control
Stars.or(rule1, rule2) == new Stars.OrRule(rule1, rule2)
Stars.or(control1, control2) == new Stars.OrControl(control1, control2)

Stars.required

//属于Stars.FuncRule的一个实例，用来验证是否为空。如果被验证的control为TextControl则判断内容长度是否大于0，如果为checkbox或者radio则判断是否选中，如果为select则判断value是否为-1。
var rule1 = Stars.required('不能为空')
control1.add(rule1)

Stars.length

//属于Stars.FuncRule的一个实例，用来验证长度。
var rule1 = Stars.length([1,5], '长度在1-4')//区间前闭后开
var rule2 = Stars.length([1], '长度大于1')
var rule3 = Stars.length([,5]， ‘长度小于5’)

Stars.any

//属于Stars.OrControl的一个实例，用来针对radio、checkbox组，至少选一个
Stars.any($radioList)

在这里你可以了解他的全部 Stars

有问题可以随时咨询我
qq: 765621103
email: bravfing@126.com