限制用户在文本框中输入超过16位数字

问题描述：

在HTML表单中，有四个字段：名字，姓氏，信用卡，cvv。

In HTML form, there are four fields: first name, last name, credit card, cvv.

<div class="form-group">
                      <div class="col-sm-6">
                          <div class="input text"><label for="PlanFirstname">First name on Account</label><input name="data[Plan][firstname]" class="form-control" pattern="^[a-zA-Z\s]+$" title="Only alphabets and space are allowed" required="" type="text" id="PlanFirstname"></div>
                      </div>
                      <div class="col-sm-6">
                          <div class="input text"><label for="PlanLastname">Last name on Account</label><input name="data[Plan][lastname]" class="form-control" pattern="^[a-zA-Z]+$" title="Only alphabets are allowed" required="" type="text" id="PlanLastname"></div>                     </div>
                </div>
                <div class="form-group">
                     <div class="col-sm-6">

                    <div class="input text"><label for="PlanCardnumber">Card number (no dashes or spaces)</label><input name="data[Plan][cardnumber]" class="form-control" pattern="[0-9]{16}" title="16 digits" required="" type="text" id="PlanCardnumber"></div>                 </div>
                    <div class="col-sm-6">
                    <div class="input text"><label for="PlanCvvnumber">cvv number</label><input name="data[Plan][cvvnumber]" class="form-control" pattern="[0-9]{3,4}" title="3 to 4 digits" required="" type="text" id="PlanCvvnumber"></div>                  </div>
                </div>

对于每个字段，已使用required属性应用了所需的验证，并且使用pattern属性将正则表达式应用于每个字段。

我希望该用户不能输入16位后的任何数字信用卡号码文本框。验证已应用于最多16位数，但用户可以输入超过16位数字，并在提交按钮单击时向用户显示验证消息。如何限制用户输入16位以上？

For each field, required validation has been applied using required attribute and regular expression has been applied to each field using "pattern" attribute.
I want that user should not able to enter any digit after 16 digits in credit card number textbox. Validation has been applied for maximum 16 digits, but user is able to enter more than 16 digits and validation message is shown to user on submit button click. How to restrict user to enter more than 16 digits?

答

title = 仅允许使用字母和空格 required = type = text id = PlanFirstname > < / div >
< / div >
< div class = col-sm-6 >
< div class = 输入文字 > < label for = PlanLastname > 帐户上的姓氏< / label > < input name = data [Plan] [lastname] class = form-control pattern = ^ [a-zA-Z] +

" title="Only alphabets and space are allowed" required="" type="text" id="PlanFirstname"></div> </div> <div class="col-sm-6"> <div class="input text"><label for="PlanLastname">Last name on Account</label><input name="data[Plan][lastname]" class="form-control" pattern="^[a-zA-Z]+

title = 仅允许使用字母必需 = type = text id = PlanLastname > < / div > < / div >
< / div >
< div class = form-group >
< div class = col-sm-6 >

< div class = 输入文字 > < label = PlanCardnumber > 卡号（无破折号o r spaces）< / label > < 输入 name = data [Plan] [cardnumber] class = 表单控制模式 = [0-9] {16} title = 16位必需 = type = text id = PlanCardnumber > < / div > < / div >
< div class = col-sm-6 >
< div class = 输入文字 > &lt ; label for = PlanCvvnumber > cvv number < / label > < 输入名称 = 数据[计划] [cvvnumber] class = form-control pattern = [0-9] {3,4} title = 3到4数字必需 = type = text id = PlanCvvnumber > < / div > < / div >
< / div >

" title="Only alphabets are allowed" required="" type="text" id="PlanLastname"></div> </div> </div> <div class="form-group"> <div class="col-sm-6"> <div class="input text"><label for="PlanCardnumber">Card number (no dashes or spaces)</label><input name="data[Plan][cardnumber]" class="form-control" pattern="[0-9]{16}" title="16 digits" required="" type="text" id="PlanCardnumber"></div> </div> <div class="col-sm-6"> <div class="input text"><label for="PlanCvvnumber">cvv number</label><input name="data[Plan][cvvnumber]" class="form-control" pattern="[0-9]{3,4}" title="3 to 4 digits" required="" type="text" id="PlanCvvnumber"></div> </div> </div>

对于每个字段，已根据需要应用所需的验证属性和正则表达式已使用pattern属性应用于每个字段。

我希望该用户不能在信用卡号文本框中的16位数后输入任何数字。验证已应用于最多16位数，但用户可以输入超过16位数字，并在提交按钮单击时向用户显示验证消息。如何限制用户输入16位以上？

你可以使用文本框的maxlength属性

you can use maxlength property of textbox

maxlength="5"

限制用户在文本框中输入超过16位数字

相关推荐