Valid 验证提示

使用方法

表单验证HTML结构通常有两种做法:

  • 1、 在ax-form-input后使用ax-valid显示验证结果,配合颜色和图标表示不同的验证提示。
  • 2、 在ax-form-con后使用ax-form-txt显示验证结果,配合颜色和图标表示不同的验证提示。
姓名:
填写完成
姓名:
请正确填写用户名
姓名:
比如:李四
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                <div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-f"></span> 填写完成</div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                </div>
                                <div class="ax-form-txt ax-color-danger"><span class="ax-iconfont ax-icon-close-o-f"></span> 请正确填写用户名</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" type="text"></div>
                                <div class="ax-valid ax-color-ignore">比如:李四</div>
                                </div>
                                </div>
                                </div>
                            

加强

给输入控件添加ax-check-primaryax-check-danger等样式可与下方验证提示配合加强显示效果。

姓名:
填写完成
姓名:
请正确填写用户名
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="李文" class="ax-check-primary" type="text"></div>
                                <div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-f"></span> 填写完成</div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="张勋" class="ax-check-danger" type="text"></div>
                                <div class="ax-valid ax-color-danger"><span class="ax-iconfont ax-icon-close-o-f"></span> 请正确填写用户名</div>
                                </div>
                                </div>
                                </div>
                            

组合

可与表单基础控件配合使用,举一反三。

姓名:
填写完成
从列表选填
姓名:
请正确填写用户名
不超过4个字
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="李文" class="ax-check-primary" type="text"></div>
                                <div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-f"></span> 填写完成</div>
                                </div>
                                <a href="###" class="ax-form-btn ax-btn ax-primary">从列表选填</a>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="张勋" class="ax-check-danger" type="text"></div>
                                <div class="ax-valid ax-color-danger"><span class="ax-iconfont ax-icon-close-o-f"></span> 请正确填写用户名</div>
                                </div>
                                <span class="ax-form-txt ax-color-ignore">不超过4个字</span>
                                </div>
                                </div>
                            

五种验证

本框架一共设置了5种彩色验证提示,表示不同的意义,用户可按需选择使用。

完成:
填写完成
错误:
请正确填写用户名
成功:
填写正确
警告:
注意消息
信息:
信息通知
广告:
广告疑问
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">完成:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="李文" class="ax-check-primary" type="text"></div>
                                <div class="ax-valid ax-color-primary"><span class="ax-iconfont ax-icon-check-o-f"></span> 填写完成</div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">错误:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="张勋" class="ax-check-danger" type="text"></div>
                                <div class="ax-valid ax-color-danger"><span class="ax-iconfont ax-icon-close-o-f"></span> 请正确填写用户名</div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">成功:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="侯正宇" class="ax-check-success" type="text"></div>
                                <div class="ax-valid ax-color-success"><span class="ax-iconfont ax-icon-check-o-f"></span> 填写正确</div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">警告:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="方国胜" class="ax-check-warning" type="text"></div>
                                <div class="ax-valid ax-color-warning"><span class="ax-iconfont ax-icon-alert-f"></span>注意消息</div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">信息:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="魏强" class="ax-check-info" type="text"></div>
                                <div class="ax-valid ax-color-info"><span class="ax-iconfont ax-icon-question-o"></span> 信息通知</div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">广告:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="username" placeholder="输入登录名称" value="魏强" class="ax-check-ad" type="text"></div>
                                <div class="ax-valid ax-color-ad"><span class="ax-iconfont ax-icon-question-o"></span> 广告疑问</div>
                                </div>
                                </div>
                                </div>
                            

插件表单验证

删除了validatejs第三方验证库,重新编写axValid插件,给ax.js瘦身的同时更方便使用,更适合axui风格。

axValid具有如下特点:

  • 1、支持国内常用的格式校验,比如邮箱、IP地址、车牌号、手机号等
  • 2、支持字符类型校验,比如判断是否为纯中文、纯英文、数字等
  • 3、支持日期格式校验,包括早于日期、晚于日期、日期区间校验
  • 4、支持数字格式校验,包括是否为数字、大于、小于和等于校验
  • 5、支持字符长度校验,包括多余、少于和等于校验
  • 6、支持包含与否校验,包括在内校验和在外校验
  • 7、支持字符串强度校验,包括字符类型数量、长度要求等
  • 8、支持异步校验,以POST方式传递数据
  • 9、支持选择数量校验,仅针对多值字段,比如checkbox、radio、select-multiple和file
  • 10、支持对比相同校验,比如用于重复输入密码校验
  • 11、支持传统form表单提交,监听submit事件
  • 12、支持点击提交表单校验,通常为点击非submit按钮来提交表单校验
  • 13、支持onInit、onTrigger和onChange回调函数,onInit将在每次校验后执行;onTrigger将在事件触发后执行;onChange将在verified值发生变化后执行
  • 14、监听change事件,verified值发生变化后执行;与onChange方法效果相同
  • 15、支持二次校验,即blur、input或change触发校验,提交表单监听表单提交事件时再次校验
  • 16、可通过extend参数追加校验规格
  • 17、支持将校验结果存放在页面任意地方

使用方法

使用表单验证需要两个前提条件:

  • 1、input有name属性,没有name属性的表单运行验证无实际意义,所以规定没有name属性值将不会运行验证
  • 2、需要至少使用一种验证类型,即使用type参数,比如:type:'required'

插件运行方式有两种:

  • ax*属性:对有input标签使用axValid属性即可按默认参数运行插件。
  • js实例:通过new axValid('#ID')方式创建实例运行。
账号(data属性):
必填
账号(js实例):
必填
  •                                             <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">账号(data属性):</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="apple" placeholder="输入账号" type="text" axValid='type:"required"'></div>
                                                </div>
                                                <div class="ax-form-txt ax-color-ignore">必填</div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break-md"></div>
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">账号(js实例):</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="banana" placeholder="输入账号" type="text" id="jsValid"></div>
                                                </div>
                                                <div class="ax-form-txt ax-color-ignore">必填</div>
                                                </div>
                                                </div>
                                            
  •                                             new axValid('#jsValid',{
                                                type:'required'
                                                });
                                            

必填校验

使用参数type表示验证类型,required表示必填校验,这是最基本校验,如果type填写多个校验类型,那么required都会自动排在第一位校验。

required:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">required:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="required" placeholder="请输入..." type="text" axValid='type:"required"'></div>
                                </div>
                                </div>
                                </div>
                            

常见格式校验

在我们日常生活中会遇到许多固定格式,本插件集成了部分格式校验。

  • email校验:中间必须有“@”字符,而且在其之后需要有“.”
  • telephone手机号校验:必须是11位,必须以“1”开头
  • landline座机校验:座机号以“-”分为两段,第一段必须是3或4位数字,第二段必须7或8位数字;第一段可以省略
  • ip地址校验:以“.”分为4段,
  • plate车牌号校验:第1位汉字,第2位字母,3-6位字母或数字,最后一位可为汉字;支持8位新能源汽车号牌校验
  • idCard身份证号校验:支持中国18位身份证号校验
  • zip邮编校验:支持中国各地6位邮编校验
  • url域名校验:支持https和http域名校验
email:
telephone:
landline:
ip:
plate:
idCard:
zip:
url:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">email:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="email" placeholder="请输入..." type="text" axValid='type:"email"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">telephone:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="telephone" placeholder="请输入..." type="text" axValid='type:"telephone"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">landline:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="landline" placeholder="请输入..." type="text" axValid='type:"landline"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">ip:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="ip" placeholder="请输入..." type="text" axValid='type:"ip"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">plate:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="plate" placeholder="请输入..." type="text" axValid='type:"plate"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">idCard:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="idCard" placeholder="请输入..." type="text" axValid='type:"idCard"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">zip:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="zip" placeholder="请输入..." type="text" axValid='type:"zip"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">url:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="url" placeholder="请输入..." type="text" axValid='type:"url"'></div>
                                </div>
                                </div>
                                </div>
                            

字符类型校验

在录入数据的时候通常要求比如录入某一类数据,因此需要对其格式进行严格校验。

  • chinese纯中文校验:必须填写中文
  • letter纯字母校验:必须填写大小写英文
  • string纯字符串校验:可以填写大小写英文和数字
  • password密码校验:可以填大小写英文、数字和特殊字符
  • date日期校验:可以填写2022、2022-5、2022-5-12、2022-5-12 12:23:54五种格式(2022/5、2022/5/12、2022/5/12 12:23:54也支持)
  • number数字校验:可以是正数、负数、整数和小数
chinese:
letter:
string:
password:
date:
number:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">chinese:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="chinese" placeholder="请输入..." type="text" axValid='type:"chinese"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">letter:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="letter" placeholder="请输入..." type="text" axValid='type:"letter"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">string:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="string" placeholder="请输入..." type="text" axValid='type:"string"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">password:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="password" placeholder="请输入..." type="text" axValid='type:"password"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">date:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="date" placeholder="请输入..." type="text" axValid='type:"date"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">number:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="number" placeholder="请输入..." type="text" axValid='type:"number"'></div>
                                </div>
                                </div>
                                </div>
                            

日期校验

日期是相对复杂的数据格式,本插件已经集成了如下日期校验:

  • ymdhms年月日时分秒校验:必须是2022-5-12 12:23:54或2022/5/12 12:23:54格式
  • ymd年月日校验:必须是2022-5-12或2022/5/12
  • ym年月校验:必须是2022-5或2022/5
  • y年份校验:必须是2022或2022四位数字
  • m月份校验:必须是1~12数字
  • d日校验:必须是1~31数字
  • earlier早于校验:与options.date比较,要求日期要在options.date之前
  • later晚于校验:与options.date比较,要求日期要在options.date之后
  • dateRange日期区间校验:与options.earliestoptions.latest比较,要求在两者之间
ymdhms:
ymd:
ym:
y:
m:
d:
earlier:
要求在2022-12之前
later:
要求在2022-12之后
dateRange:
要求在2022-12-1~2022-12-20区间
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">ymdhms:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="ymdhms" placeholder="请输入..." type="text" axValid='type:"ymdhms"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">ymd:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="ymd" placeholder="请输入..." type="text" axValid='type:"ymd"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">ym:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="ym" placeholder="请输入..." type="text" axValid='type:"ym"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">y:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="y" placeholder="请输入..." type="text" axValid='type:"y"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">m:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="m" placeholder="请输入..." type="text" axValid='type:"m"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">d:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="d" placeholder="请输入..." type="text" axValid='type:"d"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">earlier:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="earlier" placeholder="请输入..." type="text" axValid='type:"earlier",date:"2022-12-1"'></div>
                                </div>
                                <div class="ax-form-txt">要求在2022-12之前</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">later:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="later" placeholder="请输入..." type="text" axValid='type:"later",date:"2022-12-1"'></div>
                                </div>
                                <div class="ax-form-txt">要求在2022-12之后</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">dateRange:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="dateRange" placeholder="请输入..." type="text" axValid='type:"dateRange",earliest:"2022-12-1",latest:"2022-12-20"'></div>
                                </div>
                                <div class="ax-form-txt">要求在2022-12-1~2022-12-20区间</div>
                                </div>
                                </div>
                            

数字校验

数字是表单中常见的字段类型,本插件已经集成了如下数字校验:

  • integer非0开头整数校验:只能填写非0开头的正整数
  • moreThan大于校验:与options.number参数进行比较,要求大于该参数
  • moreEqual大于等于校验:与options.number参数进行比较,要求大于或等于该参数
  • lessThan小于校验:与options.number参数进行比较,要求小于该参数
  • lessEqual小于等于校验:与options.number参数进行比较,要求小于或等于该参数
  • equal等于校验:与options.number参数进行比较,要求等于该参数
  • range数字范围校验:与options.minoptions.max参数进行比较,要求大于等于min并小于max
integer:
moreThan:
要求大于80
moreEqual:
要求大于等于80
lessThan:
要求小于80
lessEqual:
要求小于等于80
equal:
要求等于80
range:
要求大于等于80并小于100
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">integer:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="integer" placeholder="请输入..." type="text" axValid='type:"integer"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">moreThan:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="moreThan" placeholder="请输入..." type="text" axValid='type:"moreThan",number:80'></div>
                                </div>
                                <div class="ax-form-txt">要求大于80</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">moreEqual:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="moreEqual" placeholder="请输入..." type="text" axValid='type:"moreEqual",number:80'></div>
                                </div>
                                <div class="ax-form-txt">要求大于等于80</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">lessThan:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="lessThan" placeholder="请输入..." type="text" axValid='type:"lessThan",number:80'></div>
                                </div>
                                <div class="ax-form-txt">要求小于80</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">lessEqual:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="lessEqual" placeholder="请输入..." type="text" axValid='type:"lessEqual",number:80'></div>
                                </div>
                                <div class="ax-form-txt">要求小于等于80</div>
                                </div>
                                </div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">equal:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="equal" placeholder="请输入..." type="text" axValid='type:"equal",number:80'></div>
                                </div>
                                <div class="ax-form-txt">要求等于80</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">range:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="range" placeholder="请输入..." type="text" axValid='type:"range",min:80,max:100'></div>
                                </div>
                                <div class="ax-form-txt">要求大于等于80并小于100</div>
                                </div>
                                </div>
                            

字符长度校验

字符长度校验是表单中常见的校验方式,本插件已经集成了如下字符长度校验:

  • length字符数量校验:与options.length参数比较,必须等于参数
  • lengthMore大于字符数量校验:与options.length参数进行比较,要求大于该参数
  • lengthLess小于校验:与options.length参数进行比较,要求小于该参数
  • lengthRange字符数量区间校验:与options.minLengthoptions.maxLength参数进行比较,要求在这俩参数范围内
length:
要求6个字符
lengthMore:
要求多余6个字符
lengthLess:
要求少于6个字符
lengthRange:
要求6~10个字符
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">length:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="length" placeholder="请输入..." type="text" axValid='type:"length",length:6'></div>
                                </div>
                                <div class="ax-form-txt">要求6个字符</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">lengthMore:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="lengthMore" placeholder="请输入..." type="text" axValid='type:"lengthMore",length:6'></div>
                                </div>
                                <div class="ax-form-txt">要求多余6个字符</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">lengthLess:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="lengthLess" placeholder="请输入..." type="text" axValid='type:"lengthLess",length:6'></div>
                                </div>
                                <div class="ax-form-txt">要求少于6个字符</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">lengthRange:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="lengthRange" placeholder="请输入..." type="text" axValid='type:"lengthRange",minLength:6,maxLength:10'></div>
                                </div>
                                <div class="ax-form-txt">要求6~10个字符</div>
                                </div>
                                </div>
                            

包含与不包含校验

对于屏蔽敏感词通常需要使用包含或不包含校验,本插件已经集成了如下包含和不包含校验:

  • include要求包含校验:与options.include参数比较,所填写的内容必须在参数内;include是数组
  • exclude要求排除校验:与options.exclude参数进行比较,所填写的内容不能再参数内;exclude参数是数组
include:
要求填写“lilei”或“hanmeimei”
exclude:
要求不能填写“lilei”或“hanmeimei”
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">include:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="include" placeholder="请输入..." type="text" axValid='type:"include",include:"lilei,hanmeimei"'></div>
                                </div>
                                <div class="ax-form-txt">要求填写“lilei”或“hanmeimei”</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">exclude:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="exclude" placeholder="请输入..." type="text" axValid='type:"exclude",exclude:"lilei,hanmeimei"'></div>
                                </div>
                                <div class="ax-form-txt">要求不能填写“lilei”或“hanmeimei”</div>
                                </div>
                                </div>
                            

异步校验

异步校验是指通过提交到动态页面进行实时异步校验,需要启用url参数,并不填type。也就是说启用了异步校验则不能再启用其他同步校验。

异步校验向动态页面提交的标准数据格式是:{name:'',value:'',parent:''},也就是字段名、字段值和form节点(Dom)。

async:
尝试“李雷”、“lilei”、“韩梅梅”或“hanmeimei”
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">async:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="async" placeholder="请输入..." type="text" axValid='url:"ajax/asyn.php"'></div>
                                </div>
                                <div class="ax-form-txt">尝试“李雷”、“lilei”、“韩梅梅”或“hanmeimei”</div>
                                </div>
                                </div>
                            

选择数量校验

对于下拉菜单和多选的checkbox控件通常有选择数量校验,本插件已经集成了如下选择数量校验:

  • oneChecked至少选择一个校验:多值字段必须选择一个选项
  • leastChecked至少选择校验:与options.least参数进行比较,所选择的数量不能少于参数
  • mostChecked至多选择校验:与options.most参数进行比较,所选择的数量不能多于参数
  • rangeChecked选择范围校验:与options.leastoptions.most参数进行比较,所选择的数量需要在参数范围

checkbox的值将被转为数组,继而可以根据数组的length值进行数量判断。

对于radio、checkbox和和select-multiple控件建议使用change触发
oneChecked:
leastChecked:
mostChecked:
rangeChecked:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">oneChecked:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="oneChecked" value="0" type="checkbox" axValid='type:"oneChecked",trigger:"change"'><span>军事类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="oneChecked" value="1" type="checkbox" axValid='type:"oneChecked",trigger:"change"'><span>人物志类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="oneChecked" value="2" type="checkbox" axValid='type:"oneChecked",trigger:"change"'><span>文学类</span></label></div>
                                </div>
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="oneChecked" value="3" type="checkbox" axValid='type:"oneChecked",trigger:"change"'><span>小说类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="oneChecked" value="4" type="checkbox" axValid='type:"oneChecked",trigger:"change"'><span>教材类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="oneChecked" value="5" type="checkbox" axValid='type:"oneChecked",trigger:"change"'><span>动漫类</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">leastChecked:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="leastChecked" value="0" type="checkbox" axValid='type:"leastChecked",trigger:"change",least:2'><span>军事类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="leastChecked" value="1" type="checkbox" axValid='type:"leastChecked",trigger:"change",least:2'><span>人物志类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="leastChecked" value="2" type="checkbox" axValid='type:"leastChecked",trigger:"change",least:2'><span>文学类</span></label></div>
                                </div>
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="leastChecked" value="3" type="checkbox" axValid='type:"leastChecked",trigger:"change",least:2'><span>小说类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="leastChecked" value="4" type="checkbox" axValid='type:"leastChecked",trigger:"change",least:2'><span>教材类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="leastChecked" value="5" type="checkbox" axValid='type:"leastChecked",trigger:"change",least:2'><span>动漫类</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">mostChecked:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="mostChecked" value="0" type="checkbox" axValid='type:"mostChecked",trigger:"change",most:4'><span>军事类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="mostChecked" value="1" type="checkbox" axValid='type:"mostChecked",trigger:"change",most:4'><span>人物志类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="mostChecked" value="2" type="checkbox" axValid='type:"mostChecked",trigger:"change",most:4'><span>文学类</span></label></div>
                                </div>
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="mostChecked" value="3" type="checkbox" axValid='type:"mostChecked",trigger:"change",most:4'><span>小说类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="mostChecked" value="4" type="checkbox" axValid='type:"mostChecked",trigger:"change",most:4'><span>教材类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="mostChecked" value="5" type="checkbox" axValid='type:"mostChecked",trigger:"change",most:4'><span>动漫类</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">rangeChecked:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="rangeChecked" value="0" type="checkbox" axValid='type:"rangeChecked",trigger:"change",least:2,most:4'><span>军事类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="rangeChecked" value="1" type="checkbox" axValid='type:"rangeChecked",trigger:"change",least:2,most:4'><span>人物志类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="rangeChecked" value="2" type="checkbox" axValid='type:"rangeChecked",trigger:"change",least:2,most:4'><span>文学类</span></label></div>
                                </div>
                                <div class="ax-row">
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="rangeChecked" value="3" type="checkbox" axValid='type:"rangeChecked",trigger:"change",least:2,most:4'><span>小说类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="rangeChecked" value="4" type="checkbox" axValid='type:"rangeChecked",trigger:"change",least:2,most:4'><span>教材类</span></label></div>
                                <div class="ax-col ax-col-8"><label class="ax-checkbox"><input name="rangeChecked" value="5" type="checkbox" axValid='type:"rangeChecked",trigger:"change",least:2,most:4'><span>动漫类</span></label></div>
                                </div>
                                </div>
                                </div>
                                </div>
                                </div>
                            

应用在多选文件file控件上。

file的值将被转为数组,继而可以根据数组的length值进行数量判断。

oneFile:
leastFile:
mostFile:
rangeFile:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">oneFile:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <input type="file" multiple name="onefile" axValid='type:"oneChecked",trigger:"change"'>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">leastFile:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <input type="file" multiple name="leastfile" axValid='type:"leastChecked",trigger:"change",least:2'>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">mostFile:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <input type="file" multiple name="mostfile" axValid='type:"mostChecked",trigger:"change",most:4'>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">rangeFile:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <input type="file" multiple name="rangeFile" axValid='type:"rangeChecked",trigger:"change",least:2,most:4'>
                                </div>
                                </div>
                                </div>
                                </div>
                            

应用在select-multiple控件上。

select-multiple的值将被转为数组,继而可以根据数组的length值进行数量判断。

oneSelected:
leastSelected:
mostSelected:
rangeSelected:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">oneSelected:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <select multiple name="onselect" axValid='type:"oneChecked",trigger:"change"'>
                                <option value="">请选择...</option>
                                <option value="Beijing">北京</option>
                                <option value="Shanghai">上海</option>
                                <option value="Chongqing">重庆</option>
                                <option value="Xiamen">厦门</option>
                                <option value="Tianjin">天津</option>
                                <option value="Shenzhen">深圳</option>
                                </select>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">leastSelected:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <select multiple name="leastselect" axValid='type:"leastChecked",trigger:"change",least:2'>
                                <option value="">请选择...</option>
                                <option value="Beijing">北京</option>
                                <option value="Shanghai">上海</option>
                                <option value="Chongqing">重庆</option>
                                <option value="Xiamen">厦门</option>
                                <option value="Tianjin">天津</option>
                                <option value="Shenzhen">深圳</option>
                                </select>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">mostSelected:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <select multiple name="mostselect" axValid='type:"mostChecked",trigger:"change",most:4'>
                                <option value="">请选择...</option>
                                <option value="Beijing">北京</option>
                                <option value="Shanghai">上海</option>
                                <option value="Chongqing">重庆</option>
                                <option value="Xiamen">厦门</option>
                                <option value="Tianjin">天津</option>
                                <option value="Shenzhen">深圳</option>
                                </select>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">rangeSelected:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <select multiple name="rangeselect" axValid='type:"rangeChecked",trigger:"change",least:2,most:4'>
                                <option value="">请选择...</option>
                                <option value="Beijing">北京</option>
                                <option value="Shanghai">上海</option>
                                <option value="Chongqing">重庆</option>
                                <option value="Xiamen">厦门</option>
                                <option value="Tianjin">天津</option>
                                <option value="Shenzhen">深圳</option>
                                </select>
                                </div>
                                </div>
                                </div>
                                </div>

                            

应用在单行文本控件上。

如果使用了separator参数,input的文本值将被转为数组,继而可以根据数组的length值进行数量判断。

oneText:
leastText:
mostText:
rangeText:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">oneText:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <input name="oneText" placeholder="请输入..." type="text" axValid='type:"oneChecked",trigger:"blur",separator:","'>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">leastText:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <input name="leastText" placeholder="请输入..." type="text" axValid='type:"leastChecked",trigger:"blur",least:2,separator:","'>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">mostText:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <input name="mostText" placeholder="请输入..." type="text" axValid='type:"mostChecked",trigger:"blur",most:4,separator:","'>
                                </div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">rangeText:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input">
                                <input name="rangeText" placeholder="请输入..." type="text" axValid='type:"rangeChecked",trigger:"blur",least:2,most:4,separator:","'>
                                </div>
                                </div>
                                </div>
                                </div>

                            

应用在表单插件上。

某些插件会将最终值赋予隐藏域或文本域,那么我们不需要对插件表现出来的表单域进行校验,只需要对隐藏域(文本域)的值进行校验即可。目前使用隐藏域(文本域)的表单插件有:axCheckbox和axUpload。

由于type=hidden的隐藏无法使用change事件,所以需要使用listen触发类型,以监听隐藏域值的变化(本质也是change事件)。

至少选择两个:
至少选择两个:
                            <div class="ax-form-group">
                                <div class="ax-flex-row">
                                    <div class="ax-form-label">至少选择两个:</div>
                                    <div class="ax-form-con">
                                        <div class="ax-form-input">
                                            <input name="checks" type="hidden" axCheckbox='children:[{value:"military",label:"军事类"},{value:"figure",label:"人物类"},{value:"literature",label:"文学类"},{value:"novel",label:"小说类"}]' axValid='trigger:"listen",type:"leastChecked",least:2,separator:","'>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="ax-break-md"></div>

                            <div class="ax-form-group">
                                <div class="ax-flex-row">
                                    <div class="ax-form-label">至少选择两个:</div>
                                    <div class="ax-form-con">
                                        <div class="ax-form-input">
                                            <input name="files" type="hidden" axUpload='type:"gallery",columns:2,url:"ajax/singleAjax.php"' axValid='trigger:"listen",type:"leastChecked",least:2,separator:","'>

                                        </div>
                                    </div>
                                </div>
                            </div>

                            

一致校验

在注册账密时通常需要确认密码,也就是要求两个字段值相同,可使用same类型进行判断。使用该类型时,需要填写compare参数,也就是相对比的字段name值。

如果需要显示对比替代名称,请填写labelcompareLabel参数;compareLabel相当于对比表单元素的label属性。

密码:
必填
确认密码:
必填
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">密码:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="sameAlt" placeholder="输入密码" type="text"></div>
                                </div>
                                <div class="ax-form-txt ax-color-ignore">必填</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">确认密码:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="same" placeholder="输入账号" type="text" axValid='type:"same",compare:"sameAlt"'></div>
                                </div>
                                <div class="ax-form-txt ax-color-ignore">必填</div>
                                </div>
                                </div>
                            

格式强度

另外有个比较重要的验证类型strong,该类型用于验证字段值强度,必备参数是format。format参数格式为“字符类型#字符长度#字符范围#出现字符种类”表示。

  • 字符类型:由简称和数字构成,“a”表示小写字母,“A”表示大写字母,“9”表示数字,“~”表示特殊字符,“中”表示中文。比如a1表示至少1个小写字母。
  • 字符长度:由一个数字或两个数字构成,数字之间使用“,”连接;比如“6,12”表示至少6个字符并且不能超过12个字符;“6”表示只能是6个字符;“6,”表示不少于6个字符。
  • 字符范围:是指允许填入的字符类型,有字符简称构成;比如“aA9”表示只能填入小写字母、大写字母、和数字。
  • 出现字符种类:表示在字符范围内要求出现几类字符;使用该参数的前提是“字符类型”为空,该参数只能选择2、3或4,而且不能大于等于字符范围;比如“##aA9~#2”表示四种字符中必须出现两种。

为了方便大家使用该参数,以下列举了常见用法:

  • format:'a1A191~1中1#6,12':要求字段必须至少填写一个小写、一个大写、一个数字、一个特殊字符和一个中文字符,并且最少不能低于6个字符,最多不能超过12个字符
  • format:'a1A191~1中1#6,':要求字段必须至少填写一个小写、一个大写、一个数字和、一个特殊字符和一个中文字符,并且最少不能低于6个字符
  • format:'a1A191#6,':要求字段必须至少填写一个小写、一个大写和一个数字,并且最少不能低于6个字符
  • format:'a2A1#6':要求字段必须至少填写两个小写、一个大写,而且只能是6个字符
  • format:'a2A1#6,#aA9~':要求只能是四种字符(小写、大写、数字和特殊字符),必须有两个小写和一个大写字符,并且最少不能低于6个字符
  • format:'a1A1':只要求一个小写和一个大写字符
  • format:'a1A1##aA9~':要求只能是四种字符(小写、大写、数字和特殊字符),并且要求一个小写和一个大写字符
  • format:'#6,#aA9~#2':要求只能是四种字符(小写、大写、数字和特殊字符)至少两种字符类型,并且最少不能低于6个字符
  • format:'##aA9~#3':要求只能是四种字符(小写、大写、数字和特殊字符)至少三种字符类型,并且最少不能低于6个字符
至少一个:
4种字符至少各一个,只能是6个字符
两个大写:
大写字符至少各两个,只能是6个字符
限制字数:
至少一个小写,不少于6个字符,不能超过20个字符
至少两种:
四种字符中至少两种,且不少于6个字符
至少三种:
四种字符中至少三种,且不少于6个字符

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">至少一个:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="mango01" placeholder="请输入..." type="text" axValid='type:"strong",format:"a1A191~1#6"'></div>
                                </div>
                                <div class="ax-form-txt ax-color-ignore">4种字符至少各一个,只能是6个字符</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">两个大写:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="mango02" placeholder="请输入..." type="text" axValid='type:"strong",format:"A2#6"'></div>
                                </div>
                                <div class="ax-form-txt ax-color-ignore">大写字符至少各两个,只能是6个字符</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">限制字数:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="mango03" placeholder="请输入..." type="text" axValid='type:"strong",format:"a1#6,20"'></div>
                                </div>
                                <div class="ax-form-txt ax-color-ignore">至少一个小写,不少于6个字符,不能超过20个字符</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">至少两种:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="mango04" placeholder="请输入..." type="text" axValid='type:"strong",format:"#6,#aA9~#2"'></div>
                                </div>
                                <div class="ax-form-txt ax-color-ignore">四种字符中至少两种,且不少于6个字符</div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">至少三种:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="mango05" placeholder="请输入..." type="text" axValid='type:"strong",format:"#6,#aA9~#3"'></div>
                                </div>
                                <div class="ax-form-txt ax-color-ignore">四种字符中至少三种,且不少于6个字符</div>
                                </div>
                                </div>
                            

使用strong校验类型,并且填写format参数,可获得校验强度,校验强度this.strong默认为0,范围为0~6,其增强的规则如下:

  • 如果有1个小写英文字母,强度+1
  • 如果有1个大写英文字母,强度+1
  • 如果有1个数字,强度+1
  • 如果有1个中文,强度+1
  • 如果有1个特殊字符,强度+1
  • 如果有字符数量限制,强度+1

获得了强度值,那么可通过onTrigger进行其他操作,比如强度提示,详情请点击这里

onTrigger:
  •                                             <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">onTrigger:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="onTrigger" type="text" id="onTrigger"></div>
                                                </div>
                                                <div class="ax-strength ax-strength-svg"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 86.6986 86.6986">
                                                <path class="svg-bg" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                <path class="svg-out" d="M7.238500000000002,43.3493A36.1108,36.1108 0,1,1 79.4601,43.3493A36.1108,36.1108 0,1,1 7.238500000000002,43.3493"></path>
                                                </svg></div>
                                                </div>
                                                </div>
                                            
  •                                             let onTrigge = document.querySelector('#onTrigger'),
                                                strongsvg = onTrigge.closest('.ax-form-group').querySelector('.ax-strength');
    
                                                new axValid(onTrigge, {
                                                type: 'strong',
                                                format: 'a1#6',
                                                onTrigger: function (verified, text,strong ) {
                                                if (strong == 1) {
                                                strongsvg.setAttribute('class', 'ax-strength ax-strength-svg ax-weak');
                                                } else if (strong == 2) {
                                                strongsvg.setAttribute('class', 'ax-strength ax-strength-svg ax-medium');
                                                } else if (strong >= 3) {
                                                strongsvg.setAttribute('class', 'ax-strength ax-strength-svg ax-strong');
                                                }
                                                }
                                                });
                                            

显示位置

通过mode参数改变提示出现的位置,改变提示位置,以下为参数说明。

  • newline:在input下方另起一行显示内容,默认
  • note:在input右方显示内容,像注解
  • popup:在浮窗中显示内容
  • message:在信息窗口中显示内容
newline:
note:
popup:
message:
指定容器:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">newline:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="cherry01" placeholder="请输入..." type="text" axValid='mode:"newline",type:"required"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">note:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="cherry02" placeholder="请输入..." type="text" axValid='mode:"note",type:"required"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">popup:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="cherry03" placeholder="请输入..." type="text" axValid='mode:"popup",type:"required"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>
                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">message:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="cherry04" placeholder="请输入..." type="text" axValid='mode:"message",type:"required"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">指定容器:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="cherry04" placeholder="请输入..." type="text" axValid='mode:"#container",type:"required"'></div>
                                </div>
                                </div>
                                </div>
                                <div id="container"></div>
                            

如果希望将本表单的字段验证信息统一放在某个容器,使用相同的mode值便可比如mode:'#container'

姓名:
学校:
班级:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="berry01" placeholder="请输入..." type="text" axValid='mode:"#container02",type:"required"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">学校:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="berry02" placeholder="请输入..." type="text" axValid='mode:"#container02",type:"required"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">班级:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="berry03" placeholder="请输入..." type="text" axValid='mode:"#container02",type:"required"'></div>
                                </div>
                                </div>
                                </div>
                            

触发方式

通过trigger参数改变触发验证的方式,以下为参数说明。

  • blur:对input失去焦点的时候触发,默认事件,比较适合input
  • change:在input值改变并且失去焦点的时候触发,比较适合select、radio和checkbox
  • input:在input中键入时实时触发,比较适合input、radio和checkbox
  • listen:监听隐藏域值的变化而触发,通常用于type=hidden的表单域,对表单域使用onchange()方法进行手动校验
  • submit:根据表单域当前值进行校验,通常在提交表单二次验证的时候使用
blur:
change:
input:
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">blur:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="blur" placeholder="请输入..." type="text" axValid='trigger:"blur",type:"required"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">change:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="change" placeholder="请输入..." type="text" axValid='trigger:"change",type:"required"'></div>
                                </div>
                                </div>
                                </div>

                                <div class="ax-break-md"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">input:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="input" placeholder="请输入..." type="text" axValid='trigger:"input",type:"required"'></div>
                                </div>
                                </div>
                                </div>
                            

多重验证

可以对type参数使用多个值,用逗号隔开即可,表示要完成多个验证。

账号:
要求必填,并且至少1个小写字母,不少于6个字符
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">账号:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="multiple" placeholder="请输入..." type="text" axValid='type:"required,strong",label:"账号",format:"a1#6,"'></div>
                                </div>
                                <div class="ax-form-txt ax-color-ignore">要求必填,并且至少1个小写字母,不少于6个字符</div>
                                </div>
                                </div>
                            

自定义校验类型

如果内置的校验类型不够用,可通过extend参数扩展校验类型,可支持多个自定义校验类型,格式:extend:{name:function(value){},name:function(value){}},参数value是input的值,为必填项。

校验结果为一个对象,格式为:{verified: '', message: ''},verified如果是true那么message应该是表示通过的内容;如果verified为false那么message应该表示不通过的内容。

以下列举自定义校验规则常用的变量和内置函数:

  • this:实例本身
  • this.options:实例参数
  • this.targetDom:实例对应的节点
  • this.name:实例名
  • this.doTest(pattern, value, error):根据正则返回错误;pattern为正则,value为input值,error为校验未通过时的文本
  • this.getStrong(value):获得当前值的强度

如果需要完全了解框架的校验类型写法,请参考ax.js中的源码。

宣言:
要求必填,并且必须包含“我爱中国”四个字
  •                                             <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">宣言:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="extend" placeholder="请输入..." type="text" id="extend"></div>
                                                </div>
                                                <div class="ax-form-txt ax-color-ignore">要求必填,并且必须包含“我爱中国”四个字</div>
                                                </div>
                                                </div>
                                            
  •                                             let extend = new axValid('#extend', {
                                                type: 'required,love',
                                                extend: {
                                                love: function (value) {
                                                let pattern = /我爱中国/;
                                                return this.doTest(pattern, value, '你要热爱你的祖国哦~');
                                                }
                                                }
                                                });
                                            

二次验证

有时候表单的值并不是通过键盘录入的,此时将无法触发blur、change和input事件;另外如果表单中的控件使用了校验,那么按道理只要有一个控件校验不通过则不能提交表单,所以需要监听表单的submit事件,以确保全部校验通过才可提交表单。

传统的表单有两种提交方式,一种是在表单中有个type="submit"按钮,点击该按钮提交表单并跳转页面;另一种是对button按钮添加点击事件,通过点击事件提交表单。

由于一个页面可能会有多个form表单,如果不对input等表单控件用form元素包裹,那么在提交的时候会出现混乱。所以即使异步提交表单已经不需要使用form元素,但是为了确保二次校验的准确,我们要求:只要是需要提交的表单,所有要提交的表单控件均用form元素包裹。而且确保同一个form表单内不同input的name值不要相同。
姓名:
要求必填
学号:
要求必填
                                <form method="post" action="http://www.axui.cn">
                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">姓名:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="two01" placeholder="请输入..." type="text" axValid='type:"required"'></div>
                                </div>
                                <div class="ax-form-txt ax-color-ignore">要求必填</div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label">学号:</div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input name="two02" placeholder="请输入..." type="text" axValid='type:"required"'></div>
                                </div>
                                <div class="ax-form-txt ax-color-ignore">要求必填</div>
                                </div>
                                </div>

                                <div class="ax-break"></div>

                                <div class="ax-form-group">
                                <div class="ax-flex-row">
                                <div class="ax-form-label"></div>
                                <div class="ax-form-con">
                                <div class="ax-form-input"><input type="submit" value="提交" class="ax-btn ax-primary ax-full" /></div>
                                </div>
                                </div>
                                </div>
                                </form>
                            

实例:通过button按钮或者a标签,写点js来提交表单。

原理是点击提交按钮,从axValids中取出来相同form父元素的input控件,遍历并重复校验一次,如果有一个的verified值为false则不可提交,如果全部为true则调用在axValidRepeat的回调函数执行表单的submit方法。

通过button按钮或者a标签提交表单需要使用axValidRepeat函数,标准用法:axValidRepeat(e, data, outer, callback, interval),该函数可触发二次校验,其参数如下:

  • e:必填项,通常是window
  • data:必填项,数组数据,格式为:[{parent:'',children:{name:'',verified:'',text:''}},{}]
  • outer:必填项,表单项的父层,可以是form节点,也可以是某div节点,但是必须与表单项的父节点一致,所以建议是form节点
  • callback:选填项,校验成功后执行回调函数
  • interval:选填项,表单项校验的间隔时间,纯是为了显示逐个校验效果,默认100毫秒
注意在form表单中,如果button标签没有type="button"属性,那么浏览器将按submit按钮使用,也就是会直接提交表单。
姓名:
要求必填
学号:
要求必填
  •                                             <form method="post" action="#" id="btnForm">
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">姓名:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="two03" placeholder="请输入..." type="text" axValid='type:"required"'></div>
                                                </div>
                                                <div class="ax-form-txt ax-color-ignore">要求必填</div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break"></div>
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">学号:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="two04" placeholder="请输入..." type="text" axValid='type:"required"'></div>
                                                </div>
                                                <div class="ax-form-txt ax-color-ignore">要求必填</div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break"></div>
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label"></div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full" />提交</button></div>
                                                </div>
                                                </div>
                                                </div>
                                                </form>
                                            
  •                                             let btnForm = document.querySelector('#btnForm');
                                                btnForm.querySelector('button').onclick = function (e) {
                                                //校验通过后执行
                                                axValidRepeat(e, axValids, btnForm, function () {
                                                btnForm.submit();
                                                })
                                                }
                                            

实例:异步提交表单进行二次校验。

原理是点击提交按钮,从axValids中取出来相同form父元素的input控件,遍历并重复校验一次,如果有一个的verified值为false则不可提交,如果全部为true则调用在axValidRepeat的回调函数中使用axAjax进行异步提交。

账号:
填“李雷”或“韩梅梅”
密码:
填“123456”
  •                                             <form id="ajaxLogin">
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">账号:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="name" placeholder="输入账户" type="text" axValid='url:"ajax/name.php"'></div>
                                                </div>
                                                <span class="ax-form-txt">填“李雷”或“韩梅梅”</span>
                                                </div>
                                                </div>
    
                                                <div class="ax-break-md"></div>
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">密码:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="pass" placeholder="输入密码" type="text" axValid='url:"ajax/pass.php"'></div>
                                                </div>
                                                <span class="ax-form-txt">填“123456”</span>
                                                </div>
                                                </div>
    
                                                <div class="ax-break-md"></div>
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label"></div>
                                                <div class="ax-flex-block">
                                                <div class="ax-form-input"><button type="button" class="ax-btn ax-primary ax-full">提交</button></div>
                                                </div>
                                                </div>
                                                </div>
    
                                                <div class="ax-break-md"></div>
    
                                                <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label"></div>
                                                <div class="ax-flex-block">
                                                <div class="result"></div>
                                                </div>
                                                </div>
                                                </div>
    
    
                                                </form>
                                            
  •                                             let ajaxForm = document.querySelector('#ajaxLogin');
                                                ajaxForm.querySelector('button').onclick = function (e) {
                                                let _this = this;
                                                //使用二次校验函数
                                                axValidRepeat(e, axValids, ajaxForm, function () {
                                                //使用表单异步提交函数
                                                axAjaxSubmit('ajax/login.php', ajaxForm, _this, function (content) {
                                                ajaxForm.querySelector('.result').innerHTML = content;
                                                });
                                                })
                                                }
                                            
  • //name.php
    <?php
    header("Content-Type:text/plain;charset=utf-8");
    //定义user变量,是被检索内容
    $values = array(
    	array("value" => "李雷"),
    	array("value" => "韩梅梅"),
    );
    $arr_success = array('verified' => true, 'text' => '系统中有此人!');
    $arr_error = array('verified' => false, 'text' => '系统没有此人!');
    $success = json_encode($arr_success);
    $error = json_encode($arr_error);
    $result = '';
    foreach ($values as $item) {
    	if (($item["value"] == $_POST["value"])) {
        $result = $success;
    		break;
    	} else if (($item["value"] !== $_POST["value"])) {
    		$result = $error;
    	}
    }
    echo $result;
    ?>
    //pass.php
    <?php
    header("Content-Type:text/plain;charset=utf-8");
    $arr_success = array('verified' => true, 'text' => '密码正确!');
    $arr_error = array('verified' => false, 'text' => '密码错误!');
    $success = json_encode($arr_success);
    $error = json_encode($arr_error);
    $result = '';
    if($_POST["value"] == "123456"){
    	$result = $success;
    }else{
    	$result = $error;
    }
    echo $result;
    ?>
    //login.php
    <?php
    header("Content-Type:text/plain;charset=utf-8");
    //定义user变量,是被检索内容
    $user = array
     (
     	array("name" => "李雷","pass" => "123456"),
     	array("name" => "韩梅梅","pass" => "123456"),
     );
    //判断出结果
    if(!isset($_POST["name"]) || empty($_POST["name"]) || !isset($_POST["pass"]) || empty($_POST["pass"])) {
    	echo "信息不完整,请重填!";
    	return;
    }
    $result = "登录失败,没有此账户!";
    forEach($user as $value) {
    	if(($value["name"] !== $_POST["name"]) || ($value["pass"] !== $_POST["pass"])){
    		$result = "登录失败!账户或密码错误";
    	}else if(($value["name"] == $_POST["name"]) & ($value["pass"] == $_POST["pass"]) ) {
    		$result = "登录成功!账户:".$_POST["name"].",密码:".$_POST["pass"];
    		break;
    	}
    }
    echo $result; 
    ?>
                                            

监听事件

借鉴jQuery的写法,本插件有若干监听方法,格式是:instance.on('event',function(){});具体事件说明如下:

  • change 状态更新之后执行,包括由验证错误到验证通过或者由验证通过到验证错误

监听事件支持3个参数:

  • verified:当前校验结果,返回true或false
  • text:当前校验的文本,随着verified不同而不同
  • strong:当前的校验强度,strong值大于等于0并小于等于6

演示实例使用console方法,请用F12打开浏览器控制台查看监听结果。

账号:
要求至少1个小写字母,不少于6个字符
  •                                             <div class="ax-form-group">
                                                <div class="ax-flex-row">
                                                <div class="ax-form-label">账号:</div>
                                                <div class="ax-form-con">
                                                <div class="ax-form-input"><input name="acount" placeholder="请输入..." type="text" id="acount"></div>
                                                </div>
                                                <div class="ax-form-txt ax-color-ignore">要求至少1个小写字母,不少于6个字符</div>
                                                </div>
                                                </div>
                                            
  •                                             let changeInstance = new axValid('#acount', {
                                                type: 'strong',
                                                format: 'a1#6'
                                                });
                                                changeInstance.on('change', function ( verified, text,strong) {
                                                console.log('更新了,强度' + strong + ';状态:' + verified + ';内容:' + text);
                                                });
                                            

也可以使用onChange方法来监听verified值得变化来执行某些函数。onChange支持3个参数:

  • verified:当前校验结果,返回true或false
  • text:当前校验的文本,随着verified不同而不同
  • strong:当前的校验强度,strong值大于等于0并小于等于6

参数选项

                                document.addEventListener("DOMContentLoaded", function() {
                                var demo1 = new axValid('#id',{
                                label: '',//表单元素的替代名称
                                mode: 'newline', //设置文字展示方式,默认放在input下方,另可选择note|popup|mesage|#ID|dom元素
                                url: '', //异步校验地址
                                iconShow: true, //是否显示提示图标,默认显示,可填写false不显示
                                type: '', //校验类型,用英文逗号隔开,如果使用extend追加了类型则可写入
                                label: '', //字段昵称
                                parent: null,//定义父form
                                error: '', //自定义错误信息格式
                                success: '通过验证!', //自定义成功信息格式
                                rule: {}, //根据类型自定义提示文字,格式举例:{email:['错误!','正确!'],telephone:['错误!','正确!']}
                                number: '', //将要比较的数字,比较大于小于或等于
                                max: '', //要求大于的数值
                                min: '', //要求小于的数值
                                length: '', //将要比较的字符数量
                                maxLength: '', //可填写最多字符数量
                                minLength: '', //至少要填写的字符数量
                                include: [], //包含的内容,用逗号隔开的数组
                                exclude: [], //排除的内容,用逗号隔开的数组
                                date: '', //比较日期
                                earliest: '', //最早的日期
                                latest: '', //最晚的日期
                                compare: null, //对比对象,可以填input的name值或dom对象
                                compareLabel: '', //对比对象的替换名称
                                least: 1, //至少选择多少个,如果是checkbox、select的checked校验则需要
                                most: 2, //最多选择多少个,如果是checkbox、select的checked校验则需要
                                format: '', //强度匹配格式
                                inputSuccess: 'ax-check-primary', //input通过验证的类名
                                inputError: 'ax-check-danger', //input未通过验证的类名
                                boxSuccess: 'ax-color-primary', //信息容器通过验证的类名
                                boxError: 'ax-color-danger', //信息容器未通过验证的类名
                                chars: '~!@#', //定义特殊字符,可自行选择特殊字符,注意某些字符需要转意处理。比较完整的特殊字符有:~!@#$%^&*()_+{}|:"<>?\\-=\\[\\]\;\',./¥——:”《》?【】;’,。、
                                    charsShow: false, //在信息中是否显示特殊字符,由于不确定会有多少个,所以默认不显示,用户可选择true显示
                                    trigger: 'blur', //如何触发校验,默认是blur失去焦点时,可选change失去焦点并改变值,input键入是实时触发,listen监听隐藏域和submit提交时触发
                                    ajaxType:'post',//异步提交的方式,默认post,可填get
                                    onTrigger: '', //事件触发化后的回调函数,支持三个参数:验证状态(通过与错误)verified、验证文本信息text、验证强度strong
                                    onChange: '',//状态变化后的回调函数,支持三个参数:验证状态(通过与错误)verified、验证文本信息text、验证强度strong
                                    onInit: '',//校验完成后的回调函数,支持三个参数:验证状态(通过与错误)verified、验证文本信息text、验证强度strong
                                    });
                                    });
                            

操作方法

名称 说明 参数说明 回调函数
init(callback) 初始化 callback是回调函数,每次校验时都会触发 function(verified,text,strong){}
支持三个参数
on(type, handler) 添加监听事件 type是监听事件,事件类型可看前文的:监听方法;handler是回调函数 function(verified,text,strong){}
支持三个参数
在回调函数中this均指向实例本身,所以在回调函数中可默认使用如下变量:
  • this:实例本身
  • this.targetDom:实例的Dom
  • this.options:实例的参数
  • this.name:表单元素名称
  • this.label:表单元素替代名称
  • this.value:表单元素的值
  • this.parent:表单元素的父节点
  • this.strong:表单元素的强度
  • this.verified:表单元素的校验状态
  • this.text:表单元素的校验文本
  • this.compare:表单元素的比较元素
  • this.compareLabel:表单元素的比较元素的替换名称