1

我一直在尝试自己解决这个问题，但在谷歌上找不到任何解决方案，或者我的初学者 php 技能不能胜任这项任务。所以请有人告诉我，只有当人们写了 15 个字或更多字时，我才能提交表单。任何建议将不胜感激。下面是css、javascript和html。

#container { 
    background: #ededed; 
    border: 1px solid #ddd; 
    margin: 0 auto; 
    padding: 10px;
    position: relative;
    width: 638px;
}

.error { color: #f00; }

ol.forms { list-style: none; overflow: hidden; }
ol.forms li { float: left; margin-bottom: 12px; width: 100%; }
ol.forms label { cursor: pointer; display: block; }
ol.forms textarea {
    border: 1px solid #ddd;
    float: left; 
    font: 14px/1.5em Georgia, Times, serif; 
    height: 120px; 
    margin-right: 5px;
    overflow-y: auto; 
    padding: 5px;
    width: 500px; 
}
ol.forms textarea:focus { border: 1px solid #000; }
ol.forms div.wordCount { float: left; font-size: 20px; line-height: 30px; }

#quick50 {
    background: #fff;
    border: 1px solid #ddd;
    font-size: 11px;
    left: 5px; 
    padding: 5px;
    position: fixed; 
    width: 188px; 
}

$(document).ready(function() {
    $("[class^='count[']").each(function() {
        var elClass = $(this).attr('class');
        var description = 0;
        var maxWords = 0;
        var countControl = elClass.substring((elClass.indexOf('['))+1, elClass.lastIndexOf(']')).split(',');

        if(countControl.length > 1) {
            description = countControl[0];
            maxWords = countControl[1];
        } else {
            maxWords = countControl[0];
        }

        $(this).after('<div class="wordCount"><strong>0</strong> Words</div>');
        if(description > 0) {
            $(this).siblings('.wordCount').addClass('error');
        }

        $(this).bind('keyup click blur focus change paste', function() {
            var text = jQuery.trim($(this).val()).replace(/\s+/g," ");
            var numWords = text.split(' ').length;
            if($(this).val() === '') {
                numWords = 0;
            }   
            $(this).siblings('.wordCount').children('strong').text(numWords);

            if(numWords < description || (numWords > maxWords && maxWords != 0)) {
                $(this).siblings('.wordCount').addClass('error');
            } else {
                $(this).siblings('.wordCount').removeClass('error');    
            }

        });

    });
});

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Word Count</title>
<link href="wordcount.css" type="text/css" rel="stylesheet" media="screen,projection" />
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="wordcount.js"></script>
</head>

<body>
<div id="container">
    <h1>jQuery Word Count</h1>


    <div class="quickContain">
    <div id="quick50">
        <h2>50 words for quick copying</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam leo orci, porta eget, tincidunt sit amet, sagittis id, turpis. Aenean sed metus at leo ullamcorper dapibus. Duis vitae risus dignissim lectus dapibus faucibus! In porttitor, ante non adipiscing ultricies, magna velit blandit dui, a tempus ligula dolor eu orci? Sed.</p>
    </div>
    </div>

    <ol class="forms">
        <form action="submitcontent.php" method="post">

        <li><label for="minWord">Min Word Textarea <em class="help">(15 words or more)</em></label>
            <textarea onkeyup="limitWords(this,5);" name="minWord" class="count[15,0]" id="minWord"></textarea>
        </li>


        <input type="submit" value="Submit Content"  onclick="return doSubmit()" />
        </form>
    </ol>


</div>


</body>
</html>
4

2 回答 2

4

在我的头顶上，像这样的东西？

<textarea id="some-textarea" onkeypress="activateSubmit();">
</textarea>
<input type="submit" value="Submit" id="submit-button" disabled="disabled">

并相应地某处：

<script>
  function activateSubmit(){
    var len = $('#some-textarea').val().split(" ").length;
    if(len >= 15){ //15 words, hardcoded, probably change this to maxwords, or whatever.
      $('#submit-button').removeAttr('disabled');
    }
    else{
      $('#submit-button').attr('disabled', 'disabled');
    }
  }
</script>
于 2011-03-19T20:16:21.647 回答
1

这是一个带有正则表达式的示例：

$('form#count').submit(function(){
    // if we accept that words are only made of letters
    if ($(this).find('textarea').val().match(/[a-z]+/gi).length < 15) {
        // add some error message
        return false; // prevents submitting
    }
});
于 2011-03-19T20:24:19.250 回答