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
Methods
- _logic.bytelen static
- _logic.datatype.bankcard static
- _logic.datatype.bytetext static
- _logic.datatype.cnname static
- _logic.datatype.d static
- _logic.datatype.daterange static
- _logic.datatype.domain static
- _logic.datatype.email static
- _logic.datatype.idnumber static
- _logic.datatype.length static
- _logic.datatype.minute static
- _logic.datatype.mobile static
- _logic.datatype.mobilecode static
- _logic.datatype.mobilephone static
- _logic.datatype.mobilephoneall static
- _logic.datatype.mobilezonecode static
- _logic.datatype.n static
- _logic.datatype.nrange static
- _logic.datatype.phone static
- _logic.datatype.phoneall static
- _logic.datatype.phonecode static
- _logic.datatype.phoneext static
- _logic.datatype.phonezone static
- _logic.datatype.reg static
- _logic.datatype.reqmsg static
- _logic.datatype.richtext static
- _logic.datatype.stricdomain static
- _logic.datatype.text static
- _logic.datatype.time static
- _logic.datatype.url static
- _logic.datatype.username static
- _logic.datatype.vcode static
- _logic.datatype.zipcode static
- _logic.error static
- _logic.getDatatype static
- _logic.getElement static
- _logic.getMsg static
- _logic.getSubdatatype static
- _logic.getTimestamp static
- _logic.isValidItem static
- _logic.parse static
- _logic.subdatatype.alternative static
- _logic.subdatatype.reconfirm static
- _logic.valid static
- check static
- checkAll static
- clearError static
- formHasValue static
- setError static
- setValid static
Properties
- _logic static
- _logic.datatype static
- _logic.subdatatype static
- autoTrim static
- errorAbort static
Methods
_logic.datatype.bankcard
-
_item
检查银行卡号码
格式为 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
检查中文姓名
格式: 汉字和大小写字母
规则: 长度 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
检查是否为合法的日期,
日期格式为 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
检查两个输入框的日期
日期格式为 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~!
检查域名
Parameters:
-
_item!~YUIDOC_LINE~!
Selector
_logic.datatype.email
-
_item
检查电子邮件
Parameters:
-
_item
Selector
Example:
<div class="f-l">
<input type="TEXT" name="company_email" datatype="email" reqmsg="邮箱" errmsg="请填写正确的邮箱">
</div>
_logic.datatype.idnumber
-
_item
检查身份证号码
目前只使用最简单的位数判断~ 有待完善
Parameters:
-
_item
Selector
Example:
<div class="f-l">
<input type="TEXT" name="company_idnumber"
datatype="idnumber" errmsg="请填写正确的身份证号码">
</div>
_logic.datatype.length
-
_item
检查内容的长度
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
检查时间格式, 格式为 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
检查手机号码
这个方法是 _logic.datatype.mobilecode 的别名
Parameters:
-
_item
Selector -
_noError
Bool
_logic.datatype.mobilecode
-
_item
-
_noError
检查手机号码
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
检查手机号码/电话号码
这个方法是原有方法的混合验证 _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
检查手机号码/电话号码, 泛匹配
这个方法是原有方法的混合验证 _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
检查手机号码加强方法
格式: [+国家代码] [零]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
检查是否为正确的数字
默认范围 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
检查两个输入框的数值
数字格式为 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
检查电话号码
格式: [区号]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
检查电话号码
格式: [+国家代码][ ][电话区号][ ]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
检查电话号码
格式: 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
检查电话分机号码
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
检查电话区号
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
自定义正则校验
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
检查内容是否为空,
如果声明了该属性, 那么 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~!
检查域名
Parameters:
-
_item!~YUIDOC_LINE~!
Selector
_logic.datatype.text
()
private
static
检查文本长度
_logic.datatype.time
-
_item
检查时间格式, 格式为 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
检查URL
Parameters:
-
_item
Selector
Example:
<div class="f-l">
<input type="TEXT" name="company_url" datatype="url" errmsg="请填写正确的网址">
</div>
_logic.datatype.username
-
_item
检查注册用户名
格式: 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
检查验证码
格式: 为 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
检查邮政编码
Parameters:
-
_item
Selector
Example:
<div class="f-l">
<input type="TEXT" name="company_zipcode" datatype="zipcode" errmsg="请填写正确的邮编">
</div>
_logic.error
-
_item
-
_msgAttr
-
_fullMsg
显示错误的视觉效果
Parameters:
-
_item
Selector -
_msgAttr
String- 显示指定需要读取的错误信息属性名, 默认为 reqmsg, errmsg, 通过该属性可以指定别的属性名
-
_fullMsg
Bool- 显示指定错误信息为属性的值, 而不是自动添加的 请上传/选择/填写
_logic.getDatatype
-
_item
获取 _item 的检查类型, 所有可用的检查类型位于 _logic.datatype 对象
Parameters:
-
_item
Selector
_logic.getElement
-
_selector
获取 _selector 对象
这个方法的存在是为了向后兼容qwrap, qwrap DOM参数都为ID
Parameters:
-
_selector
Selector
_logic.getMsg
-
_item
-
_msgAttr
-
_fullMsg
获取对应的错误信息, 默认的错误信息有 reqmsg, errmsg,
注意: 错误信息第一个字符如果为空格的话, 将完全使用用户定义的错误信息, 将不会动态添加 请上传/选择/填写
Parameters:
-
_item
Selector -
_msgAttr
String- 显示指定需要读取的错误信息属性名, 默认为 reqmsg, errmsg, 通过该属性可以指定别的属性名
-
_fullMsg
Bool- 显示指定错误信息为属性的值, 而不是自动添加的 请上传/选择/填写
_logic.getSubdatatype
-
_item
获取 _item 的检查子类型, 所有可用的检查子类型位于 _logic.subdatatype 对象
Parameters:
-
_item
Selector
_logic.getTimestamp
-
_date_str
获取日期字符串的 timestamp, 字符串格式为 YYYY[^\d]?MM[^\d]?DD
Parameters:
-
_date_str
String
_logic.isValidItem
-
_item
检查 _item 是否为 Valid 的检查对象
Parameters:
-
_item
Selector
_logic.parse
-
_item
分析_item是否附合规则要求
Parameters:
-
_item
Selector
_logic.subdatatype.alternative
-
_item
此类型检查 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
此类型检查 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
显示正确的视觉效果
Parameters:
-
_item
Selector -
_tm
Int
check
-
_item
验证一个表单项, 如 文本框, 下拉框, 复选框, 单选框, 文本域, 隐藏域
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;
}
clearError
-
_selector
清除Valid生成的错误样式
Parameters:
-
_selector
Form | Input | Textarea | Select | File | Password- 需要清除错误的选择器
Example:
UXC.Valid.clearError( 'form' );
UXC.Valid.clearError( 'input.some' );
formHasValue
-
_fm
-
_ignoreSelector
检查一个表单是否有内容
Parameters:
-
_fm
Selector -
_ignoreSelector
Selector
Returns:
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
把一个表单项的状态设为错误状态
Parameters:
-
_item
Selector -
_msgAttr
String- 显示指定需要读取的错误信息属性名, 默认为 reqmsg, errmsg, 通过该属性可以指定别的属性名
-
_fullMsg
Bool- 显示指定错误信息为属性的值, 而不是自动添加的 请上传/选择/填写
setValid
-
_item
-
_tm
把一个表单项的状态设为正确状态
Parameters:
-
_item
Selector -
_tm
Int延时 _tm 毫秒显示处理结果, 默认=150
Properties
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;
});