logo

iMAG移动应用开发指南

Validation

表单验证控件,可在表单提交之前对表单数据进行验证。

标签

标签名 描述 说明 子标签
validation 表单验证标签 validation是form标签的子标签

属性

属性名 取值 描述
inputName 文本 表单项名称
onlyOnSubmit true:表单提交时验证
false:失去焦点时验证,默认值
是否只在表单提交时验证

Presence

非空验证

标签名 描述 说明
presence 非空校验标签 validation的子标签,提示相应表单元素不能为空

属性

属性名 取值 描述
errorMessage 文本 表单项值为空时提示的错误信息

标签示例

● 非空验证

<form>
  <input type="text" name="title"/>
  <input type="submit" value="验证"/>
  <validation inputName="title">
      <presence/>
  </validation>
</form>

● 非空验证自定义提示信息

<form>
  <input type="text" name="title" placeholder="请输入标题"/>
  <input type="submit" value="验证"/>
  <validation inputName="title">
      <presence errorMessage="标题不能为空"/>
  </validation>
</form>

Number

非空验证

标签名 描述 说明
number 数字校验标签 validation的子标签,用于校验表单项的值是否符合规则的数字

属性

属性名 取值 描述
onlyInt true:只能是整数
false:不限制,默认值
限制表单项的值只能是整数
is 数字 表单项的值必须等于该属性值
min 数字 表单项的最小值,表单项的值必须大于等于该属性值
max 数字 表单项的最大值,表单项的值必须小于等于该属性值
errorMessage 文本 表单项的值不是数字时的错误信息
intErrorMessage 文本 表单项的值不是整数时的错误信
isErrorMessage 文本 表单项的值不等于is属性数值时的错误信息
lowErrorMessage 文本 表单项的值小于min属性数值时的错误信息
highErrorMessage 文本 表单项的值大于max属性数值时的错误信息

标签示例

● 数字验证

<form>
  <input type="text" name="number" placeholder="请输入数字"/>
  <input type="submit" value="验证"/>
  <validation inputName="number">
      <presence/>
      <number/>
  </validation>
</form>

● 数字验证(只能为整数)

<form>
  <input type="text" name="number" placeholder="请输入整数"/>
  <input type="submit" value="验证"/>
  <validation inputName="number">
      <presence/>
      <number onlyInt="true"/>
  </validation>
</form>

● 数字验证(只能为特定数字)

<form>
  <input type="number" name="number" placeholder="请输入50"/>
  <input type="submit" value="验证"/>
  <validation inputName="number">
      <presence/>
      <number is="50"/>
  </validation>
</form>

● 数字验证(限制范围)

<form>
  <input type="number" name="number" placeholder="请输入10到100之间的整数"/>
  <input type="submit" value="验证"/>
  <validation inputName="number">
      <presence/>
      <number onlyInt="true" min="10" max="100"/>
  </validation>
</form>

Length

长度验证标签

标签名 描述 说明
length 长度校验标签 validation的子标签,用于校验表单元素值是否是符合给定的长度

属性

属性名 取值 描述
is 数字 表单项的值的长度必须等于该属性值
min 数字 表单项的值的长度必须大于等于该属性值
max 数字 表单项的值的长度必须小于等于该属性值
isErrorMessage 文本 表单项的值的长度不等于is属性数值时的错误信息
lowErrorMessage 文本 表单项的值的长度小于min属性数值时的错误信息
highErrorMessage 文本 表单项的值的长度大于max属性数值时的错误信息

标签示例

● 长度验证(固定长度)

<form>
  <input type="text" name="length" placeholder="请输入5位代码"/>
  <input type="submit" value="验证"/>
  <validation inputName="length">
      <presence/>
      <length is="5"/>
  </validation>
</form>

● 长度验证(限制长度范围)

<form>
  <input type="text" name="length" placeholder="请输入3到6位的代码"/>
  <input type="submit" value="验证"/>
  <validation inputName="length">
      <presence/>
      <length min="3" max="6"/>
  </validation>
</form>

Email

邮件地址验证

标签名 描述 说明
email 邮件地址验证标签 validation的子标签,对指定的表单项进行邮件地址格式验证

属性

属性名 取值 描述
errorMessage 文本 表单项的值邮件地址格式错误信息

标签示例

● 邮件地址验证

<form>
  <input type="email" name="email" placeholder="请输入邮件地址"/>
  <input type="submit" value="验证"/>
  <validation inputName="email">
      <presence/>
      <email errorMessage="邮件地址格式错误"/>
  </validation>
</form>

Format

正则表达式验证

标签名 描述 说明
format 正则验证标签 validation的子标签,对指定表单项进行正则验证

属性

属性名 取值 描述
pattern 正则表达式 正则表达式文本
errorMessage 文本 表单项的值邮件地址格式错误信息

标签示例

● 正则表达式验证

<form>
  <input type="text" name="format" placeholder="请输入数字"/>
  <input type="submit" value="验证"/>
  <validation inputName="format">
      <presence/>
      <format pattern="\d+" errorMessage="格式必须是数字"/>
  </validation>
</form>

Confirmation

匹配验证

标签名 描述 说明
confirmation 匹配验证标签 validation的子标签,用于校验表单项的值是否等于另一个给定的表单项的值,可用于确认密码的验证

属性

属性名 取值 描述
match 文本 要匹配的表单元素name属性值
errorMessage 文本 匹配验证错误信息

标签示例

● 密码匹配验证

<form>
    <list type="group">
        <item style="col-width:80,*">
            <col>
               <row><label>匹配验证</label></row>
            </col>
            <col>
               <row><input type="text" name="password" placeholder="请输入密码"/></row>
               <row><input type="text" name="checkPassword" placeholder="请输入确认密码"/></row>
               <row><input type="submit" value="验证"/></row>
            </col>
       </item>
    </list>
    <validation inputName="password">
        <presence/>
        <confirmation match="checkPassword" errorMessage="确认密码不匹配"/>
    </validation>
</form>

Inclusion

包含验证

标签名 描述 说明
inclusion 包含验证标签 validation的子标签,用于验证表单项的值是否在给定的列表中

属性

属性名 取值 描述
within 文本,列表项用”,”分隔 字符串列表
caseSensitive true:区分,默认值
false:不区分
字符串比较时是否区分大小写
errorMessage 文本 表单项的值和列表项不匹配时的错误信息

标签示例

● 包含验证

<form>
  <input type="text" name="inclusion" placeholder="请输入企业代码"/>
  <input type="submit" value="验证"/>
  <validation inputName="inclusion">
      <presence/>
      <inclusion within="fingersoft,androtimes,finalist" errorMessage="企业代码只能是fingersoft,androtimes或finalist"/>
  </validation>
</form>

Exclusion

不包含验证

标签名 描述 说明
exclusion 不包含验证标签 validation的子标签,用于验证表单项的值是否不在给定的列表中

属性

属性名 取值 描述
within 文本,列表项用”,”分隔 字符串列表
caseSensitive true:区分,默认值
false:不区分
字符串比较时是否区分大小写
errorMessage 文本 表单项的值和列表项匹配时的错误信息

标签示例

● 包含验证

<form>
  <input type="text" name="exclusion" placeholder="请输入企业代码"/>
  <input type="submit" value="验证"/>
  <validation inputName="exclusion">
      <presence/>
      <exclusion within="fingersoft,finalist,androtimes" errorMessage="企业代码不能是fingersoft,finalist或androtimes"/>
  </validation>
</form>

Exclusion

不包含验证

标签名 描述 说明
exclusion 不包含验证标签 validation的子标签,用于验证表单项的值是否不在给定的列表中

属性

属性名 取值 描述
within 文本,列表项用”,”分隔 字符串列表
caseSensitive true:区分,默认值
false:不区分
字符串比较时是否区分大小写
errorMessage 文本 表单项的值和列表项匹配时的错误信息

标签示例

● 包含验证

<form>
  <input type="text" name="exclusion" placeholder="请输入企业代码"/>
  <input type="submit" value="验证"/>
  <validation inputName="exclusion">
      <presence/>
      <exclusion within="fingersoft,finalist,androtimes" errorMessage="企业代码不能是fingersoft,finalist或androtimes"/>
  </validation>
</form>

Acceptance

选中验证

标签名 描述 说明
acceptance 不包含验证标签 validation的子标签,用于校验checkbox必须被选中

属性

属性名 取值 描述
errorMessage 文本 checkbox没有选中时的错误信息

标签示例

● 包含验证

<form>
   <checkbox name="remmember" value="true">记住密码</checkbox>
   <input type="submit" value="验证"/>
   <validation inputName="remmember">
       <acceptance errorMessage="请选择记住密码"/>
   </validation>
</form>

● 表单验证方法(validate)

<?xml version="1.0" encoding="utf-8"?>
<imag>
    <script>
    <![CDATA[
        function submitForm() {
            var form = $('form');
            if (form.validate()) {
                form.submit(function() {
                    hint('提交成功');
                    $page.close(-1);
                }, function() {
                    hint('提交失败!');
                });
            }
        }
    ]]>
    </script> 
    <page>
       <title>
            <center>
                <label>表单验证方法(validate)</label>
            </center>
        </title>
        <content draggable="true">
            <form id="form" action="http://www.imagapp.com/download/data/form_submit_ret.jsp" progress="提交表单|正在提交表单,请稍后...">
                <list type="group">
                    <item style="col-width:60,*">
                        <col>
                           <row><label>用户名</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="text" name="username" value=""/>
                           </row>
                        </col>
                    </item>
                    <item style="col-width:60,*">
                        <col>
                           <row><label>密码</label></row>
                        </col>
                        <col>
                           <row>
                               <input type="password" name="password" value=""/>
                           </row>
                        </col>
                    </item>
                    <item>
                        <row><button onclick="submitForm();" style="width:100;align:center">提交</button></row>
                    </item>
                </list>
                <validation inputName="username">
                    <presence errorMessage="用户名不能为空" />
                </validation>
                <validation inputName="password">
                    <presence errorMessage="密码不能为空" />
                </validation>
            </form>
        </content>
    </page>
</imag>

调用form.validte()方法校验表单,validate()会使用validation标签定义的规则来进行校验。

示例下载

点此下载validation相关的示例代码:imag-validation.zip