`

input控件的常用基础验证方法

阅读更多

html5Input控件可以通过以下几个方式来支持基础的验证

首先是type, html5增加了number, email, tel, date, url, color等类型,支持html5的浏览器基于这个类型已经可以做最基础的校验了,比如type="number", 那么只允许输入数字;type="email", 那浏览器就帮你校验email address

其次是几个属性,如maxlength(text类型), min, maxnumber类型和日期时间类型)

然后是required属性,可以做非空校验

最后是强大的pattern属性,可以输入任意正则表达式。

示例如下:

Html代码 

<!--[if !supportLists]-->1.  <!--[endif]--><input type="number" name="mobile" class="form-control" required maxlength="11" pattern="^1\d{10}$" oninvalid="setCustomValidity('请输入正确的手机号')" />  

 其中oninvalid子句可以自定义浏览器给出的pattern不合格提示信息。

 

如果校验很复杂,那就还是建议用验证库了,比如jquery.validate.js或者bootstrap validator插件

 

分享到:
评论

相关推荐

    ASP.NET控件 和 验证控件

    **常用Web标准控件**包括`Label`、`TextBox`、`Literal`、`Button`、`LinkButton`、`ImageButton`、`RadioButton`等。`Label`用于展示不可编辑的文本,可以设置颜色、边框和字体样式。`TextBox`提供文本输入,有单行...

    js+input日历控件代码及用法

    在JavaScript编程中,日历控件是一种常用的交互元素,它为用户提供了一个图形化的日期选择界面。本资源"js+input时间日历控件代码及用法"提供了实现这一功能的具体代码示例,使得开发者能够轻松地在网页中集成日期...

    常用Web服务器控件

    1. **HTML控件**:HTML控件是最基础的Web服务器控件,如`&lt;input&gt;`(文本框、复选框等)、`&lt;select&gt;`(下拉列表)和`&lt;button&gt;`(按钮)。它们在客户端浏览器中直接处理,但可以通过服务器端代码进行交互。 2. **ASP...

    日历控件常用注册表单

    总的来说,这个"日历控件常用注册表单"提供了一种实用的方法来在网页中集成日期选择功能,通过JavaScript和HTML的结合,实现了用户友好的交互体验。对于开发者来说,理解并掌握这种技术对于构建现代Web应用至关重要...

    HTML控件和验证控件.ppt

    HTML控件和验证控件是ASP.NET开发网页应用时常用的技术。HTML控件实际上是标准的HTML标签,通过添加`runat="server"`属性使其成为服务器端控件,从而能够参与服务器端的事件处理。这些控件主要存在于`System.Web.UI....

    js几种常用表单验证控件

    这篇文档将深入探讨JavaScript中几种常用的表单验证控件和方法。 一、基本的HTML5验证 HTML5引入了内置的表单验证属性,如`required`、`pattern`、`min`、`max`等,使得验证变得更加简单。例如: ```html &lt;input ...

    C#.net验证控件常用的正则表达式邮箱地址验证身份证验证

    本篇将详细讲解C#.NET验证控件中用于邮箱地址验证和身份证验证的常用正则表达式,以及可能涉及的出生日期验证。 一、邮箱地址验证 在C#.NET中,可以使用正则表达式验证控件(RegularExpressionValidator)来检查...

    最常用的时间控件-js

    本篇文章将详细探讨“最常用的时间控件-js”这一主题,包括核心概念、实现方式以及实际应用中的定制策略。 1. **JavaScript日期对象**: JavaScript内置了Date对象,用于处理日期和时间。通过new Date()构造函数...

    常用控件CSS样式

    "常用控件CSS样式"是一个集合,包含了各种经典且美观的CSS样式,适用于多种常见的网页控件,这些样式可以自定义并应用于项目中,以提升用户体验和界面美观度。 "设计模edo-Flat-UI-c4d26b2"这个文件很可能是这个...

    jsf常用控件的使用

    本文将深入探讨JSF中的一些常见控件及其使用方法,旨在帮助开发者更好地理解和应用这些控件。 1. **输入控件**: - `h:inputText`:用于创建简单的文本输入字段,可以与Bean中的属性绑定,处理用户输入的数据。 -...

    常用HTML表单控件

    以上就是HTML中常用的表单控件,理解并熟练运用这些控件,能帮助开发者创建功能丰富的交互式网页,提升用户体验。在实际开发中,还需要配合CSS进行样式设计,并通过JavaScript进行动态交互和数据验证。

    ComponentOne Input for WinForms 中文帮助文档

    C1Input控件集还提供了丰富的设计时支持,如上下文菜单,允许开发者在Visual Studio的多个版本中快速访问和配置控件的常用属性。智能标签功能可以简化属性设置,而任务菜单则允许开发者快捷地配置控件,例如设置C1...

    正规式的使用和控件的验证

    通过以上内容,我们可以了解到在ASP.NET中使用正规式和验证控件来实现数据验证的方法。`RegularExpressionValidator`控件为开发者提供了非常便捷的方式来确保用户输入的数据符合预期的要求。同时,掌握一些常用的...

    HTML日期选择控件

    HTML日期选择控件是网页开发中常用的一种交互元素,它允许用户方便地选取日期,常用于表单提交、日程安排或时间记录等场景。在HTML5中,引入了`&lt;input type="date"&gt;`标签,为开发者提供了一个内置的日期选择控件,但...

    ASP.NET控件综合实例

    1. **熟练掌握ASP.NET常用服务器控件与验证控件的使用。** - 学习者应能够识别并理解ASP.NET中的各种服务器控件的功能,如文本框、按钮等,并能熟练使用验证控件确保用户输入的有效性。 2. **学会使用ASP.NET中的...

    C#的各种按钮等服务器控件.ppt

    - **ID和属性**:每个服务器控件都有唯一的ID,具备可编程的属性和方法,便于在服务器端代码中操作。 2. **服务器控件分类**: - **HTML服务器控件**:基于HTML标记,添加`runat="server"`变为服务器控件,如`...

    Kettle入门教程(详细介绍控件使用方法)

    本篇Kettle入门教程详细介绍了该工具的各个控件使用方法,旨在帮助所有用户轻松上手Kettle工具。 首先,Kettle资源库管理是使用Kettle的基础。Kettle允许用户创建、更新资源库,以及管理资源库中的用户登录和权限。...

    常用的js控件,有日期和右键菜单

    这些控件不仅提供用户友好的界面,还能进行日期格式化、日期范围验证等功能。例如,jQuery UI的Datepicker提供了多种主题、日期格式选项,并支持自定义事件,使得开发者可以根据需求定制日期选择行为。 其次,右键...

    动态增加html表单(文本框)

    4. **C#**:C#是ASP.NET框架常用的编程语言。在服务器端,可以创建`System.Web.UI.WebControls.TextBox`对象并添加到页面上。例如: ```csharp TextBox newBox = new TextBox(); PlaceHolder1.Controls.Add...

    asp.net 判断控件类型源码

    首先,ASP.NET控件是构建网页交互性的基础组件,包括服务器控件(如Button、TextBox)和HTML控件(如&lt;input&gt;标签)。在VB.NET中,我们可以使用`GetType()`函数或者`TypeOf...Is`关键字来判断控件的类型。 1. `...

Global site tag (gtag.js) - Google Analytics