Question

我有一个用于创建费用的表格，其中某些字段输入到表中，而某些字段仅发送到Stripe。

其中一个字段可能会引起混乱，因为需要通过正则表达式以某种URL格式输入该字段，并且我希望收到有关此字段输入错误的自定义消息。

我想要的功能：我最好希望立即对其进行验证，就像您输入错误电子邮件格式的某些网站一样，它会让您知道仍然在文本字段中，或者在您单击该文本字段后单击它。

我已经尝试过：

  function validateHhMm(inputField) {
          var isValid = /^(?:https?:\/\/)?(?:(?:www|m)\.)?twitter\.com\/\w+\/status\/\d+(?:\/\/?)?\$/.test(inputField.value);

          if (isValid) {
              inputField.style.backgroundColor = '#bfa';
          } else {
              inputField.style.backgroundColor = '#fba';
          }

          return isValid;
      }

具有：

<%= form_for(@order, url: listing_orders_path([@listing, @listing_tweet]), remote: true) do |form| %>

                             <% if @order.errors.any? %>
                               <ul>
                                 <% @order.errors.full_messages.each do |msg| %>
                                 <div class="alert alert-danger alert-dismissable">
                                   <button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
                                   <%= msg %>
                                 </div>
                                 <% end %>
                               </ul>
                             <% end %>

                               <div class="form-group">
                                 <%= form.label :name, "Who's the Shout for?" %>
                                 <%= form.text_field :name, class: "form-control", required: true %>
                               </div>

                               <div class="form-group">
                                 <%= form.label :email %>
                                 <%= form.text_field :email, class: "form-control", required: true   %>
                               </div>

                               <div class="form-group">
                                 <%= form.label :description %>
                                 <%= form.text_area :description, class: "form-control", :rows => 10, required: true    %>
                               </div>

                               <div class="form-group">
                                 <%= form.label :twitter_tag %>
                                 <%= form.text_field :twitter_tag, class: "form-control", required: true  %>
                               </div>

                               <div class="form-group">
                                 <div class="input-group">
                                   <%= form.label :twitter_link, "Twitter Link", id: "twitter" %>

                                 </div>
                                 <%= form.text_field :twitter_link, class: "form-control", required: true  %>
                               </div>

                               <script
                                 src="https://js.stripe.com/v3/">
                               </script>

                                 <div class="form-row">
                                   <label for="card-element-2">
                                     Credit or debit card
                                   </label>
                                   <div id="card-element-2" class="form-control">
                                   </div>

                                   <div id="card-errors" role="alert"></div>
                                 </div>
                                   <br>
                                   <div class="form-group">

                                 <%= form.submit, id:"button-element" %>

                               </div>

                               <span class="token"></span>
                               <% end %>
                               <% end %>


                       </div>

无论出于何种原因，我都无法在该控制器中弹出通知（它在另一个可能导致问题的控制器显示页面中使用）---所以我想我会走这条路线并尝试使用javascript /我希望实时进行jquery。

现在，另一个难题是条带代码：

var stripe = Stripe('pk_test_1234567890');

var elements = stripe.elements();

var style = {
  base: {
   #styling_code_here
};

var card = elements.create('card', {style: style});

card.mount('#card-element-2');

card.addEventListener('change', function(event) {
  var displayError = document.getElementById('card-errors');
  if (event.error) {
    displayError.textContent = event.error.message;
  } else {
    displayError.textContent = '';
  }
});

var form = document.getElementById('payment_form');
form.addEventListener('submit', function(event) {
  event.preventDefault();

  stripe.createToken(card).then(function(result) {
    if (result.error) {
      var errorElement = document.getElementById('card-errors');
      errorElement.textContent = result.error.message;
    } else {
      stripeTokenHandler(result.token);
    }
  });
});

  function stripeTokenHandler(token) {
    var form = document.getElementById('payment_form');
    var hiddenInput = document.createElement('input');
    hiddenInput.setAttribute('type', 'hidden');
    hiddenInput.setAttribute('name', 'stripeToken');
    hiddenInput.setAttribute('value', token.id);
    form.appendChild(hiddenInput);

    form.submit();
  }

我添加了上面的代码，因为也许我应该在其中嵌入验证？

除了上述尝试，我还做了其他一些尝试，但是除了验证字段是否为空之外，似乎没有其他方法可以使用，该rails已经具有此功能。我希望实时或一旦离开该字段就对正则表达式进行验证。

Answer 1

HTML5具有内置功能：

例如，这将起作用：

<%= form.text_field :twitter_link, class: "form-control", required: true, pattern: '^(?:https?:\/\/)?(?:(?:www|m)\.)?twitter\.com\/\w+\/status\/\d+(?:\/\/?)?$',
                                 title: "Click the '?' for more information"  %>

验证无效时会出现一条消息。

我注意到的一个问题是，当页面未完全加载时，此前端验证不起作用。如果您要使用它，我建议像我一样使用模型验证。

使用正则表达式验证来验证输入字段或嵌入提交字段

1 个答案: