Question

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

    $('#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中的正则表达式测试，但它不会通过语义regExp测试。如果CVC字段上的regExp被替换为以下内容，那么它可以工作，但我更喜欢正则表达式的简洁：

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

Answer 1

由于regExp表达式是字符串的一部分，因此您需要使用双反斜杠\\以及前导^和$来转义反斜杠忽略大数字中找到的匹配模式。结果模式将是：

'regExp[/^\\d{3,4}$/]'

＆＃13;

$(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'
  });
});

＆＃13;

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

＆＃13;

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

1 个答案: