我表單中文本區域的最小長度
[英]Min length for text area in my form
問題描述
我需要在我的網站上為我的文本區域框設置最小長度和最大長度。 我知道 max 我可以在 html 中做到這一點，但 min 你不能。 有人可以幫我解決這個問題嗎？ 我可以做 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>
2 個解決方案
解決方案1
0 2013-11-02 18:31:43
設置最小長度
pattern=".{5,}" --> 5 characters minimum
設置最小長度和最大長度
pattern=".{5,100}" --> 5 characters minimum and 100 maximum .
例子
<input type="text" name="test" pattern=".{20,100}" required >
在每個瀏覽器中支持 Html5 使用html5shiv
OP評論后更新
$('#myform').submit(function(e){ if($('#message').val().length < 3){ e.preventdefault(); } });解決方案2
0 2013-11-02 19:07:55
請注意，您的 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;
}
});
獲取文本區域的長度
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.