如何使用jquery验证已经创建的表单，引导

Question

我有两个字段的用户名和密码的登录表单。这些字段是有效的。但现在我想通过添加更多的字段，如密码和确认密码，现在发送电子邮件我如何确保输入的密码与确认密码字段匹配，以及如何验证电子邮件字段。

    Login form 


       <!-- Modal content--> 
      <div class="modal-content"> 
       <section id="content1"> 
        <form> 
         <div class="modal-header"> 
           <button type="button" class="close" data-dismiss="modal">&times;</button> 

         <h1 class="modal-title">Signin Form</h1> 
           </div> 

         <div class="modal-body"> 


          <input type="text" placeholder="Username" required="" id="username" /> 


          <input type="password" placeholder="Password" required="" id="password" /> 


          </div> 


         <div class="modal-footer" style="padding-left:86px"> 



          <input type="submit" value="Log in" style="background-color:whitesmoke" /> 

          </div> 
        </form> 
        <!-- form --> 
       </section> 
       <!-- content --> 
       <!-- container --> 
      //</div> 

我添加了这三个文件。

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 

Answer 1

对于电子邮件验证，我们可以使用正则表达式：

function isValidEmailAddress(emailAddress) { 
 
    var pattern = /^([a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+(\.[a-z\d!#$%&'*+\-\/=?^_`{|}~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]+)*|"((([ \t]*\r\n)?[ \t]+)?([\x01-\x08\x0b\x0c\x0e-\x1f\x7f\x21\x23-\x5b\x5d-\x7e\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|\\[\x01-\x09\x0b\x0c\x0d-\x7f\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))*(([ \t]*\r\n)?[ \t]+)?")@(([a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\d\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.)+([a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]|[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF][a-z\d\-._~\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]*[a-z\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])\.?$/i; 
 
    return pattern.test(emailAddress); 
 
};

这将真或假的有效电子邮件地址

对于密码验证：

function ValidatePassword(){ 
 
    var password = $("#password").val(); 
 
    var confirmPassword = $("#confirm-password").val(); 
 
    if (password != confirmPassword) { 
 
     return false; 
 
    } else { 
 
     return true; 
 
    } 
 
}

Answer 2

由于jQuery是已经引导的要求，你可以使用下面的验证插件来验证密码字段：https://github.com/1000hz/bootstrap-validator/

你可以使用这样的代码来验证密码

<!-- New password row --> 
<div class="form-inline row"> 

    <!-- 50% --> 
    <div class="form-group col-sm-6"> 

     <!-- First password input field with custom minlength attribute --> 
     <input type="password" data-minlength="6" class="form-control" id="password" placeholder="Password" 
       required> 

     <!-- Block with requirement --> 
     <div class="help-block">Minimum of 6 characters</div> 
    </div> 
    <!-- 50% --> 
    <div class="form-group col-sm-6"> 

     <!-- Input field with custom error message when passwords don't match --> 
     <input type="password" class="form-control" id="passwordConfirm" data-match="#password" 
       data-match-error="Whoops, these don't match" placeholder="Confirm" required> 

     <!-- Block to show error message --> 
     <div class="help-block with-errors"></div> 
    </div> 
</div> 

您需要为表单添加一个ID属性并激活验证器插件。

$('#myForm').validator(); 

请记住，你永远不需要依赖于JavaScript 仅它总是以验证密码的服务器端必须的。

Answer 3

您必须创建新字段以确认密码和电子邮件地址。

<input type="password" required="" id="confirmPassword" /> 
<span id='message'></span> 
<input type="email" required="" id="emailAddress" /> 
<input type="submit" value="Log in" id="submitButtonId" style="background-color:whitesmoke" /> 

如果使用的是HTML5，您可以使用输入型=“电子邮件”，否则使用此

pattern="/^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/" 

然后在Javascript中，你可以验证密码的值并确认口令字段：

var password = $("#password").val(); 
    var confirmPassword = $("#confirmPassword").val(); 
    if (password != confirmPassword) { 
     $('#message').html('Matching'); 
     $('#submitButtonId').prop('disabled', false); 
    } else { 
     $('#message').html('Not Matching'); 
     $('#submitButtonId').prop('disabled', true); 
    } 

如果，你想在提交前做到这一点，你可以使用下面的代码：

$('#password, #confirmPassword').on('keyup', function() { 
    if ($('#password').val() == $('#confirmPassword').val()) { 
    $('#message').html('Matching').css('color', 'green'); 
    $('#submitButtonId').prop('disabled', false); 
    } else{ 
    $('#message').html('Not Matching').css('color', 'red'); 
    $('#submitButtonId').prop('disabled', true); 
    } 

}）;