HTML5输入验证API

这些东西都要放在form里写用submit button提交才可以作用

required属性 

 1     <form>
 2         <input type="text" name="username"/>
 3         <input type="submit" />
 4     </form>
 5     <script type="text/javascript" src="jquery.js"></script>
 6     <script type="text/javascript">
 7         var isUsernameRequired = document.forms[0].elements[‘username‘].required;
 8         alert(isUsernameRequired); //字段是否有required检验
 9
10         var isRequiredSupport = ‘required‘ in document.createElement(‘input‘);
11         alert(isRequiredSupport);   //浏览器是否支持验证
12     </script>

email,url,chrome支持的不好

数值范围也支持地不好

pattern可以,其检测有效性方式和required一样

时间: 2024-08-01 13:59:50

HTML5输入验证API的相关文章

教程:让你的表单升级到CSS3和HTML5客户端验证

今天我们一起来看看如何创建一个实用并且功能强大的表单,表单使用如今最热门的技术HTML5和css3来创建,并且可以通过HTML5进行客户端验证. 查看预览下载附件 第一步:策划表单功能 首先,我们得为我们的表单策划一下该有什么功能,用什么形式表现.在这个示例中,我们就制作一个比较简单的留言表单.需要的功能如下: 名称 电子邮件 网站地址 提交按钮 我们都希望用户能够填写正确的信息再提交,要实现这一点,我们可以使用HTML5客户端验证新技术.那怎么样使用这个功能呢?在这里简单的使用服务器验证,不做

HTML5程序设计 Canvas API

检测浏览器支持情况 <script type="text/javascript"> try { document.createElement("Canvas").getContext("2d"); document.getElementById("support").innerHTML = "OK"; } catch (e) { document.getElementById("sup

Struts2之输入验证

摘要:Struts2提供了安全的服务器验证方法,使用action中的validate方法即可 下面将展现简单的输入验证怎么写 1,表单index.jsp代码如下: 1 <%@ page language="java" import="java.util.*" pageEncoding="GBK" contentType="text/html; charset=GBK"%> 2 <%@ taglib uri=&

Yii学习笔记之四(表单验证 api 翻译)

1.表单验证 对于用户输入的所有数据,你不能信任,必须加以验证. 所有框架如此,对于yii 可以使用函数 yii\base\Model::validate()  进行验证 他会返回boolean值的 true /false 如果验证未通过,可以使用 yii\base\Model::$errors 属性进行处理,如下代码: <?php //加载表单模型(绝对地址方式) /*如果上面引入 use app\models\ContactForm; 则可以直接使用 $model = new Contact

HTML5 文件拖放API讲解

本章向大家讲解一下HTML 5中文件API与拖放API的使用方法.HTML5的文件API,可以在浏览器中直接显示客户端文件的信息或文件中的内容,而通过拖放API,可以直接将位于客户端中的文件拖动到浏览器中,也可以单独拖动页面中的元素或者元素中的内容. HTML5拖拽文件预览效果图: 在线演示 以前,我们使用file控件,单击上传按钮后选择计算机中的文件.在HTML5中,我们可以先将计算机中的文件直接拖动到浏览器中进行预览,确定文件是我们所需要的,然后单击上传按钮将该文件上传到服务器端. 我们使用

在struts2框架中实现手动处理输入验证

在struts2框架中实现手动处理输入验证,只需要在Action中对父类ActionSupport的validate方法重写即可.就是讲输入验证逻辑写在validate方法中.下面看项目中的Action类checkUser.java package action; import java.util.regex.Matcher; import java.util.regex.Pattern; import com.opensymphony.xwork2.ActionSupport; public

使用BootStrapValidator来完成前端输入验证

ootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证,由于本插件完全基于BootStrap因此可以和UI完美的融合在一起.下面直接上图,看看完成后的结果: 怎么样,还比较和谐把,当然你也可以修改默认样式,让它的显示方式更加美观. 下面来说说他的用法: 下载BootStrapValidator 你可以点击BootStrapValidator官方下载地址来下载它. 下载后的目录结构 下载完成后,如果是全部文件的化,目录结构如下: 其中可以直接在项目中使用的文

用HTML5的File API做上传图片预览功能

用HTML5的File API做上传图片预览功能 前几天做了一个项目,涉及到上传本地图片的功能,正好之前了解过 html5 可以上传本地图片,然后再网上看了一些demo结合自己的需求,终于搞定了.(PS : 不得不承认我这个人有多懒,没有需求的时候我向来不主动去学习).移动端完全支持哦!已测试. 下面给大家看看代码吧怎么实现的 第一:HTLM部分(这里不去做漂亮的样式了我们注重学习功能) <input type="file" id="fileElem" mul

用户输入验证的集总

1 一.用户输入验证 2 1.编程方式: 3 动作类中的所有方法进行验证: 4 5 步骤: 6 a.动作类继承ActionSupport 7 b.覆盖调用public void validate()方法 8 c.在validate方法中,编写不符合要求的代码判断,并调用父类的addFieldError(String fieldName,String errorMessage) 9 如果fieldError(存放错误信息的Map)有任何的元素,就是验证不通过,动作方法不会执行. 10 Struts