Question

我需要在我的网站上为我的文本区域框设置最小长度和最大长度。我知道最大我可以用html做，但你不能。有人可以帮我吗？我可以做if if else语句但是在提交表单之后。我希望它在他/她提交之前告诉用户长度太短。我认为jquery会是最好的，但真的不确定。

下面列出的代码。

        <!DOCTYPE HTML>
<html> 
<head>

<link type="text/css" rel="stylesheet" href="index.css" />
<meta name="viewport" content="width=device-width" />
<title>Daily Dorm News</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#datepicker" ).datepicker();
$('form').submit(function (e) {
    var value;

    // "message" pattern : from 3 to 15 alphanumerical chars

    value = $('[name="message"]').val();
    if (!/^[A-Za-z0-9]{2,150}$/.test(value)) {
        alert('Need to enter at least 3 characters to submit this form.');
        e.preventDefault();

    }

});
});
</script>

</head>
<body>
<h1> <u>Daily Dorm News</u> <br> The best place to get your latest Dorm news </h1>
<form action="posting_wall.php" method="get">
<div id="container">
Username:<input type="text" name="name" pattern="[A-Za-z0-9]{3,15}" title="Letters and numbers only, length 3 to 15" required autofocus><br>
E-mail: <input type="email" name="email" maxlength="20" required><br>

Post:<br>
<div name="message">
<textarea rows="15" cols="50" name='message' required></textarea>
</div>
Date this event took place: <input type="text" name='date' id="datepicker" required> <br>
<input type="reset" value="Reset">
<input type="submit">

</form>

</body>
</html>

Answer 1

设置最小长度

pattern=".{5,}"  --> 5 characters minimum

设置min-length和max-length

pattern=".{5,100}"  --> 5 characters minimum and 100 maximum .

示例

<input type="text" name="test" pattern=".{20,100}" required >

在每个浏览器中使用html5shiv支持Html5

<小时/> 在OP的评论

之后更新

$('#myform').submit(function(e){
    if($('#message').val().length < 3){
       e.preventdefault();
    }
});

Answer 2

请注意，您的HTML未命中</head>。也就是说，“模式”属性似乎有效：

<input type="text" required="required" pattern="^[A-Za-z0-9]{3,15}$" />

以下是使用Javascript执行此操作的另一种方法。只需将此代码放在<head>之后的$("#datepicker").datepicker();部分：

$('form').submit(function (e) {
    var nameValue = $('[name="name"]').val();
    if (!/^[A-Za-z0-9]{3,15}$/.test(nameValue)) {
        alert('failure');
        e.preventDefault(); // prevents from submitting
    }
});

这是一个结合两种解决方案的演示：http://jsfiddle.net/wared/KbxM8/。

另请参阅：http://api.jquery.com/submit/

我根据你的意见尝试了一些事情：

$('form').submit(function (e) {
    var value;

    // "message" pattern : from 3 to 15 alphanumerical chars

    value = $('[name="message"]').val();
    if (!/^[A-Za-z0-9]{3,15}$/.test(value.replace(/\n/g, ''))) {
        alert('Wrong value for "message".');
        e.preventDefault();
        return;
    }

    // "name" pattern : at least 1 digit

    value = $('[name="name"]').val();
    if (!/\d+/.test(value)) {
        alert('Wrong value for "name".');
        e.preventDefault();
        return;
    }
});

我表单中文本区域的最小长度

2 个答案: