我们保证每个页面最多只会显示一个小型广告。不用担心，隐藏此消息将确保您不会再收到烦人的提示。
使用
指定验证规则
表单验证需要传入一个验证对象，其中包含验证表单所需的规则。
$('.ui.form') .form({ fields: { name : 'empty', gender : 'empty', username : 'empty', password : ['minLength[6]', 'empty'], skills : ['minCount[2]', 'empty'], terms : 'checked' } }) ;
或者
$('.ui.form') .form({ fields: { name: { identifier: 'name', rules: [ { type : 'empty', prompt : '请输入您的姓名' } ] }, skills: { identifier: 'skills', rules: [ { type : 'minCount[2]', prompt : '请选择至少两种技能' } ] }, gender: { identifier: 'gender', rules: [ { type : 'empty', prompt : '请选择您的性别' } ] }, username: { identifier: 'username', rules: [ { type : 'empty', prompt : '请输入用户名' } ] }, password: { identifier: 'password', rules: [ { type : 'empty', prompt : '请输入密码' }, { type : 'minLength[6]', prompt : '您的密码必须至少 {ruleValue} 个字符' } ] }, terms: { identifier: 'terms', rules: [ { type : 'checked', prompt : '您必须同意条款和条件' } ] } } }) ;
向规则传递参数2.2.3 版本新增
通常，包含参数的规则会以 minLength[2] 的形式编写，其中参数值用方括号括起来。
如果以字符串形式传递属性不理想，或者您是从另一个 JavaScript 变量中提取值，那么使用 value 来传递规则值可能更有意义。
$('.ui.form').form({ fields: { color: { identifier: 'color', rules: [{ type: 'regExp', value: /rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)/i, }] } } });
自定义提示
表单验证包含大多数情况下默认的错误提示，但这些提示可能很笼统。要为验证提示指定自定义个性化值，请使用 prompt 属性与规则一起使用。
Prompt 还支持使用以下替换值进行自定义模板化
| {name} | 字段标签的当前文本，如果标签不可用，则为其占位符文本 |
| {identifier} | 用于匹配字段的标识符 |
| {value} | 当前字段值 |
| {ruleValue} | 传递给规则的值，例如 minLength[100] 将此值设置为 100 |
$('.ui.form') .form({ fields: { field1: { rules: [ { type : 'empty' } ] }, field2: { rules: [ { type : 'exactly[dog]', prompt : '{name} 设置为 "{value}"，这完全错误。它应该是 {ruleValue}' } ] }, field3: { rules: [ { type : 'exactly[cat]', prompt : function(value) { if(value == 'dog') { return '我告诉过你放猫，不是狗！'; } return '这不是猫'; } } ] }, } }) ;
匹配字段
默认情况下，验证对象中使用的属性名称将与每个输入的 id、name 或 data-validate 属性匹配，以查找相应的字段以匹配验证规则。
如果您需要指定不同的标识符，可以在每个验证规则上使用 identifier 属性
$('.ui.form') .form({ fields: { name: { identifier : 'special-name', rules: [ { type : 'empty' } ] } } }) ;
以编程方式验证2.2.8 版本更新
表单验证提供其他行为，以编程方式触发对整个表单或单个字段的验证，并检查表单或单个字段的验证。
请参阅 行为部分，了解语法说明。
| 验证表单 | 验证整个表单，并在必要时显示错误。 |
| 是否有效 | 返回表单是否有效。 |
| 是否有效(fieldName) | 返回表单中的字段是否有效（不更新 UI） |
| 验证字段(fieldName) | 验证特定字段，并在必要时显示错误。 |
$('.ui.form') .form({ fields: { email: 'empty', name: 'empty' } }) ; if( $('.ui.form').form('is valid', 'email')) { // email 有效 } if( $('.ui.form').form('is valid')) { // 表单有效 (email 和 name 都有效) }
规则
验证规则
验证规则是一组验证字段所需的条件。
空
| empty | 字段为空 |
| checked | 复选框字段被选中 |
内容类型
| 字段是有效的电子邮件地址 | ||
| url | 字段是 URL | |
| integer | 字段是整数值，或匹配整数值范围 | integer 或 integer[1..10] |
| decimal | 字段必须是十进制数 | |
| number | 字段是任何数字（十进制或非十进制） | |
| regExp[expression] | 与正则表达式匹配，使用方括号表示法时，RegExp 值必须转义。 |
regExp[/^[a-z0-9_-]{3,16}$/gi]]
或者
regExp[/^[a-z0-9_-]{3,16}$/]]
|
支付
| creditCard | 字段是有效的信用卡 | creditCard |
| creditCard[types] | 字段与指定类型的卡片数组匹配 | creditCard[visa,mastercard,unionpay] |
指定内容
| contains | 字段包含文本（不区分大小写） | contains[foo] |
| containsExactly | 字段包含文本（区分大小写） | containsExactly[foo] |
| doesntContain | 字段不包含文本（不区分大小写） | doesntContain[foo] |
| doesntContainExactly | 字段不包含文本（区分大小写） | doesntContainExactly[foo] |
| is | 字段是一个值（不区分大小写） | is[foo] |
| isExactly | 字段是一个值（区分大小写） | isExactly[foo] |
| not | 字段不是一个值（不区分大小写） | not[foo] |
| notExactly | 字段不是一个值（区分大小写） | notExactly[foo] |
长度
| minLength | 字段小于最小长度 | minLength[5] |
| exactLength | 字段的长度正好是 | exactLength[16] |
| maxLength | 字段小于最大长度 | maxLength[50] |
匹配字段
| match | 字段应与另一个验证字段的值匹配，例如确认密码 | match[password] |
| different | 字段应与另一个指定字段不同 | different[choice] |
选择计数
| minCount | 多选字段包含至少（计数）个选项 | minCount[count] |
| exactCount | 多选字段正好包含（计数）个选项 | exactCount[count] |
| maxCount | 多选字段最多包含（计数）个选项 | maxCount[count] |
添加自定义规则
您可以扩展表单验证以包含您自己的规则。请记住，这些规则需要同步执行。
// 一些任意的业务逻辑代码 window.user = { name : 'Simon', adminLevel : 1 }; // 自定义表单验证规则 $.fn.form.settings.rules.adminLevel = function(value, adminLevel) { return (window.user.adminLevel >= adminLevel) }; $('.ui.form') .form({ fields: { dog: { identifier: 'dog', rules: [ { type: 'adminLevel[2]', prompt: '您必须至少是 2 级管理员才能添加狗' } ] } } }) ;
内置事件
表单会自动将事件附加到特殊标记的表单字段
- 在按下
escape键时，字段将失去焦点 - 在按下
enter键时，字段将提交表单 - 提交事件将附加到表单内任何带有
submit类的元素的click事件 - 重置事件将附加到表单内任何带有
reset类的元素的click事件 - 清除事件将附加到表单内任何带有
clear类的元素的click事件
操作表单
重置/清除字段
调用 $('form').form('reset') 或点击任何重置元素，将把所有表单值重置为它们的 默认值。这是表单字段在页面加载时设置的值。
调用 $('form').form('clear') 将从表单字段中删除所有值，并将下拉菜单重置为占位符文本
写入值
表单包含用于从表单字段读取和写入表单字段的行为。
$('.writing.example form') // 设置一个值 .form('set value', 'name', 'Jack') // 设置多个值 .form('set values', { name : 'Jack', gender : 'male', colors : ['red', 'grey'], username : 'jlukic', password : 'youdliketoknow', terms : true }) ;
获取值
您还可以使用 get value 和 get values 从表单字段读取值
var $form = $('.get.example form'), // 获取一个值 colors = $form.form('get value', 'colors'), // 获取值列表 fields = $form.form('get values', ['name', 'colors']), // 获取所有值 allFields = $form.form('get values') ; console.log(colors); console.log(fields); console.log(allFields);
规则示例
空
以下展示了验证不同类型空内容或未选中内容的示例。
$('.field.example form') .form({ on: 'blur', fields: { empty: { identifier : 'empty', rules: [ { type : 'empty', prompt : '请输入一个值' } ] }, dropdown: { identifier : 'dropdown', rules: [ { type : 'empty', prompt : '请选择一个下拉菜单值' } ] }, checkbox: { identifier : 'checkbox', rules: [ { type : 'checked', prompt : '请选中复选框' } ] } } }) ;
内容类型
输入可以与常见的内容类型匹配，也可以与您自己的自定义 正则表达式 匹配。
$('.type.example form') .form({ on: 'blur', fields: { integer: { identifier : 'integer', rules: [ { type : 'integer[1..100]', prompt : '请输入一个整数' } ] }, decimal: { identifier : 'decimal', rules: [ { type : 'decimal', prompt : '请输入有效的十进制数' } ] }, number: { identifier : 'number', rules: [ { type : 'number', prompt : '请输入有效的数字' } ] }, email: { identifier : 'email', rules: [ { type : 'email', prompt : '请输入有效的电子邮件' } ] }, url: { identifier : 'url', rules: [ { type : 'url', prompt : '请输入一个 URL' } ] }, regex: { identifier : 'regex', rules: [ { type : 'regExp[/^[a-z0-9_-]{4,16}$/]', prompt : '请输入 4-16 个字母的用户名' } ] } } }) ;
支付
输入可以验证信用卡和其他支付类型。
| 卡名称 | 验证名称 | 测试卡号 |
| Visa | visa |
4565340519181845 |
| 美国运通 | amex |
378282246310005 |
| 万事达卡 | mastercard |
5200828282828210 |
| Discover | discover |
6011111111111117 |
| 银联 | unionpay |
6240008631401148 |
| JCB | jcb |
3530111333300000 |
| 大来 | dinersClub |
38520000023237 |
| Maestro | maestro |
6799990100000000019 |
| 激光卡 | laser |
630490017740292441 |
| Visa Electron | visaElectron |
4917300800000000 |
$('.payment.example form') .form({ on: 'blur', fields: { card: { identifier : 'card', rules: [ { type : 'creditCard', prompt : '请输入有效的信用卡' } ] }, exactCard: { identifier : 'exact-card', rules: [ { type : 'creditCard[visa,amex]', prompt : '请输入 Visa 或 American Express 卡' } ] } } }) ;
匹配字段
字段可以被要求匹配或不匹配其他字段。您可以考虑将此与 可选字段 结合使用。
$('.match.example form') .form({ on: 'blur', fields: { match: { identifier : 'match2', rules: [ { type : 'match[match1]', prompt : '请在两个字段中输入相同的值' } ] }, different: { identifier : 'different2', rules: [ { type : 'different[different1]', prompt : '请为每个字段输入不同的值' } ] } } }) ;
长度
输入可以与内容长度匹配
$('.length.example form') .form({ on: 'blur', fields: { minLength: { identifier : 'minLength', rules: [ { type : 'minLength[100]', prompt : '请输入至少 100 个字符' } ] }, exactLength: { identifier : 'exactLength', rules: [ { type : 'exactLength[6]', prompt : '请输入正好 6 个字符' } ] }, maxLength: { identifier : 'maxLength', rules: [ { type : 'maxLength[100]', prompt : '请输入最多 100 个字符' } ] }, } }) ;
指定内容
验证规则可以指定在输入框内应该出现或不应该出现的内容
$('.content.example form') .form({ on: 'blur', fields: { is: { identifier : 'is', rules: [ { type : 'is[dog]', prompt : '请输入 “dog”' } ] }, isExactly: { identifier : 'isExactly', rules: [ { type : 'isExactly[dog]', prompt : '请输入 “dog”' } ] }, not: { identifier : 'not', rules: [ { type : 'not[dog]', prompt : '请输入一个值，但不能是 “dog”' } ] }, notExactly: { identifier : 'notExactly', rules: [ { type : 'notExactly[dog]', prompt : '请输入一个值，但不能正好是 “dog”' } ] }, contains: { identifier : 'contains', rules: [ { type : 'contains[dog]', prompt : '请输入包含 “dog” 的值' } ] }, containsExactly: { identifier : 'containsExactly', rules: [ { type : 'containsExactly[dog]', prompt : '请输入包含 “dog” 的值' } ] }, doesntContain: { identifier : 'doesntContain', rules: [ { type : 'doesntContain[dog]', prompt : '请输入不包含 “dog” 的值' } ] }, doesntContainExactly: { identifier : 'doesntContainExactly', rules: [ { type : 'doesntContainExactly[dog]', prompt : '请输入不包含 “dog” 的值' } ] } } }) ;
选择计数
多选可以指定允许多少个选项。
$('.multi.example form') .form({ on: 'blur', fields: { minCount: { identifier : 'minCount', rules: [ { type : 'minCount[2]', prompt : '请选择至少 2 个值' } ] }, maxCount: { identifier : 'maxCount', rules: [ { type : 'maxCount[2]', prompt : '请选择最多 2 个值' } ] }, exactCount: { identifier : 'exactCount', rules: [ { type : 'exactCount[2]', prompt : '请选择 2 个值' } ] } } })
表单示例
以编程方式添加规则2.2.11 中的新功能
您可以使用特殊行为 add field/rule、remove rule 和 remove field 动态添加或删除字段或规则。
// 让我们只验证用户名开始 $('.add.example .ui.form') .form({ username: ['empty', 'minLength[5]'] }) ;
// 让我们根据按钮切换一些验证 $('.add.example .ui.positive.button') .on('click', function() { $('.add.example .ui.form') // 添加长格式 .form('add rule', 'gender', { rules: [ { type : 'empty', prompt : '输入您的性别是必要的' } ] }) // 添加简写 .form('add rule', 'password', ['empty', 'minLength[5]']) ; }) ;
$('.add.example .ui.negative.button') .on('click', function() { $('.add.example .ui.form') // 一次删除多个 .form('remove fields', ['gender', 'password']) ; }) ;
验证下拉菜单
下拉菜单 也可以像其他表单字段一样进行验证。只需将验证规则与下拉菜单关联的 input 或 select 匹配即可
$('.ui.dropdown') .dropdown() ; $('.ui.form') .form({ fields: { gender: 'empty', name: 'empty' } }) ;
使用服务器名称属性
有时集成需要您使用特定值作为 name 或 id。在这些情况下，您可以使用 data-validate 属性匹配表单字段。
$('.ui.form') .form( fields: { name: 'empty' } }) ;
依赖字段2.2 中的新功能
您可以指定验证字段，使其仅在其他字段存在时使用。只需添加 depends: 'id'，其中 ID 是必须非空白才能评估此规则的字段的 ID。
$('.ui.form') .form({ fields: { yearsPracticed: { identifier : 'yearsPracticed', depends : 'isDoctor', rules : [ { type : 'empty', prompt : '请输入您当医生的年数' } ] } } }) ;
可选字段
添加参数 optional: true 将仅在字段 不为空 时添加您的验证规则。
$('.ui.form') .form({ fields: { email: { identifier : 'email', rules: [ { type : 'email', prompt : '请输入有效的电子邮件' } ] }, ccEmail: { identifier : 'cc-email', optional : true, rules: [ { type : 'email', prompt : '请输入有效的第二个电子邮件' } ] } } }) ;
设置网站默认值
您可以通过修改 $.fn.form.settings.defaults 来指定全站验证设置，这些设置将应用于表单验证，只要字段出现在表单中。
$.fn.form.settings.defaults = { email: { identifier : 'email', rules: [ { type : 'email', prompt : '请输入有效的电子邮件' } ] }, // 此表单没有 ccEmail，但不会产生错误 ccEmail: { identifier : 'cc-email', optional : true, rules: [ { type : 'email', prompt : '请输入有效的第二个电子邮件' } ] }, };
显示错误消息
包含 ui 消息 错误块的表单将自动填充表单验证信息。
在失去焦点和其他事件时进行验证
验证消息也可以在线显示。UI 表单会自动格式化带有类名 prompt 的 标签。这些验证提示也会设置为在输入更改时而不是在表单提交时显示。
$('.ui.form') .form({ fields : validationRules, inline : true, on : 'blur' }) ;
创建自定义验证
您可以使用多个任意规则来验证表单
$('.ui.form') .form({ fields: { dog: { identifier: 'dog', rules: [ { type: 'empty', prompt: '您必须拥有一只狗才能添加' }, { type: 'contains[fluffy]', prompt: '我只想让你添加毛茸茸的狗！' }, { type: 'not[mean]', prompt: '为什么你要在列表中添加一只凶猛的狗？' } ] } } }) ;
行为
所有以下行为都可以使用以下语法调用$('.foo').form('behavior name', argumentOne, argumentTwo)
| 提交 | 提交选定的表单 |
| 是否有效 | 返回表单是否通过其验证规则的布尔值 |
| 添加规则(字段，规则) 2.2.11 中的新功能 |
将规则添加到字段的现有规则中，也称为添加字段 |
| 添加字段(字段) 2.2.11 中的新功能 |
将字段对象添加到现有字段 |
| 移除规则(字段，规则) 2.2.11 中的新功能 |
从字段中移除特定规则，保留其他规则 |
| 移除字段(字段) 2.2.11 中的新功能 |
移除字段的所有验证 |
| 添加提示(标识符，错误) | 将错误提示添加到具有给定标识符的字段 |
| 是否有效(fieldName) | 返回字段是否通过其验证规则的布尔值 |
| 验证表单 | 验证表单，更新 UI，并调用 onSuccess 或 onFailure |
| 验证字段(fieldName) | 验证字段，更新 UI，并调用 onSuccess 或 onFailure |
| 获取字段(id) | 返回与 ID 匹配的名称、id 或数据验证元数据的元素 |
| 获取值(id) | 返回具有 id 的元素的值 |
| 获取值(id) | 返回与 id 数组匹配的元素值的object。如果未传递 IDS，则将返回所有字段 |
| 设置值(id) | 设置具有 id 的元素的值 |
| 设置值(值) | 将传递的值对象中的键值对设置到匹配的 id |
| 获取验证(元素) | 返回给定 jQuery 引用的输入字段的验证规则 |
| 是否具有字段(标识符) | 返回字段是否存在 |
| 添加错误(错误) | 将错误添加到表单，给定错误数组 |
| 添加提示(id，提示) | 为具有 id 的给定元素添加自定义用户提示 |
设置
表单设置
表单设置修改表单验证行为
| 设置 | 默认值 | 描述 |
|---|---|---|
| 键盘快捷键 | 真 | 为 enter 和 escape 键添加键盘快捷键，分别用于提交表单和模糊字段 |
| 开启 | 提交 | 用于触发验证的事件。可以是 submit、blur 或 change。 |
| 重新验证 | 真 | 如果设置为 true，则将在输入更改时重新验证具有错误的字段 |
| 延迟 | 真 | 从最后一次键入的字母到使用 on: change 或重新验证字段时验证字段的延迟。 |
| 内联 | 假 | 在字段验证错误时添加内联错误 |
| 过渡 | 缩放 | 用于动画验证错误的命名过渡。Fade 和 slide down 可在不包含 ui transitions 的情况下使用 |
| 持续时间 | 150 | 内联提示的动画速度 |
表单提示
用于修改默认表单提示的设置
| 设置 | 默认值 |
|---|---|
| 文本 |
text: { unspecifiedRule : '请输入有效值', unspecifiedField : '此字段' }
|
| 提示 |
prompt: { empty : '{name} 必须有值', checked : '{name} 必须选中', email : '{name} 必须是有效的电子邮件', url : '{name} 必须是有效的 URL', regExp : '{name} 格式不正确', integer : '{name} 必须是整数', decimal : '{name} 必须是十进制数', number : '{name} 必须设置为数字', is : '{name} 必须是 \'{ruleValue}\'', isExactly : '{name} 必须完全是 \'{ruleValue}\'', not : '{name} 不能设置为 \'{ruleValue}\'', notExactly : '{name} 不能完全设置为 \'{ruleValue}\'', contain : '{name} 不能包含 \'{ruleValue}\'', containExactly : '{name} 不能完全包含 \'{ruleValue}\'', doesntContain : '{name} 必须包含 \'{ruleValue}\'', doesntContainExactly : '{name} 必须完全包含 \'{ruleValue}\'', minLength : '{name} 必须至少有 {ruleValue} 个字符', length : '{name} 必须至少有 {ruleValue} 个字符', exactLength : '{name} 必须正好有 {ruleValue} 个字符', maxLength : '{name} 不能超过 {ruleValue} 个字符', match : '{name} 必须与 {ruleValue} 字段匹配', different : '{name} 必须与 {ruleValue} 字段的值不同', creditCard : '{name} 必须是有效的信用卡号码', minCount : '{name} 必须至少有 {ruleValue} 个选项', exactCount : '{name} 必须正好有 {ruleValue} 个选项', maxCount : '{name} 必须有 {ruleValue} 个或更少的选项' }
|
回调
回调指定在特定行为之后发生的函数。
| 设置 | 上下文 | 描述 |
|---|---|---|
| onValid | 字段 | 每个有效字段的回调 |
| onInvalid | 字段 | 每个无效字段的回调 |
| onSuccess(event, fields) | 表单 | 如果表单全部有效，则回调 |
| onFailure(formErrors, fields) | 表单 | 如果表单的任何字段无效，则回调 |
模板
模板用于构造元素
| 模板 | 参数 | 描述 |
|---|---|---|
| 错误 | 错误 (数组) | 构造错误消息的内容 |
| 提示 | 错误 (数组) | 构造一个元素来提示用户无效的字段 |
DOM 设置
DOM 设置指定此模块如何与 DOM 交互
| 设置 | 默认值 | 描述 |
|---|---|---|
| 命名空间 | 表单 | 事件命名空间。确保模块拆卸不会影响附加到元素的其他事件。 |
| 选择器 |
selector : { message : '.error.message', field : 'input, textarea, select', group : '.field', input : 'input', prompt : '.prompt', submit : '.submit' }
|
用于将功能与 DOM 匹配的选择器 |
| 元数据 |
metadata : { validate: 'validate' },
|
HTML5 元数据属性 |
| 类名 |
className : { active : 'active', placeholder : 'default', disabled : 'disabled', visible : 'visible' }
|
用于将样式附加到状态的类名 |
调试设置
调试设置控制调试输出到控制台
| 设置 | 默认值 | 描述 |
|---|---|---|
| 名称 | 表单 | 调试日志中使用的名称 |
| 调试 | 假 | 向控制台提供标准调试输出 |
| 性能 | 真 | 向控制台提供标准调试输出 |
| 详细 | 假 | 向控制台提供辅助调试输出 |
| 错误 |
errors : { method : '您调用的方法未定义。' }
|
|