API Docs for: 0.1
Show:

UXC.Valid Class

表单验证
全局访问请使用 UXC.Valid 或 Valid

requires: jQuery

UXC Project Site | API docs | demo link

Form 的可用 html attribute

errorabort = bool
查检Form Control时, 如果发生错误是否继续检查下一个
default = true

Form Control的可用 html attribute

reqmsg = 错误提示
值不能为空
errmsg = 错误提示
格式错误, 但不验证为空的值
emel = selector
显示错误的selector
minlength = int(最小长度)
验证内容的最小长度, 但不验证为空的值
maxlength = int(最大长度)
验证内容的最大长度, 但不验证为空的值
minvalue = [number|ISO date](最小值)
验证内容的最小值, 但不验证为空的值
maxvalue = [number|ISO date](最大值)
验证内容的最大值, 但不验证为空的值
ignoreprocess = bool
验证表单时, 是否忽略
default = false
datatype: 常用数据类型
n: 检查是否为正确的数字
n-i.f: 检查数字格式是否附件要求, i[整数位数], f[浮点数位数], n-7.2 = 0.00 ~ 9999999.99
nrange: 检查两个control的数值范围
html attr fromNEl: 指定开始的 control
html attr toNEl: 指定结束的 control
如果不指定 fromNEl, toNEl, 默认是从父节点下面找到 nrange, 按顺序定为 fromNEl, toNEl
d: 检查是否为正确的日期, YYYYMMDD, YYYY/MM/DD, YYYY-MM-DD, YYYY.MM.DD
daterange: 检查两个control的日期范围
html attr fromNEl: 指定开始的 control
html attr toNEl: 指定结束的 control
如果不指定 fromNEl, toNEl, 默认是从父节点下面找到 nrange, 按顺序定为 fromNEl, toNEl
time: 是否为正确的时间, hh:mm:ss
minute: 是否为正确的时间, hh:mm
bankcard: 是否为正确的银行卡
格式为 d{19} | d{16} | 1111 1111 1111 1111 111 | 1111 1111 1111 1111111
cnname: 中文姓名
格式: 汉字和大小写字母
规则: 长度 2-32个字节, 非 ASCII 算2个字节
username: 注册用户名
格式: a-zA-Z0-9_-
规则: 首字母必须为 [a-zA-Z0-9], 长度 2 - 30
idnumber: 身份证号码, 15~18 位
mobilecode: 手机号码, 11位, (13|14|15|16|18|19)[\d]{9}
mobile: mobilecode 的别名
mobilezonecode: 带 国家代码的手机号码, [+国家代码] [零]11位数字
phonecode: 电话号码, 7~8 位数字, [1-9][0-9]{6,7}
phone: 带区号的电话号码, [区号][空格|空白|-]7~8位电话号码
phoneall: 带国家代码, 区号, 分机号的电话号码, [+国家代码][区号][空格|空白|-]7~8位电话号码#1~6位
phonezone: 电话区号, 3~4位数字
phoneext: 电话分机号, 1~6位数字
mobilephone: mobilecode | phone
mobilephoneall: mobilezonecode | phoneall
reg: 自定义正则校验, /正则规则/[igm]
vcode: 验证码, 0-9a-zA-Z, 长度 默认为4
可通过 vcode-[\d], 指定验证码长度
text: 显示声明检查的内容为文本类型
默认就是 text, 没有特殊原因其实不用显示声明
bytetext: 声明按字节检查文本长度
ASCII 算一个字符, 非 ASCII 算两个字符
url: URL 格式, ftp, http, https
domain: 匹配域名, 宽松模式, 允许匹配 http(s), 且结尾允许匹配反斜扛(/)
stricdomain: 匹配域名, 严格模式, 不允许匹配 http(s), 且结尾不允许匹配反斜扛(/)
email: 电子邮件
zipcode: 邮政编码, 0~6位数字
subdatatype: 特殊数据类型
alternative: N 个 Control 必须至少有一个非空的值
datatarget: 显式指定同一组 control, 默认在父级下查找[subdatatype=alternative]
alternativemsg: N 选一的错误提示
reconfirm: N 个 Control 的值必须保持一致
datatarget: 显式指定同一组 control, 默认在父级下查找[subdatatype=reconfirm]
reconfirmmsg: 值不一致时的错误提示

Item Index

Properties

Methods

_logic.bytelen

(
  • _s
)
private static

计算字符串的字节长度, 非 ASCII 0-255的字符视为两个字节

Parameters:

_logic.datatype.bankcard

(
  • _item
)
private static

检查银行卡号码
格式为 d{19} | d{16} | 1111 1111 1111 1111 111 | 1111 1111 1111 1111111

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_idnumber" 
                           datatype="idnumber" errmsg="请填写正确的身份证号码">
                   </div>

_logic.datatype.bytetext

() private static

检查文本的字节长度

_logic.datatype.cnname

(
  • _item
)
private static

检查中文姓名
格式: 汉字和大小写字母
规则: 长度 2-32个字节, 非 ASCII 算2个字节

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_cnname" 
                           datatype="cnname" reqmsg="姓名" errmsg="请填写正确的姓名">
                   </div>

_logic.datatype.d

(
  • _item
)
private static

检查是否为合法的日期,
日期格式为 YYYYMMDD, YYYY/MM/DD, YYYY-MM-DD, YYYY.MM.DD

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_d" errmsg="请填写正确的日期范围2013-05-01 - 2013-05-31" datatype="daterange" minvalue="2013-05-01" maxvalue="2013-05-31" >
                   </div>

_logic.datatype.daterange

(
  • _item
)
private static

检查两个输入框的日期
日期格式为 YYYYMMDD, YYYY/MM/DD, YYYY-MM-DD, YYYY.MM.DD
注意: 如果不显示指定 fromDateEl, toDateEl, 将会从父级查找 datatype=datarange属性的input, 如果数量等于2, 则会进行验证, 不等2将忽略

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_daterange" errmsg="请填写正确的日期范围,并且起始日期不能大于结束日期" id="start_date" 
                           datatype="daterange" toDateEl="end_date" emEl="date-err-em" >
                       - <input type="TEXT" name="company_daterange" errmsg="请填写正确的日期范围,并且起始日期不能大于结束日期" id="end_date" 
                           datatype="daterange" fromDateEl="start_date" emEl="date-err-em" >
                       <br /><em id="date-err-em"></em>
                   </div>

_logic.datatype.domain

(
  • _item!~YUIDOC_LINE~!
)
private static

检查域名

Parameters:

  • _item!~YUIDOC_LINE~! Selector

_logic.datatype.email

(
  • _item
)
private static

检查电子邮件

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_email" datatype="email" reqmsg="邮箱" errmsg="请填写正确的邮箱">
                   </div>

_logic.datatype.idnumber

(
  • _item
)
private static

检查身份证号码
目前只使用最简单的位数判断~ 有待完善

Parameters:

  • _item Selector

Example:

               <div class="f-l">
                   <input type="TEXT" name="company_idnumber" 
                       datatype="idnumber" errmsg="请填写正确的身份证号码">
               </div>

_logic.datatype.length

(
  • _item
)
private static

检查内容的长度

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_name" minlength="2" maxlength="120" reqmsg="公司名称" errmsg="请检查格式,长度2-120" /> <em>公司名称描述</em>
                   </div>

_logic.datatype.minute

(
  • _item
)
private static

检查时间格式, 格式为 hh:mm

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_time" errmsg="正确的时间, 格式为 hh:mm" datatype="minute" >
                   </div>

_logic.datatype.mobile

(
  • _item
  • _noError
)
private static

检查手机号码
这个方法是 _logic.datatype.mobilecode 的别名

Parameters:

  • _item Selector
  • _noError Bool

_logic.datatype.mobilecode

(
  • _item
  • _noError
)
private static

检查手机号码

Parameters:

  • _item Selector
  • _noError Bool

Example:

               <div class="f-l">
                   <input type="TEXT" name="company_mobile" 
                       datatype="mobilecode" subdatatype="alternative" datatarget="input[name=company_phonecode]" alternativemsg=" "
                       errmsg="请填写正确的手机号码">
               </div>

_logic.datatype.mobilephone

(
  • _item
)
private static

检查手机号码/电话号码
这个方法是原有方法的混合验证 _logic.datatype.mobilecode + _logic.datatype.phone

Parameters:

  • _item Selector

Example:

                   <div class="f-l label">
                       <label>(datatype mobilephone, phone + mobilecode)手机号码或电话号码:</label>
                   </div>
                   <div class="f-l">
                       <input type="text" name="company_mobilephone" 
                           datatype="mobilephone"
                           errmsg="请填写正确的手机/电话号码">
                   </div>

_logic.datatype.mobilephoneall

(
  • _item
)
private static

检查手机号码/电话号码, 泛匹配
这个方法是原有方法的混合验证 _logic.datatype.mobilezonecode + _logic.datatype.phoneall

Parameters:

  • _item Selector

Example:

                   <div class="f-l label">
                       <label>(datatype mobilephoneall, phoneall + mobilezonecode)手机号码或电话号码:</label>
                   </div>
                   <div class="f-l">
                       <input type="text" name="company_mobilephoneall" 
                           datatype="mobilephoneall"
                           errmsg="请填写正确的手机/电话号码">
                   </div>

_logic.datatype.mobilezonecode

(
  • _item
  • _noError
)
private static

检查手机号码加强方法
格式: [+国家代码] [零]11位数字

Parameters:

  • _item Selector
  • _noError Bool

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_mobilezone" 
                           datatype="mobilezonecode" 
                           errmsg="请填写正确的手机号码">
                   </div>

_logic.datatype.n

(
  • _item
)
private static

检查是否为正确的数字

默认范围 0 - Math.pow(10, 10)

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_n" errmsg="请填写正确的正整数" datatype="n" >
                   </div>
                   <div class="f-l">
                       <input type="TEXT" name="company_n1" errmsg="请填写正确的数字, 范围1-100" datatype="n" minvalue="1", maxvalue="100" >
                   </div>
                   <div class="f-l">
                       <input type="TEXT" name="company_n2" errmsg="请填写正确的数字" datatype="n-7.2" >
                   </div>

_logic.datatype.nrange

(
  • _item
)
private static

检查两个输入框的数值
数字格式为 0-pow(10,10)
带小数点使用 nrange-int.float, 例: nrange-1.2 nrange-2.2
注意: 如果不显示指定 fromNEl, toNEl, 将会从父级查找 datatype=nrange属性的input, 如果数量等于2, 则会进行验证, 不等2将忽略

Parameters:

  • _item Selector

Example:

               <div class="f-l label">
                   <label>(datatype nrange)正数:<br/><b style="color:red">注意: 这个是大小颠倒位置的nrange</b></label>
                   大<input type="text" name="company_n10" id="company_n10" fromNEl="company_n11"
                       errmsg="请填写正确的数值范围" datatype="nrange" emEl="nrange_n1011" >
                   - 小<input type="text" name="company_n11" id="company_n11" toNEl="company_n10"
                       errmsg="请填写正确的数值范围" datatype="nrange" emEl="nrange_n1011" >
                   <em id="nrange_n1011"></em>
               </div>

_logic.datatype.phone

(
  • _item
  • _noError
)
private static

检查电话号码
格式: [区号]7/8位电话号码

Parameters:

  • _item Selector
  • _noError Bool

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_phone" 
                           datatype="phone" 
                           errmsg="请填写正确的电话号码">
                   </div>

_logic.datatype.phoneall

(
  • _item
  • _noError
)
private static

检查电话号码
格式: [+国家代码][ ][电话区号][ ]7/8位电话号码[#分机号]

Parameters:

  • _item Selector
  • _noError Bool

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_mobilezone" 
                           datatype="phoneall" 
                           errmsg="请填写正确的电话号码">
                   </div>

_logic.datatype.phonecode

(
  • _item
)
private static

检查电话号码
格式: 7/8位数字

Parameters:

  • _item Selector

Example:

                   <div>
                       <input type='TEXT' name='company_phonecode' style="width:80px;" value='' size="8" 
                           datatype="phonecode" errmsg="请检查电话号码格式" emEl="#phone-err-em" />
                   </div>

_logic.datatype.phoneext

(
  • _item
)
private static

检查电话分机号码

Parameters:

  • _item Selector

Example:

                   <div>
                       <input type='TEXT' name='company_phoneext' style="width:40px;" value='' size="4" 
                           datatype="phoneext" emEl="#phone-err-em" errmsg="请填写正确的分机号" />
                   </div>

_logic.datatype.phonezone

(
  • _item
)
private static

检查电话区号

Parameters:

  • _item Selector

Example:

                   <div>
                       <input type='TEXT' name='company_phonezone' style="width:40px;" value='' size="4" 
                           datatype="phonezone" emEl="#phone-err-em" errmsg="请填写正确的电话区号" />
                   </div>

_logic.datatype.reg

(
  • _item
)
private static

自定义正则校验

Parameters:

  • _item Selector

Example:

                       <div><input type="TEXT" name="company_addr" datatype="reg" reg-pattern="/^[\s\S]{2,120}$/i" errmsg="请填写正确的地址"></div>
                       <div><input type="TEXT" name="company_addr" datatype="reg-/^[\s\S]{2,120}$/i" errmsg="请填写正确的地址"></div>

_logic.datatype.reqmsg

(
  • _item
)
private static

检查内容是否为空,
如果声明了该属性, 那么 value 须不为空

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_name" reqmsg="公司名称" /> <em>公司名称描述</em>
                   </div>

_logic.datatype.richtext

() private static

检查富文本的字节
TODO: 完成富文本长度检查

_logic.datatype.stricdomain

(
  • _item!~YUIDOC_LINE~!
)
private static

检查域名

Parameters:

  • _item!~YUIDOC_LINE~! Selector

_logic.datatype.text

() private static

检查文本长度

_logic.datatype.time

(
  • _item
)
private static

检查时间格式, 格式为 hh:mm:ss

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_time" errmsg="正确的时间, 格式为 hh:mm:ss" datatype="time" >
                   </div>

_logic.datatype.url

(
  • _item
)
private static

检查URL

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_url" datatype="url" errmsg="请填写正确的网址">
                   </div>

_logic.datatype.username

(
  • _item
)
private static

检查注册用户名
格式: a-zA-Z0-9_-
规则: 首字母必须为 [a-zA-Z0-9], 长度 2 - 30

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_username" 
                           datatype="username" reqmsg="用户名" errmsg="请填写正确的用户名">
                   </div>

_logic.datatype.vcode

(
  • _item
)
private static

检查验证码
格式: 为 0-9a-zA-Z, 长度 默认为4

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_vcode" style="width: 40px;"
                           datatype="vcode" reqmsg="验证码" errmsg="请填写正确的验证码">
                   </div>
                   <div class="f-l">
                       <input type="TEXT" name="company_vcode" style="width: 40px;"
                           datatype="vcode-5" errmsg="请填写正确的验证码">
                   </div>

_logic.datatype.zipcode

(
  • _item
)
private static

检查邮政编码

Parameters:

  • _item Selector

Example:

                   <div class="f-l">
                       <input type="TEXT" name="company_zipcode" datatype="zipcode" errmsg="请填写正确的邮编">
                   </div>

_logic.error

(
  • _item
  • _msgAttr
  • _fullMsg
)
private static

显示错误的视觉效果

Parameters:

  • _item Selector
  • _msgAttr String
    • 显示指定需要读取的错误信息属性名, 默认为 reqmsg, errmsg, 通过该属性可以指定别的属性名
  • _fullMsg Bool
    • 显示指定错误信息为属性的值, 而不是自动添加的 请上传/选择/填写

_logic.getDatatype

(
  • _item
)
private static

获取 _item 的检查类型, 所有可用的检查类型位于 _logic.datatype 对象

Parameters:

  • _item Selector

_logic.getElement

(
  • _selector
)
private static

获取 _selector 对象
这个方法的存在是为了向后兼容qwrap, qwrap DOM参数都为ID

Parameters:

  • _selector Selector

_logic.getMsg

(
  • _item
  • _msgAttr
  • _fullMsg
)
private static

获取对应的错误信息, 默认的错误信息有 reqmsg, errmsg,
注意: 错误信息第一个字符如果为空格的话, 将完全使用用户定义的错误信息, 将不会动态添加 请上传/选择/填写

Parameters:

  • _item Selector
  • _msgAttr String
    • 显示指定需要读取的错误信息属性名, 默认为 reqmsg, errmsg, 通过该属性可以指定别的属性名
  • _fullMsg Bool
    • 显示指定错误信息为属性的值, 而不是自动添加的 请上传/选择/填写

_logic.getSubdatatype

(
  • _item
)
private static

获取 _item 的检查子类型, 所有可用的检查子类型位于 _logic.subdatatype 对象

Parameters:

  • _item Selector

_logic.getTimestamp

(
  • _date_str
)
private static

获取日期字符串的 timestamp, 字符串格式为 YYYY[^\d]?MM[^\d]?DD

Parameters:

_logic.isValidItem

(
  • _item
)
private static

检查 _item 是否为 Valid 的检查对象

Parameters:

  • _item Selector

_logic.parse

(
  • _item
)
private static

分析_item是否附合规则要求

Parameters:

  • _item Selector

_logic.subdatatype.alternative

(
  • _item
)
private static

此类型检查 2|N个对象必须至少有一个是有输入内容的,
常用于 手机/电话 二填一

Parameters:

  • _item Selector

Example:

                   <dd>
                   <div class="f-l label">
                       <label>(datatype phonezone, phonecode, phoneext)电话号码:</label>
                   </div>
                   <div class="f-l">
                       <input type='TEXT' name='company_phonezone' style="width:40px;" value='' size="4" 
                           datatype="phonezone" emEl="#phone-err-em" errmsg="请填写正确的电话区号" />
                       - <input type='TEXT' name='company_phonecode' style="width:80px;" value='' size="8" 
                           datatype="phonecode" subdatatype="alternative" datatarget="input[name=company_mobile]" alternativemsg="电话号码和手机号码至少填写一个"
                           errmsg="请检查电话号码格式" emEl="#phone-err-em" />
                       - <input type='TEXT' name='company_phoneext' style="width:40px;" value='' size="4" 
                           datatype="phoneext" emEl="#phone-err-em" errmsg="请填写正确的分机号" />
                       <em id="phone-err-em"></em>
                   </div>
                   </dd>
                   <dd>
                   <div class="f-l label">
                       <label>(datatype mobilecode)手机号码:</label>
                   </div>
                   <div class="f-l">
                       <input type="TEXT" name="company_mobile" 
                           datatype="mobilecode" subdatatype="alternative" datatarget="input[name=company_phonecode]" alternativemsg=" "
                           errmsg="请填写正确的手机号码">
                   </div>
                   </dd>

_logic.subdatatype.reconfirm

(
  • _item
)
private static

此类型检查 2|N 个对象填写的值必须一致 常用于注意时密码验证/重置密码

Parameters:

  • _item Selector

Example:

                   <dd>
                   <div class="f-l label">
                       <label>(datatype text, subdatatype reconfirm)用户密码:</label>
                   </div>
                   <div class="f-l">
                       <input type="PASSWORD" name="company_pwd" 
                       datatype="text" subdatatype="reconfirm" datatarget="input[name=company_repwd]" reconfirmmsg="用户密码和确认密码不一致"
                       minlength="6" maxlength="15" reqmsg="用户密码" errmsg="请填写正确的用户密码">
                   </div>
                   </dd>
                   <dd>
                   <div class="f-l label">
                       <label>(datatype text, subdatatype reconfirm)确认密码:</label>
                   </div>
                   <div class="f-l">
                       <input type="PASSWORD" name="company_repwd" 
                       datatype="text" subdatatype="reconfirm" datatarget="input[name=company_pwd]" reconfirmmsg="确认密码和用户密码不一致"
                       minlength="6" maxlength="15" reqmsg="确认密码" errmsg="请填写正确的确认密码">
                   </div>
                   </dd>

_logic.valid

(
  • _item
  • _tm
)
private static

显示正确的视觉效果

Parameters:

  • _item Selector
  • _tm Int

check

(
  • _item
)
Boolean static

验证一个表单项, 如 文本框, 下拉框, 复选框, 单选框, 文本域, 隐藏域

Parameters:

  • _item Selector
    • 需要验证规则正确与否的表单/表单项

Returns:

Example:

     UXC.Valid.check( $('input.needValid') );
     UXC.Valid.check( document.getElementById('inputNeedValid') );
     if( !UXC.Valid.check( $('form') ) ){
         _evt.preventDefault();
         return false;
     }

checkAll

(
  • _item
)
static

这个方法是 Valid.check 的别名

Parameters:

  • _item Selector
    • 需要验证规则正确与否的表单/表单项

clearError

(
  • _selector
)
static

清除Valid生成的错误样式

Parameters:

  • _selector Form | Input | Textarea | Select | File | Password
    • 需要清除错误的选择器

Example:

     UXC.Valid.clearError( 'form' );
     UXC.Valid.clearError( 'input.some' );

formHasValue

(
  • _fm
  • _ignoreSelector
)
static

检查一个表单是否有内容

Parameters:

  • _fm Selector
  • _ignoreSelector Selector

Returns:

bool

Example:

            $('form.js-valid').on('submit', function( $evt ){
               var _p = $(this);
               if( !UXC.Valid.formHasValue( _p ) ){
                   $evt.preventDefault();
                   UXC.alert( '表单内容为空, 不能提交!', _p.find('button[type=submit]'), 1 );
                   return false;
               }
               if( !UXC.Valid.check( _p ) ){
                   $evt.preventDefault();
                   return false;
               }
           });

setError

(
  • _item
  • _msgAttr
  • _fullMsg
)
static

把一个表单项的状态设为错误状态

Parameters:

  • _item Selector
  • _msgAttr String
    • 显示指定需要读取的错误信息属性名, 默认为 reqmsg, errmsg, 通过该属性可以指定别的属性名
  • _fullMsg Bool
    • 显示指定错误信息为属性的值, 而不是自动添加的 请上传/选择/填写

setValid

(
  • _item
  • _tm
)
static

把一个表单项的状态设为正确状态

Parameters:

  • _item Selector
  • _tm Int

    延时 _tm 毫秒显示处理结果, 默认=150

Properties

_logic

Object private static

私有逻辑处理对象, 验证所需的所有规则和方法都存放于此对象

_logic.datatype

Object private static

此对象存储可供检查的类型

_logic.subdatatype

Object private static

此对象存储可供检查的子类型

autoTrim

Bool static

是否自动清除两边的空格

Default: true

Example:

           $(document).ready( function($evt){
               UXC.Valid.autoTrim = false;
           });

errorAbort

Bool static

验证发生错误时, 是否终止继续验证
为真终止继续验证, 为假将验证表单的所有项, 默认为 false

Default: false

Example:

           $(document).ready( function($evt){
               UXC.Valid.errorAbort = true;
           });