我们可以给表单元素添加required,pattern属性,还有根据具体元素类型决定的Measureable属性,如:min,max等。

required:表示必填。

pattern:一般用于type为text的元素,可以是任意的正则表达式。

ID Number: <input type="text" name="idNumber"
pattern="\d{5}" required="required"
placeholder="enter your 5 digit id number"/>

Measureable不是指一个属性,是指特定type值的元素的一类属性,如:

type为number的有min,max。

<form autocomplete="on">
Number(between 1 and 5):<input type="number" min="1" max="5" required/>
<input type="submit"/>
</form>

type为email的会默认按照email的严格格式验证。

<form autocomplete="on">
Email:<input type="email" required/>
<input type="submit"/>
</form>

验证email的正则表达式可能是这样的:

/^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/

通过setCustomValidity()方法添加定制的错误消息提示内容,如下图:

此外还可以通过以下伪类对元素进行修饰:

:required 标识被标记为required的元素。

:invalid 标识被标记为invalid的元素。

novalidate属性可以让表单跳过验证直接提交

不使用JS实现表单验证的更多相关文章

  1. ★★★【卡法 常用js库】: js汇合 表单验证 cookie设置 日期格式 电话手机号码 email 整数 小数 金额 检查参数长度

    [卡法 常用js库]: js汇合 表单验证  cookie设置  日期格式  电话手机号码  email  整数  小数  金额   检查参数长度 // +---------------------- ...

  2. js基础-表单验证和提交

    基础知识: 原始提交如下: <form action="/login" method="post" id="form1"> &l ...

  3. JS通用表单验证函数,基于javascript正则表达式

    表单的验证在实际的开发当中是件很烦琐又无趣的事情今天在做一个小项目的时候,需要JS验证,寻找到一个比较好的东西 地址如下: http://blog.csdn.net/goodfunman/archiv ...

  4. JS简单表单验证

    这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...

  5. 表单提交学习笔记(二)—使用jquery.validate.js进行表单验证

    一.官网下载地址:http://plugins.jquery.com/validate/ 二.用法 1.在页面上进行引用 <script src="~/scripts/jquery-1 ...

  6. 原生js的表单验证

    最近在学原生的js,把一些练手的代码往博客放一放,权当积累经验,若有错漏,或是觉得浅显,大家不要见怪. 这是一个原生js编写的简单的表单验证: <!DOCTYPE html><htm ...

  7. js——form表单验证

    用js实现一个简易的表单验证 效果: 代码: <html> <head> <title>js校验form表单</title> <meta char ...

  8. 原生JS写表单验证提交功能

    先上效果图: 表单的基础内容就是昵称判断.手机号判断.邮箱判断.身份证号码判断,这里是用到正则验证检验格式. 页面的表单写法就是一个form的提交.输入框用input来实现,输入内容用value来获取 ...

  9. 原生js制作表单验证,基本的表单验证方法

    表单验证是web前端最常见的功能之一,也属于前端开发的基本功.自己完成一个表单验证的开发,也有助于加深对字符串处理和正则表达式的理解. 基本的表单验证包括如:字母验证.数字验证.字母和数字验证.汉字验 ...

  10. JS实战 · 表单验证

    思路:         1.定义页面             通过表格格式化表单:             表格行都有自己的背景颜色:             单元格中的数据(文本等)用div进行封装 ...

随机推荐

  1. Windows系统CMD常用命令大全

    命令简介 cmd是command的缩写.即命令行 . 虽然随着计算机产业的发展,Windows 操作系统的应用越来越广泛,DOS 面临着被淘汰的命运,但是因为它运行安全.稳定,有的用户还在使用,所以一 ...

  2. 【2019北京集训测试赛(十三)】数据(sj) 冷静分析

    题目大意:给你一个代表区间$[1,n]$的线段树,问你随机访问区间$[1,n]$中的一个子区间,覆盖到的线段树节点个数的期望(需要乘上$\frac{n(n-1)}{2}$后输出). 数据范围:$n≤1 ...

  3. [视频]K8飞刀 mysql注入点拿shell & UDF提权教程

    [视频]K8飞刀  mysql注入点拿shell & UDF提权教程 链接: https://pan.baidu.com/s/1a7u_uJNF6SReDbfVtAotIw 提取码: ka5m

  4. mongodb 语句和SQL语句对应(SQL to Aggregation Mapping Chart)

    SQL to Aggregation Mapping Chart https://docs.mongodb.com/manual/reference/sql-aggregation-compariso ...

  5. 博客维护停止,需要的伙伴们移步http://blog.csdn.net/panhouye

    两个博客的维护着实费心,方便大家共同学习.督促.进步.感兴趣的伙伴们移步CSDN博客:http://blog.csdn.net/panhouye,博客目录如下: 1.Android中通过实现线程更新P ...

  6. MariaDB 数据库

    1. MariaDB 介绍 MariaDB数据库管理系统是 MySQL 的一个分支,主要由开源社区在维护,采用GPL授权许可 MariaDB的目的是完全兼容MySQL,包括API和命令行,使之能轻松成 ...

  7. Hadoop项目实战-用户行为分析之编码实践

    1.概述 本课程的视频教程地址:<用户行为分析之编码实践> 本课程以用户行为分析案例为基础,带着大家去完成对各个KPI的编码工作,以及应用调度工作,让大家通过本课程掌握Hadoop项目的编 ...

  8. 高可用Hadoop平台-Ganglia安装部署

    1.概述 最近,有朋友私密我,Hadoop有什么好的监控工具,其实,Hadoop的监控工具还是蛮多的.今天给大家分享一个老牌监控工具Ganglia,这个在企业用的也算是比较多的,Hadoop对它的兼容 ...

  9. iOS开发(3):tips提示 | 如何提示一行文字或一个图片

    我有一个需求:在点击或长按某个按钮时,显示提示,包括简单的文字提示,还有复杂一点的图片甚至是动态图的提示(可能还要加上文字),怎么实现呢? (1)文字tips 使用之前介绍的qmuikit里面的QMU ...

  10. 通过证书请求Https站点

    前几天在做与平安银行对接接口,主要是给平安银行推送用户数据(申请贷款的用户),平安银行提供的是https的地址,请求https地址的时候还要发送证书,刚接到这个任务的时候一头雾水,百度上各种所搜,最后 ...