语义 UI 正则表达式解析器似乎无法正常工作
Semantic UI Regex parser does not seem to work correctly
在我的信用卡结帐表格中,我有以下内容:
$('#checkout-info')
.form({
on : 'blur',
fields : {
id_cc_num : { identifier: 'id_cc_num',
optional: true,
rules: []},
id_cc_CVC : { identifier: 'id_cc_CVC',
optional: true,
rules: [{ type: 'regExp[/\d{3,4}/]',
prompt: 'CVC must be three or four digits'}]},
id_cc_month : { identifier: 'id_cc_month',
optional: true,
rules: [{ type: 'integer[1..12]',
prompt: 'MM must be a two-digit month designator - 01 thru 12'}]},
id_cc_year : { identifier: 'id_cc_year',
optional: true,
rules: [{ type: 'integer[2016..2036]',
prompt: 'Year must be at least 2016'}]},
inline : 'true'
});
除 regExp 验证外,显示的所有验证均正常工作。 regex /\d{3,4}/ 通过了 www.regexr.com 中的 regex 测试,但不会通过 Semantic regExp 测试。如果将 CVC 字段上的正则表达式替换为以下内容,则可以正常工作,但我更喜欢正则表达式的简洁性:
rules: [{ type: 'minLength[3]',
prompt: 'CVC must be three or four digits'},
{ type: 'maxLength[4]',
prompt: 'CVC must be three or four digits'}]},
由于 regExp
表达式是字符串的一部分,您需要使用双反斜杠 \
以及前导 ^
和 [=16 来转义反斜杠=] 忽略在较大数字中找到的匹配模式。生成的模式将是:
'regExp[/^\d{3,4}$/]'
$(function() {
$('#checkout-info').form({
on: 'blur',
fields: {
id_cc_CVC: {
identifier: 'id_cc_CVC',
optional: true,
rules: [{
type: 'regExp[/^\d{3,4}$/]',
prompt: 'CVC must be three or four digits'
}]
},
},
inline: 'true'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<div class="ui container">
<form class="ui form" id="checkout-info">
<div class="field">
<label for="id_cc_CVC">CVC</label>
<input type="text" id="id_cc_CVC" />
</div>
<button type="button" class="ui button">Submit</button>
</form>
</div>
在我的信用卡结帐表格中,我有以下内容:
$('#checkout-info')
.form({
on : 'blur',
fields : {
id_cc_num : { identifier: 'id_cc_num',
optional: true,
rules: []},
id_cc_CVC : { identifier: 'id_cc_CVC',
optional: true,
rules: [{ type: 'regExp[/\d{3,4}/]',
prompt: 'CVC must be three or four digits'}]},
id_cc_month : { identifier: 'id_cc_month',
optional: true,
rules: [{ type: 'integer[1..12]',
prompt: 'MM must be a two-digit month designator - 01 thru 12'}]},
id_cc_year : { identifier: 'id_cc_year',
optional: true,
rules: [{ type: 'integer[2016..2036]',
prompt: 'Year must be at least 2016'}]},
inline : 'true'
});
除 regExp 验证外,显示的所有验证均正常工作。 regex /\d{3,4}/ 通过了 www.regexr.com 中的 regex 测试,但不会通过 Semantic regExp 测试。如果将 CVC 字段上的正则表达式替换为以下内容,则可以正常工作,但我更喜欢正则表达式的简洁性:
rules: [{ type: 'minLength[3]',
prompt: 'CVC must be three or four digits'},
{ type: 'maxLength[4]',
prompt: 'CVC must be three or four digits'}]},
由于 regExp
表达式是字符串的一部分,您需要使用双反斜杠 \
以及前导 ^
和 [=16 来转义反斜杠=] 忽略在较大数字中找到的匹配模式。生成的模式将是:
'regExp[/^\d{3,4}$/]'
$(function() {
$('#checkout-info').form({
on: 'blur',
fields: {
id_cc_CVC: {
identifier: 'id_cc_CVC',
optional: true,
rules: [{
type: 'regExp[/^\d{3,4}$/]',
prompt: 'CVC must be three or four digits'
}]
},
},
inline: 'true'
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.1.8/semantic.min.css" rel="stylesheet" />
<div class="ui container">
<form class="ui form" id="checkout-info">
<div class="field">
<label for="id_cc_CVC">CVC</label>
<input type="text" id="id_cc_CVC" />
</div>
<button type="button" class="ui button">Submit</button>
</form>
</div>