验证规则
onvalidation="onPhoneValidation"
//身份证号验证规则
function onIDCardsValidation(e){
var exp = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
if (e.isValid) {
if (!exp.test(e.value)) {
e.errorText = "必须输入15~18位数字";
e.isValid = false;
}
}
}
// 手机号验证规则
function onPhoneValidation(e){
var exp = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
if (e.isValid) {
if (!exp.test(e.value)) {
e.errorText = "请输入正确的手机号";
e.isValid = false;
}
}
}
布局
mini-fit
高度撑满布局控件。它的高度为:父元素高度 - 其他同级元素高度。
<div class="mini-fit">
该div将撑满整个页面的高度
</div>
mini-splitter
分隔容器
<div class="mini-fit">
<!-- 此时下面的两个div将水平分隔 -->
<!-- 但此时splitter内容的宽只是两个div根据自己内容确定的宽度的和 -->
<div class="mini-splitter">
<div size="30%">该div将占据左边30%的宽</div>
<div>该div将占据剩下的70%的宽</div>
</div>
</div>
<div class="mini-fit">
<!-- 设置style,使splitter的内容区域横向和纵向都充满整个父容器 -->
<div class="mini-splitter" style="width: 100%;height: 100%;">
<div size="30%">该div将占据左边30%的宽</div>
<div>该div将占据剩下的70%的宽</div>
</div>
</div>
<div class="mini-fit">
<!-- 设置style,使splitter的内容区域横向和纵向都充满整个父容器 -->
<div class="mini-splitter" style="width: 100%;height: 100%;">
<div size="30%">
<!-- 这里也需要设置style以充满父容器 -->
<div class="mini-panel" title="第一个panel"
style="width: 100%;height: 100%">该panel</div>
</div>
<div>该div将占据剩下的70%的宽</div>
</div>
</div>
<div class="mini-fit">
<!-- 设置style,使splitter的内容区域横向和纵向都充满整个父容器 -->
<div class="mini-splitter" style="width: 100%;height: 100%;">
<div size="30%">
<!-- 如果需要纵向分隔,可以设置vertical="true" -->
<!-- 默认情况下还是根据内容来计算宽高 -->
<div class="mini-splitter" vertical="true" >
<div size="50%">
<!-- 这里也需要设置style以充满父容器 -->
<div class="mini-panel" title="左边第一个panel"
style="width: 100%;height: 100%">
该panel
</div>
</div>
<div>
<!-- 这里也需要设置style以充满父容器 -->
<div class="mini-panel" title="左边第二个panel"
style="width: 100%;height: 100%">
该panel
</div>
</div>
</div>
</div>
<div>该div将占据剩下的70%的宽</div>
</div>
</div>
<div class="mini-fit">
<!-- 设置style,使splitter的内容区域横向和纵向都充满整个父容器 -->
<div class="mini-splitter" style="width: 100%;height: 100%;">
<div size="30%">
<!-- 设置style以充满父容器 -->
<div class="mini-splitter" vertical="true"
style="width: 100%;height: 100%;">
<div size="50%">
<!-- 这里也需要设置style以充满父容器 -->
<div class="mini-panel" title="左边第一个panel"
style="width: 100%;height: 100%">
该panel
</div>
</div>
<div>
<!-- 这里也需要设置style以充满父容器 -->
<div class="mini-panel" title="左边第二个panel"
style="width: 100%;height: 100%">
该panel
</div>
</div>
</div>
</div>
<div>该div将占据剩下的70%的宽</div>
</div>
</div>