<input>字段的minlength属性似乎不起作用。
在HTML中是否有其他属性可以帮助我设置字段值的最小长度?
<input>字段的minlength属性似乎不起作用。
在HTML中是否有其他属性可以帮助我设置字段值的最小长度?
当前回答
在@user123444555621固定答案。
在HTML5中有一个minlength属性,但由于某种原因,它可能并不总是像预期的那样工作。
我有一个情况下,我的输入类型文本不遵守minlength="3"属性。
通过使用pattern属性,我设法解决了这个问题。 下面是一个使用pattern来确保minlength验证的例子:
const folderNameInput = document.getElementById("folderName"); folderNameInput.addEventListener('focus', setFolderNameValidityMessage); folderNameInput.addEventListener('input', setFolderNameValidityMessage); function setFolderNameValidityMessage() { if (folderNameInput.validity.patternMismatch || folderNameInput.validity.valueMissing) { folderNameInput.setCustomValidity('The folder name must contain between 3 and 50 chars'); } else { folderNameInput.setCustomValidity(''); } } :root { --color-main-red: rgb(230, 0, 0); --color-main-green: rgb(95, 255, 143); } form input { border: 1px solid black; outline: none; } form input:invalid:focus { border-bottom-color: var(--color-main-red); box-shadow: 0 2px 0 0 var(--color-main-red); } form input:not(:invalid):focus { border-bottom-color: var(--color-main-green); box-shadow: 0 2px 0 0 var(--color-main-green); } <form> <input type="text" id="folderName" placeholder="Your folder name" spellcheck="false" autocomplete="off" required minlength="3" maxlength="50" pattern=".{3,50}" /> <button type="submit" value="Create folder">Create folder</button> </form>
有关更多详细信息,这里是HTML模式属性的MDN链接:https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/pattern
其他回答
我使用maxlength和minlength,无论是否需要,它对我来说都非常适合HTML5。
<输入id=“passcode”类型=“minlength”密码=“8”,maxlength=“10”>
`
minLength属性(不像maxLength)在HTML5中并不存在。但是,如果字段包含少于x个字符,则有一些方法可以验证字段。
一个使用jQuery的例子:http://docs.jquery.com/Plugins/Validation/Methods/minlength
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="http://jzaefferer.github.com/jquery-validation/jquery.validate.js"></script>
<script type="text/javascript">
jQuery.validator.setDefaults({
debug: true,
success: "valid"
});;
</script>
<script>
$(document).ready(function(){
$("#myform").validate({
rules: {
field: {
required: true,
minlength: 3
}
}
});
});
</script>
</head>
<body>
<form id="myform">
<label for="field">Required, Minimum length 3: </label>
<input class="left" id="field" name="field" />
<br/>
<input type="submit" value="Validate!" />
</form>
</body>
</html>
我注意到,有时在Chrome中,当自动填充打开时,字段是由自动填充浏览器内置方法填写的,它绕过了最小长度验证规则,所以在这种情况下,你必须通过以下属性禁用自动填充:
autocomplete = "结束"
<input autocomplete="new-password" name="password" id="password" type="password" placeholder="Password" maxlength="12" minlength="6" required />
Minlength属性现在在大多数浏览器中得到广泛支持。
<input type="text" minlength="2" required>
但是,与HTML5的其他功能一样,IE11在这个全景图中是缺失的。所以,如果你有一个广泛的IE11用户基础,考虑使用模式HTML5属性,几乎所有的浏览器(包括IE11)都支持它。
为了有一个漂亮和统一的实现,可能是可扩展的或动态的(基于生成HTML的框架),我会投票给pattern属性:
<input type="text" pattern=".{2,}" required>
在使用模式时,仍然存在一个小的可用性问题。在使用pattern时,用户将看到一条非直观的(非常通用的)错误/警告消息。查看jsfiddle或下面:
在每个表单中输入1个字符并按submit</h3> < / h2 > <形式action = " # " > Input with minlength: < Input type="text" minlength="2" required name="i1"> <input type="submit" value=" submit" > > < /形式 < br > <形式action = " # " > Input with patern: < Input type="text" pattern="。{2,}" required name="i1"> <input type="submit" value=" submit" > > < /形式
例如,在Chrome中(但在大多数浏览器中类似),你会得到以下错误消息:
Please lengthen this text to 2 characters or more (you are currently using 1 character)
通过使用minlength和
Please match the format requested
通过使用模式。
不是HTML5,但无论如何都很实用:如果你碰巧使用AngularJS,你可以在输入和文本区域都使用ng-minlength(或data-ng-minlength)。看看这个Plunk。