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-error"><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-primary、ax-check-error等样式可与下方验证提示配合加强显示效果。
姓名：
填写完成
姓名：
请正确填写用户名
<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-error" type="text"></div>
<div class="ax-valid ax-color-error"><span class="ax-iconfont ax-icon-close-o-f"></span> 请正确填写用户名</div>
</div>
</div>
</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-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-error" type="text"></div>
<div class="ax-valid ax-color-error"><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-error" type="text"></div>
<div class="ax-valid ax-color-error"><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-warning-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-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-question" type="text"></div>
<div class="ax-valid ax-color-question"><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.earliest和options.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.min和options.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.minLength和options.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.least和options.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"'><u></u><i>军事类</i></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"'><u></u><i>人物志类</i></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"'><u></u><i>文学类</i></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"'><u></u><i>小说类</i></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"'><u></u><i>教材类</i></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"'><u></u><i>动漫类</i></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'><u></u><i>军事类</i></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'><u></u><i>人物志类</i></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'><u></u><i>文学类</i></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'><u></u><i>小说类</i></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'><u></u><i>教材类</i></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'><u></u><i>动漫类</i></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'><u></u><i>军事类</i></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'><u></u><i>人物志类</i></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'><u></u><i>文学类</i></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'><u></u><i>小说类</i></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'><u></u><i>教材类</i></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'><u></u><i>动漫类</i></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'><u></u><i>军事类</i></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'><u></u><i>人物志类</i></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'><u></u><i>文学类</i></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'><u></u><i>小说类</i></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'><u></u><i>教材类</i></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'><u></u><i>动漫类</i></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值。
如果需要显示对比替代名称，请填写label和compareLabel参数；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, btnForm, function () { btnForm.submit(); }) }
实例：异步提交表单进行二次校验。
原理是点击提交按钮，从axValids中取出来相同form父元素的input控件，遍历并重复校验一次，如果有一个的verified值为false则不可提交，如果全部为true则调用在axValidRepeat的回调函数中使用axAjax进行异步提交。
-
<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, ajaxForm, function () { //使用表单异步提交函数 axAjaxSubmit('ajax/login.php', ajaxForm, _this, {success:(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; ?>
监听事件
本插件有若干监听方法，以on为关键字，参数中监听格式为：new instance({onShow:function(){}})；实例后监听格式是：instance.on('show',function(){})。在参数中监听和实例后监听效果相同。具体事件说明如下：
onInit/init初始化监听，支持3个参数onChange/change状态更新之后执行，包括由验证错误到验证通过或者由验证通过到验证错误，支持3个参数onTrigger/trigger事件触发后执行，支持3个参数
监听事件支持的参数如下：
- verified：当前校验结果，返回true或false
- text：当前校验的文本，随着verified不同而不同
- strong：当前的校验强度，strong值大于等于0并小于等于6
演示实例显示结果使用了console.log方法，请按下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',{
insName: '',//实例名称，字符串格式；如果填写了实例名称，那么该实例会被添加到实例合集当中，通过axInstance方法可获取本实例，详细请查看：ax-utils-instance.php
label: '',//表单元素的替代名称
mode: 'newline', //设置文字展示方式，默认放在input下方，另可选择note|popup|message|#ID|dom元素
url: '', //异步校验地址
iconShow: true, //是否显示提示图标，默认显示，可填写false不显示
type: '', //校验类型，用英文逗号隔开，如果使用extend追加了类型则可写入
parent: '',//定义父form
error: '', //自定义错误信息格式
success: '通过验证！', //自定义成功信息格式
rule: {}, //根据类型自定义提示文字，格式举例：{email:['错误！','正确！'],telephone:['错误！','正确！']}
number: '', //将要比较的数字，比较大于小于或等于
max: '', //要求大于的数值
min: '', //要求小于的数值
length: '', //将要比较的字符数量
maxLength: '', //可填写最多字符数量
minLength: '', //至少要填写的字符数量
include: [], //包含的内容，用逗号隔开的数组
exclude: [], //排除的内容，用逗号隔开的数组
date: '', //比较日期
earliest: '', //最早的日期
latest: '', //最晚的日期
compare: '', //对比对象，可以填input的name值或dom对象
compareLabel: '', //对比对象的替换名称
least: 1, //至少选择多少个，如果是checkbox、select的checked校验则需要
most: 2, //最多选择多少个，如果是checkbox、select的checked校验则需要
separator: '',//内容分隔符，在判断文本框length值时用到
successShow: true,//校验通过，是否需要显示提示，默认true显示，可选择false不显示
message: {},//自定义axMessage插件的参数
popup: {},//自定义axPopup插件的参数
format: '', //强度匹配格式
inputSuccess: 'ax-check-primary', //input通过验证的类名
inputError: 'ax-check-error', //input未通过验证的类名
boxSuccess: 'ax-color-primary', //信息容器通过验证的类名
boxError: 'ax-color-error', //信息容器未通过验证的类名
chars: '~!@#', //定义特殊字符，可自行选择特殊字符，注意某些字符需要转意处理。比较完整的特殊字符有：~!@#$%^&*()_+{}|:"<>?\\-=\\[\\]\;\',./￥——：”《》？【】；’，。、
charsShow: false, //在信息中是否显示特殊字符，由于不确定会有多少个，所以默认不显示，用户可选择true显示
trigger: 'blur', //如何触发校验，默认是blur失去焦点时，可选change失去焦点并改变值，input键入是实时触发，listen监听隐藏域和submit提交时触发
ajaxType: 'post',//异步提交的方式，默认post，可填get
breakpoints: {},//使用断点以适配终端，详情查看ax-utils-other.php页面
immediately: true,//页面加载后是否立即检测并进行init监听，默认true，可选择false
language: {
required: '这是必填项！',
requiredWithLabel: '<# this.label #>是必填项！',
email: '<# this.label #>请填写正确的邮箱！',
telephone: '<# this.label #>请填写11位手机号！',
landline: '<# this.label #>请填写正确的座机号码！',
ip: '<# this.label #>请填写正确的IP地址！',
idCard: '<# this.label #>请填写正确的身份证号！',
zip: '<# this.label #>只能填写6位数字邮编！',
url: '<# this.label #>请填写正确的域名！',
plate: '<# this.label #>请填写正确的车牌号！',
chinese: '<# this.label #>只能填写中文！',
letter: '<# this.label #>只能填写大小写英文字母！',
string: '<# this.label #>只能填写大小写英文字母和数字！',
password: '<# this.label #>只能填写大小写英文字母、数字以及特殊字符！',
ymdhms: '<# this.label #>只能填写类似2022-11-13 2:56:12的日期格式！',
ymd: '<# this.label #>只能填写类似2022-11-13的日期格式！',
hms: '<# this.label #>只能填写类似2:56:12的日期格式！',
ym: '<# this.label #>只能填写类似2022-11的日期格式！',
y: '<# this.label #>只能填写4位数字年份！',
m: '<# this.label #>只能填写1~12月份！',
d: '<# this.label #>只能填写1~31日！',
date: '<# this.label #>请填写有效的日期！',
earlier: '<# this.label #>不可晚于<# this.value #>',
later: '<# this.label #>不可早于<# this.value #>',
dateRange: '<# this.label #>不可早于<# this.max #>，且不可晚于<# this.min #>',
integer: '<# this.label #>只能填写非0开头的正整数！',
number: '<# this.label #>只能填写数字，包括正数、负数、整数、小数！',
moreThan: '<# this.label #>需要大于<# this.value #>',
moreEqual: '<# this.label #>需要大于或等于<# this.value #>',
lessThan: '<# this.label #>需要小于<# this.value #>',
lessEqual: '<# this.label #>需要小于或等于<# this.value #>',
equal: '<# this.label #>需要等于<# this.value #>',
range: '<# this.label #>需要大于等于<# this.min #>并小于<# this.max #>',
length: '<# this.label #>只能填写<# this.value #>个字符！',
lengthMore: '<# this.label #>字符数量不可少于<# this.value #>个！',
lengthLess: '<# this.label #>字符数量不可多于<# this.value #>个！',
lengthRange: '<# this.label #>字符数量不可少于<# this.min #>个，且不可多余<# this.max #>个！',
include: '<# this.label #>填写的值在指定内容中不存在！',
exclude: '<# this.label #>不可填写该值！',
oneChecked: '<# this.label #>必须且只能选择1项！',
leastChecked: '<# this.label #>至少选择<# this.value #>项！',
mostChecked: '<# this.label #>最多选择<# this.value #>项！',
rangeChecked: '<# this.label #>至少选择<# this.min #>项，且不能多于<# this.max #>项！',
same: '两个字段值不一致！',
sameWithLabel: '<# this.label #>与<# this.value #>不一致！',
strong:{
az:'小写字母',
AZ:'大写字母',
number:'数字',
char:'特殊字符',
chinese:'中文',
and:'和',
require:'必须是',
requireMore:'并且要求',
least:'至少',
unit:'个字符，',
select:'中至少选择',
group:'种字符。',
total:'总共只能是<# this.value #>个字符。',
totalMore:'总共至少<# this.value #>个字符。',
totalRange:'总共至少<# this.min #>个字符，且不能超过<# this.max #>个字符。',
},
message:{
strongError:'随机字符类型必须有1种，并且不能超过允许字符类型范围！',
}
},
onTrigger: '', //事件触发化后的回调函数，支持三个参数：验证状态(通过与错误)verified、验证文本信息text、验证强度strong
onChange: '',//状态变化后的回调函数，支持三个参数：验证状态(通过与错误)verified、验证文本信息text、验证强度strong
onInit: '',//校验完成后的回调函数，支持三个参数：验证状态(通过与错误)verified、验证文本信息text、验证强度strong
});
以axMenu插件为例，如果在元素上通过ax*使用属性，需要使用类似json的写法，属性不需要使用引号，如果值是字符串需要使用引号包裹，如果值是数字、布尔值、null或undefined不需要引号；比如要设置active，那么在元素的ax*属性中应该这样书写：axMenu="active:2"