Question

我有此表格，需要进行验证。例如，名称字段中没有数字，并且消息部分的长度不能超过200个字符。我曾尝试编写JavaScript代码，但它不仅起作用。

<aside id="sidebar">
  <div class="dark">
    <form id="quote" >
      <h3>Get A Quote</h3>

      <div>
        <label>Name</label><br>
        <input type="text" placeholder="Name">
      </div>
      <div>
        <label>Email</label><br>
        <input type="email" placeholder="Email Address">
      </div>
      <div>
        <label>Message</label><br>
        <textarea placeholder="Message"></textarea>
      </div>
      <button class="button_1" type="submit">Send</button>
    </form>
  </div>
</aside>

我也希望它能说出零件是否未填充但我无法使它正常工作。

Answer 1

您可以验证哪个名称仅接受文本和空格，可以使用此表达式/ ^ [a-zA-Z \ s] + $ /在此答案https://stackoverflow.com/a/12778207/615274中进行阅读。验证消息要简单一些。可以使用maxlength attribute定义在textarea中接受的最大字符数。这种可能性会阻止您编写代码。请看下面的例子

const form = document.forms.form;

form.addEventListener('submit', handleSubmit, true);

function handleSubmit(event) {
    event.preventDefault();

    const name = this.name.value;
    const message = this.message.value;

    if (!isValidName(name)) {
        alert('Not valid name!');

        return false;
    }

    if (!isValidMessage(message)) {
        alert('Not valid message!');

        return false;
    }

    this.submit();
}

function isValidName(name) {
    // const expresion = /^[A-Za-z]+$/;
    const expresion = /^[a-zA-Z\s]+$/;

    return expresion.test(name);
}

function isValidMessage(message) {
    if (message.length > 200) {
        return false;
    }

    return true;
}

<form action="#" name="form">
    <h3>Get A Quote</h3>

    <div>
        <label>Name</label><br>
        <input type="text" id="name" name="name" placeholder="Name">
    </div>

    <div>
        <label>Email</label><br>
        <input type="email" placeholder="Email Address">
    </div>

    <div>
        <label>Message</label><br>
        <textarea id="message" name="message" minlength="1" maxlength="200" placeholder="Message"></textarea>
    </div>

    <button class="button_1" type="submit">Send</button>
</form>

Answer 2

您可以为此使用pattern属性，而在js端，请使用checkValidity()检查输入是否有效。

$('#name').on('keyup', (ev) => {
  var isValid = $('#name')[0].checkValidity();
 $('span').html(isValid ? 'yes': 'no');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="name" placeholder="Name" pattern="[a-zA-Z]*">
<div>isValid: <span></span></div>

Answer 3

Andreas提供的链接绝对是您解决此问题的朋友。对于您的特定需求，您需要“ required”，maxlength =“ 200”和（我认为）“ pattern ='^ \ D + $'”。

我有这个表格，但我无法通过验证

3 个答案: