我的表单中文本区域的最小长度
Min length for text area in my form
我需要为我的网站上的文本区域框设置最小长度和最大长度。我知道我最多可以在 html 中做到这一点,但你不能。有人可以帮助我吗?我可以做,否则声明,但那是在提交表格之后。我希望它在用户提交之前告诉用户长度太短。我认为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>
设置最小长度
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();
}
});
请注意,您的 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;
}
});
相关文章:
- 当选择值x时,Javascript需要在正确的位置显示文本区域,从而循环通过具有选择选项的表单
- 提交表单时,Javascript(JQuery)不会在文本区域中填充内容
- 使用javascript提交表单并从字段/单选框/复选框/文本区域获取数据
- 点击后去掉表单上的文本区域
- HTML表单选项(是或否)然后下拉文本区域
- 有没有一种方法可以用包含ENTER键换行符的SQL数据填充文本区域表单
- 如何找到表单中的所有输入字段,并使用Javascript将它们的值复制到文本区域
- Javascript:将多个表单输入打印到一个文本区域
- 使用javascript手动更改表单/文本区域输入,并确保所有事件侦听器都已启动
- 按钮更改由按钮id输入的表单文本区域
- Lotus Notes web表单-IE中的文本区域问题
- 当在文本区域中检测到特定字符串时,Javascript会自动提交表单
- 在文本区域中按键提交表单
- 任何一个输入所需的文本区域或 HTML 表单中的复选框
- 显示/隐藏表单区域(im 使用引导程序)
- 我的表单中文本区域的最小长度
- HTML 表单文件中的行号与文本区域中的行号之间的对应关系
- 如何在免费的jqgrid中增加表单编辑中的文本区域宽度
- 发布动态更改的文本区域值不适用于 ajax 表单
- 在文本区域表单域中强制换行