`
2012317256
  • 浏览: 12914 次
最近访客 更多访客>>
文章分类
社区版块
存档分类
最新评论

Form表单自动验证

阅读更多

Form表单自动验证

 

1required属性:

<form>

        <input id="webjx_required" name="webjx.com" required type="text"/>

        <input type="submit" value="提交"/>

</form>

required属性可以用用在大多数的输入元素上(除了隐藏元素、图片元素按钮上等)。

required属性表示此输入框是必填项,当提交的时候,如果此输入框为空,那么将提示用户输入后提交。

<form>

<input id="webjx_required" name="webjx.com" required type="text"/>

<input type="submit" value="提交"/>

< /form>

2pattern属性:

<form>

        <input id="webjx_pattern" name="webjx.com" required pattern="\d{3}" type="text"/>

        <input type="submit" value="提交"/>

</form>

pattern属性的值一般为正则表达式,当用户输入的内容符合一定的格式,那么才能提交,否则将提示用户不符合要求,如上所示必须输入3位数字。

立即运行:

< form>

<input id="webjx_pattern" name="webjx.com" required pattern="\d{3}" type="text"/>

<input type="submit" value="提交"/>

< /form>

3min属性和max属性:

<form>

        <input id="webjx_min_max" name="webjx.com" required min="3" max="16" type="number"/>

        <input type="submit" value="提交"/>

</form>

minmax这两个属性是数值类型或日起类型的input元素的专有属性,他限制了input元素中输入的数值和日期范围。属性值为数字。

立即运行:

< form>

<input id="webjx_min_max" name="webjx.com" required min="3" max="16" type="number"/>

<input type="submit" value="提交"/>

< /form>

4step属性:

<form>

        <input id="webjx_step" name="webjx.com" required step="10" min="0" max="100" type="number"/>

        <input type="submit" value="提交"/>

</form>

step属性控制input元素的值增加或减少的步幅,例如你想让用户输入得值在0-100之间,但是必须是10的倍数时,则如上代码所示,点击下方运行看效果。

立即运行:

< form>

<input id="webjx_step" name="webjx.com" required step="10" min="0" max="100" type="number"/>

<input type="submit" value="提交"/>

< /form>

分享到:
评论

相关推荐

    使用FormValidation进行表单验证

    当用户输入的数据未通过验证时,`FormValidation`会自动添加相应的错误类到相关表单元素上,`Bootstrap`的样式会显示红色边框和错误消息,提示用户修正。 要开始使用`FormValidation`,你需要在项目中引入以下依赖...

    Python关于 Django 的web- Form 表单验证

    在Python的Web开发框架Django中,Form表单验证是一个至关重要的部分,它允许开发者创建用户界面并确保从用户那里接收到的数据是有效且安全的。Form类是Django提供的一个强大工具,用于处理HTTP请求中的数据,进行...

    漂亮的form表单-漂亮的form表单

    在网页设计中,表单(Form)是...总的来说,创建“漂亮的form表单”不仅需要考虑表单的基本功能,还需要注重其在视觉上的吸引力和交互上的友好性,通过合理的布局、样式化和验证机制,为用户提供高效且愉快的填写体验。

    自动生成式form表单

    在IT领域,自动生成式form表单是一种高效且实用的技术,尤其在网页开发和应用程序设计中,它大大简化了用户输入数据的过程。form表单是HTML(超文本标记语言)中的一个重要元素,用于收集用户输入的数据,然后可以将...

    Form表单验证(服务器控件、HTML控件)

    4. type="email"或"type="tel":HTML5新增的输入类型,可自动验证邮箱地址和电话号码格式。 三、JavaScript验证 JavaScript验证可以在用户提交表单前在客户端进行,提高用户体验。以下是一些基本步骤: 1. 事件...

    Django之Form表单验证及Ajax验证方式汇总

    本教程将详细讲解Django的Form表单验证以及如何结合Ajax实现无刷新验证。 首先,Django Form表单验证涉及以下关键概念: 1. **定义Form类**:在Django中,你需要创建一个继承自`forms.Form`或`forms.ModelForm`的...

    springmvc-form表单的使用

    ### Spring MVC Form表单的使用详解 #### 一、Spring MVC Form 表单的基本概念 在Web开发中,表单是实现用户与服务器之间交互的重要工具。Spring MVC框架提供了强大的表单支持,允许开发者轻松地处理HTTP请求中的...

    jquery验证form,表单,操作cookie 插件

    2. **初始化插件**:在JavaScript中调用`$("form").validate()`方法,自动应用验证规则。 3. **设置规则**:使用`.rules("add", { rule: condition })`为表单元素添加验证规则。 4. **自定义消息**:使用`.messages...

    jquery formValidation表单验证插件实例

    3. **触发验证**:表单提交时,插件会自动进行验证。如果需要手动触发验证,可以调用`validateField`或`validate`方法: ```javascript $('#username').formValidation('validateField'); $('#myForm').form...

    Jquery前端表单验证插件formvalidation源码及示例

    5. **触发验证**:可以手动触发验证,或者配置插件在提交表单时自动进行验证。 在提供的资源"201505101833"中,可能包含了该版本的源码和示例,这将帮助开发者深入理解插件的工作原理,对其进行二次开发或调试,以...

    美观又功能齐全的HTML form表单

    这里的`email`类型会自动提供邮件格式的验证,而`pattern`属性则允许自定义正则表达式进行电话号码的格式验证。 为了让表单更美观,我们可以利用CSS进行样式设计。例如,为表单元素添加边框、内边距、背景色等: `...

    利用freemarker根据数据库字段自动生成form表单代码

    本话题将详细探讨如何利用Freemarker模板引擎根据数据库字段自动生成form表单、DAO层和Service层的增删改查功能。 **1. Freemarker简介** Freemarker是一个开源的Java模板引擎,它允许开发者使用特定的模板语言...

    解决layui的form里的元素进行动态生成,验证失效的问题

    然而,需要注意的是,仅仅完成数据的模板渲染并更新到DOM中,并不能自动触发layui表单验证。因此,除了更新DOM,还必须重新渲染表单,这需要调用`form.render()`方法,而不是`element.render()`。 当动态添加的表单...

    form.js表单验证插件

    这不是在吹嘘,而是在解决这个表单验证的问题上投入了太多的时间与心血,我想其足够能满足你的各种验证需求,正常表单和无&lt;form&gt;包裹的表单均可自动分组绑定、勿须在DOM上加额外属性、规则可动态增删改、极少的API...

    php curl模仿form表单提交图片或文件

    在本文中,我们将深入探讨如何使用PHP的cURL库来模仿form表单提交,特别是提交图片或文件。我们将结合ThinkPHP5(简称TP5)框架来展示一个实际的例子。 首先,了解cURL。cURL是一个客户端URL传输库,它支持多种协议...

    Form 动态表单demo

    一个动态表单(Dynamic Form)允许根据用户需求或特定场景自动生成或改变表单的结构和内容。本“Form动态表单demo”提供了一个简单的实例,帮助开发者了解如何创建和管理动态表单。 在描述中,作者提到这是一个个人...

    AngularJs demo 例子(表单验证) form

    本示例以"AngularJs demo 例子(表单验证)form"为主题,结合bootstrap美化,展示了如何在AngularJS中实现表单验证。 **1. AngularJS 表单基础** 在AngularJS中,表单是由`&lt;form&gt;`标签定义的,可以通过`ngForm`或`...

    Vue+Element实现动态生成新表单并添加验证功能

    通常在&lt;el-form-item&gt;组件中通过rules属性来定义验证规则。这些验证规则可以是简单的如必填校验(required),也可以是复杂的自定义校验(validator)。每一条验证规则通常包含触发时机(trigger)、错误消息...

    表单自动验证 javascript

    本文将深入探讨如何使用 JavaScript 进行表单自动验证。 一、基础知识 1. 表单元素:HTML 中的 `&lt;form&gt;` 元素用于创建表单,而 `&lt;input&gt;`、`&lt;textarea&gt;`、`&lt;select&gt;` 和 `&lt;button&gt;` 等元素则用于构建输入字段和...

    asp.net的Form验证

    在VS2012中,我们可以直接在设计视图中拖放这些验证控件到表单中,并配置相应的属性来设定验证规则。例如,对于用户名和密码,我们可以使用RequiredFieldValidator确保它们非空,使用RegularExpressionValidator检查...

Global site tag (gtag.js) - Google Analytics