语义 UI 正则表达式解析器似乎无法正常工作答案

【问题标题】：Semantic UI Regex parser does not seem to work correctly语义 UI 正则表达式解析器似乎无法正常工作
【发布时间】：2016-01-08 18:50:09
【问题描述】：

在我的信用卡结帐表格中，我有以下内容：

    $('#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 验证。正则表达式 /\d{3,4}/ 通过 www.regexr.com 中的正则表达式测试，但它不会通过语义正则表达式测试。如果 CVC 字段上的 regExp 替换为以下内容，那么它可以工作，但我更喜欢 regex 的简洁性：

rules: [{   type: 'minLength[3]',
            prompt: 'CVC must be three or four digits'},
        {   type: 'maxLength[4]',
            prompt: 'CVC must be three or four digits'}]},

【问题讨论】：

regExp 是用于验证正则表达式的语义 UI 关键字，因此在语义 UI 的上下文中，它在语义上是正确的：semantic-ui.com/behaviors/form.html#validation-rules
是的，我已经尝试过了，同样，前导 ^ 和尾随 $，但没有成功。看来这一定是图书馆的一个小故障。
我只是在 SO 上搜索并看到 this answer ... 但是，如果文档说这种方式是正确的，那么它就是。 ':)

标签： javascript regex validation semantic-ui

【解决方案1】：

由于regExp 表达式是字符串的一部分，因此您需要使用双反斜杠\\ 以及前导^ 和$ 来转义反斜杠，以忽略大量发现的匹配模式.生成的模式将是：

'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>

【讨论】：