首页 > 其他分享 >BootStrap中对input的type自带的验证种类

BootStrap中对input的type自带的验证种类

时间:2023-02-06 19:35:38浏览次数:40  
标签:验证 BootStrap number datetime input type 输入


场景

Bootstrap 提供了对所有原生的 HTML5 的 input 类型的支持,包括:

text、password、datetime、datetime-local、date、month、time、week、number、email、url、search、tel 和 color。

适当的 type 声明是必需的,这样才能让 input 获得完整的样式。

举例

添加对输入内容是否为数字的验证

只需要将type改为number,则只能输入数字

<form action="addUser">
<div class="form-group">
<label for="name">用户名</label>
<input type="text" class="form-control" id="name" name ="name" placeholder="name">
</div>
<div class="form-group">
<label for="age">年龄</label>
<input type="number" class="form-control" id="age" name="age" placeholder="age">
</div>
<button type="submit" class="btn btn-default">新增用户</button>
</form>

效果

BootStrap中对input的type自带的验证种类_Bootstrap

标签:验证,BootStrap,number,datetime,input,type,输入
From: https://blog.51cto.com/BADAOLIUMANGQZ/6040296

相关文章

  • objective-c enum 与 typedef的区别
    enum和typedef,在两个小节中书中分别出现了2个例子,如下enumdirection{north,south,east,west};typedefenum{north,south,east,west}dir......
  • [JavaScript]关于prototype继承
    Whenitcomestoinheritance,JavaScriptonlyhasoneconstruct:objects.Eachobjecthasaprivatepropertywhichholdsalinktoanotherobjectcalleditsp......
  • ElementUI中el-table-column的type为selection时选择框旁边有个点
    场景使用el-table的多选框时,el-table-column的type为selection时,显示为勾选框。但是会在勾选框旁边显示一个实心的小点。 注:霸道的程序猿获取编程相关电子书、教程推送与......
  • 关于 ajax在前端提示SyntaxError: Unexpected end of JSON input
    前几日,在开发微信公众号上的网页时候,前端采用h5+jquery开发,后端采用ASP.net的ashx接收前端的参数,restful采用的是java开发,由于在ASP.ENT的webconfig中增加了<sessionState......
  • 表单形式上传文件时为何必须设置enctype属性
    在制作浏览器上传文件的功能时,常常会在表单中设置enctype属性这是为什么呢?首先要了解的是:什么叫做编码技术,数字编码是只采用数字和有关特殊字符来表示数据和指令的编码。大......
  • [Typescript] Indexing an Object with Branded Types
    Inthisexercise,we'regoingtolookatareallyinterestingpropertyofbrandedtypeswhenthey'reusedwithindexsignatures.Herewehaveour User and P......
  • python中class,type和object的关系
    #记录一下,截取的是B站python教程_的视频的图片就理解一切皆对象,都是type的实例,都继承的objectclass类实例化对象,class本身也是个对象type(1)的为<class'int'>意......
  • 保持cerebro的通知及查询Node的box_type
    今天介绍通过chrome谷歌浏览器,改进cerebro的两个小功能. 1.保持cerebro的通知显示.默认cerebro的通知显示只有几秒,还没有看清楚是什么问题,通知框就消失了.尤其是是......
  • C语言学习 函数指针与typeof
    1#include<stdio.h>2#include<stdlib.h>3#include<io_utils.h>45//16int*(f1(int,double));78//29int(*f2)(int,double);1011//......
  • FileInputStream和FileOutputStream
    FileInputstream字节输入流用于文件内容的读取操作.创建FileInputstream对象用于读取文件内容,使用后需要进行关闭操作常用方法:read();//每次仅读取一个字节,返回......