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

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

<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，则可以使用输入类型=＆＃34; email＆＃34;否则使用此

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);
  }

}）;

Answer 3

由于JQuery已经是Bootstrap的要求，您可以使用以下验证插件来验证密码字段：throw an Exception

您可以使用此类代码验证密码

    <!-- 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 ，并且始终必须验证密码服务器端。

如何使用jquery，bootstrap验证已创建的表单

3 个答案: