Question

在这里，在我的代码中，名字和姓氏字段并排放置如何为我试过的2个字段编写验证但是没有得到正确的。我附上图片和下面的代码

jQuery代码：

 jQuery(function(){

            jQuery("#fName").validate({

                expression: "if (VAL.match(/^[a-zA-Z]{2,30}$/)) return true; else return false;",

                message: "Please enter the First Name Last Name"

            });
        });

signup.html

   <div class="form-fullname">
        <input class ="first-name"type="text" id="fName" name="firstname" placeholder="First name" required="">

        <input class="last-name" type="text" id="lName" name="lastname" placeholder="Last name" required="">
   </div>

整页是错误图片。

错误：在此注册表单中，当我在名字中输入数字时，它应该在下面显示错误消息，但它显示在第一个名称旁边，如图所示。所以你能告诉我如何在下面得到错误信息。

Answer 1

尝试在输入标记上添加正则表达式：

<form action="register_page">
    <div class="form-fullname">
        <input class ="first-name" type="text" id="fName" name="firstname" placeholder="First name" pattern="^\w{2,30}$" required>

        <input class="last-name" type="text" id="lName" name="lastname" placeholder="Last name" pattern="^\w{2,30}$" required>
    </div>
    <input type="submit" value="Register">
</form>

请注意，您可以在正则表达式上使用\ w而不是[a-zA-Z]。这种方式在这种情况下你不需要jquery验证。

Answer 2

您可以在JavaScript中使用正则表达式上的测试函数来了解输入是否为有效格式。

使用css函数显示或隐藏错误消息。

如果要在聚焦姓氏字段时显示名字字段的错误，您可以在jQuery中编写焦点事件。

$(document).ready(function () {

  var NAME_REGEX = /^[a-zA-Z]{2,30}$/;

  $('#signupBtn').click(signupBtnClick);
  
  $('input[name="lastname"]').focus(lastNameOnFocus);
  
  function signupBtnClick() {
    validateFirstName();
    validateLastName();
  }
  
  function lastNameOnFocus() {
    validateFirstName();
  }
  
  function validateFirstName() {
    var firstName = $('input[name="firstname"]').val();
    
    if(NAME_REGEX.test(firstName)) {
    	$('#firstnameerror').css('display', 'none');
    } else {
    	$('#firstnameerror').css('display', 'block');
    } 
  }
  
  function validateLastName () {
    var lastName = $('input[name="lastname"]').val();
    
    if(NAME_REGEX.test(lastName)) {
    	$('#lastnameerror').css('display', 'none');
    } else {
    	$('#lastnameerror').css('display', 'block');
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div>
  <h3>Sign Up</h3>
</div>

<div>
  <input type="text" name="firstname" placeholder="First Name">
  <span id="firstnameerror" style="color: red; display: none;">First Name is required</span>  
</div>

<div style="margin-top: 1%;">
  <input type="text" name="lastname" placeholder="Last Name">
  <span id="lastnameerror" style="color: red; display: none;">Last Name is required</span>
</div>

<div style="margin-top: 2%;">
  <button type="button" id="signupBtn">Submit</button>
</div>

如何在jQuery中为下面的代码编写验证？

2 个答案: