Question

我的网站上有三种表格：注册表格，登录表格和文章表格。所有三种形式均通过插件验证，所有形式都在一个javascript文件中。注册表单和登录表单的工作符合预期并实际验证了表单，但文章表单却没有？整个过程中使用了相同的代码，没有错误，我可以看到...

是否需要以某种方式对样式表进行排序？某个表单验证文件中的表单数量是否有限制？

文章表单-.js文件内部

//validate insertArticles form
//validate
$(function(){
  $('#article-form').validate(
    {
    rules:{
      heading: {
        required: true,
        maxlength:75,
      },
      topic: {
        required: true,
        maxlength: 15,
      },
      summary: {
        maxlength: 100,
      },
      text: {
        required: true
      }
  }
  }); //valdate end
}); //function end

HTML文章形式

$(function(){
  $('#article-form').validate(
    {
    rules:{
      heading: {
        required: true,
        maxlength:75,
      },
      topic: {
        required: true,
        maxlength: 15,
      },
      summary: {
        maxlength: 100,
      },
      text: {
        required: true
      }
  }
  }); //valdate end
}); //function end

<!--Incude Head-->
<?php require_once '../view/header.php';?>

<body>
    <div id="wrapper"><!--wrapper start-->
        <!--Include Navbar-->
        <?php require_once '../view/navbar.php';?>


        <div class="container" id="content"><!--container start-->
            <div class="jumbotron"><!--jumbotron start-->
                <!--Form 1-->
                <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" id="Question">
                    <form class="article" id="article-form" method="post" enctype="multipart/form-data">
                        <ol>
                            <li>
                                <label for="heading">Heading</label> <span id="headingMessage"></span>
                                <input name="heading" id="heading" class="form-control" type="text">
                            </li>
                            
                            <li>
                                <label for="topic">Topic</label> <span id="topicMessage"></span>
                                <input name="topic" id="topic" class="form-control" type="text" list="football" >
                                <datalist id="football">
                                    <option value="Scotland"></option>
                                    <option value="England"></option>
                                    <option value="Spain"></option>
                                </datalist>
                            </li>
                            
                            <li>
                                <label for="summary">Summary</label>

                                <input name="summary" id="summary" class="form-control">
                            </li>

                            <li>
                                <label for="thumbnail">Thumbnail</label> <span id="thumbnailMessage"></span>
                                <!-- <input name="thumbnail" id="thumbnail" class="form-control" type="text" required> -->
                                <input type="file" name="file" id="file">
                            </li>

                            <li>
                                <label for="articleText">Text</label> 

                                </div>
                                <textarea name="articleText" id="articleText" class="md-textarea form-control"></textarea>
                            </li>

                            <li>
                                <div class="g-recaptcha" data-sitekey="xx-0xitZ7ZeZ"></div>
                            </li>
                            
                        </ol>
                            <input class="btn btn-success" id="formButton" type="submit" name="submit"value="Submit" name="submit">
                            <input class="btn btn-danger" id="formButton" type="reset" value="Reset">
                    </form> 
                    <script>
                        //$("#articleText").jqte();
                        
                    </script>
                    <?php require '../controller/NewArticle.php';?>
                </div>
            </div><!--jumbotron end-->
        </div><!--container end-->
        <!-- Include Footer -->
        <?php require_once '../view/footer.php';?>
    </div><!--wrapper end--> 
</body>
<script src ="../controller/FormValidate.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- jQuery Validate Plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script><!--Google API - Captcha -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

</html>

</body>
<script src ="../controller/FormValidate.js"></script>
<script src="../js/bootstrap.min.js"></script>
<!-- jQuery Validate Plugin -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src='https://www.google.com/recaptcha/api.js'></script><!--Google API - Captcha -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../controller/FormHelp.js"></script>
<!-- Text editor plugin --> 

</html>

例如，我将包括我的注册表中的代码

    //validate
$(function(){

  $.validator.addMethod('strongPassword', function(value, element) {
    return this.optional(element) 
      || value.length >= 8
      && /\d/.test(value)
      && /[a-z]/i.test(value)
      && /[A-Z]/i.test(value)
      && /[!\@\#\$\%\^\&\*\(\)\_\+\.\,\;\:]/i.test(value);
  }, 'Password not strong enough - include: special character, letters and number')
  $('#register-form').validate({
    rules:{
      email: {
        required: true,
        email: true
      },
      password:{
        required: true,
        strongPassword: true
      },
      confirmPassword:{
        required: true,
        equalTo: '#password'
      },
      firstname: {
        required: true,
        nowhitespace: true,
        lettersonly: true
      },
      lastname: {
        required: true,
        nowhitespace: true,
        lettersonly: true
      },
      mobileNumber: {
        required: true,
        digits: true,
        phonesUK: true
      }, 
      username:{
        required:true 
      }
    },
    messages: {
      email: {
        required: 'Please enter an email address',
        email: 'Please enter a <i>valid</i> email address,'
      },
      mobileNumber:{
        required: 'Please enter a mobile number <b>(digits only)</b>',
        mobileNumber: "Please enter a <i>valid</i> UK mobile number"
      } 
    }

  }); //valdate end
}); //function end

jQuery表单验证插件激活

0 个答案: