按钮上添加 verify="true", 即该按钮支持验证动作, 会验证 form 表单所有带验证属性的控件, 如果验证不通过, 则提示 alt 的消息框, 并阻止 form 表单提交
使用说明:
1 非空验证
<input name=""type="text"nullable="false"/>
2 字符长度验证
- <input name=""type="text"lenlimit="5"/>(最长 5 个字符)
- <input name=""type="text"lenlimit="5-10"/>(最少 5 个字符, 最多 10 个字符)
3 数值区间验证
- <input name=""type="text"numlimit="5"/>(数值不得大于 5)
- <input name=""type="text"numlimit="5-10"/>(数值介于 5-10 之间)
指定某个录入控件为设定值
<p> 产品价格:
<input name="prise" type="text" value="10" datatype="uint"/>
元 </p>
<p > 最低优惠:
- <input name="min" type="text" value="12"
- datatype="uint" numlimit="{prise}"/>(优惠价不可以超过产品价格)
- </p>
<p> 最大优惠:
- <input name="max" type="text"
- numlimit="{min}-{prise}"/>(最大优惠大于最低优惠, 但不可以超过产品价格)
- </p>
4 输入是否相同
- <input name="pw1" type="text"/>
- <input name="pw2" type="text" sametarget="pw1"/>(与 name="pw1" 的控件录入相同)
5 不等于某值
- <select name="select" id="select" novalue="|1|2" alt="请选择专科或以上学历">
- <option value="">-- 请选择 --</option>
- <option value="5">硕士</option>
- <option value="4">本科</option>
- <option value="3">专科</option>
- <option value="2">中学</option>
- <option value="1">小学</option>
- </select>
6 数据类型验证
<input name="tm" type="text" datatype="uint"/> 设置 datatype="uint", 要求录入正整数
可以验证的数据类型包括: chinese 中文 user 账户 uint 正整数 number 数字 float 浮点数 tel 电话 mobile 移动电话 zip 邮编 email 电子邮箱 idcard 身份证 qq 号 url 网址
满足任一条件 (即或运算):datatype="tel|mobile", 只要是电话(固话或手机号) 都通过验证
满足全部条件(即和运算):datatype="uint&zip", 既是数字, 且是邮编
7 文件类型限制
<input name=""type="file"fileallow="jpg|png"/>, 只允许上传 jpg 与 png 图片
<input name=""type="file"filelimit="exe|com|bat|js"/>, 禁止上传可执行文件
8 首尾字符验证
- <input name=""type="text"begin="http|https"/>(必须是网址)
- <input name=""type="text"end="@qq.com"/>(必须是 qq 邮箱)
9 正则表达式验证
<input name=""type="text"regex="\d+"/>(全部为数字)
默认为表达式增加 ^ 前缀和 $ 后缀, 也就是说, 默认是要求全字匹配
10 分组验证
如下, 按钮与录入控件的 group 的值一致, 当点击按钮时, 即实现验证
- <input type="text" datatype="email" nullable="false" group="a"/>
- <input type="submit" name="button" class="button" value="验证表单" verify="true" group="a" />
分组可以交叉验证, 如
<p > 电话:
- <input type="text" datatype="mobile|tel" nullable="false" group="a|c">(同时属于 a 组和 c 组)
- </p>
- <p>
邮箱:<input type="text" datatype="email" nullable="false" group="b|c" />(同时属于 b 组和 c 组)
- </p>
- <input type="submit" name="button" class="button" value="验证 A 组和 B 组" verify="true" group="a|b"/>
- <input type="submit" name="button" class="button" value="验证 B 组和 C 组" verify="true" group="b|c"/>
11 验证方式
默认的验证方式是点击按钮后按顺序逐个验证所在 form 表单内的所有控件, 如果验证全部通过则触发 form 的 submit 事件, 不通过则中断
在实际工作中, 用户希望录入后即验证, 即控件失去焦点后立即进行验证, 不必统一提交时验证
可以通过设置 form 表单的 patter 属性为 focus(默认为 submit), 即焦点模式
12 提示信息样式设置
提示信息显示在右侧,<input name=""type="text"nullable="false"place="right"/>
设置提示信息的前景色 (字体颜色) 与背景色,<input type="text" datatype="email" nullable="false"bgcolor="#33f" fgcolor="#FF9"/>
速查表
来源: https://www.cnblogs.com/2hill/p/8550270.html