1.css3 提示只适用于高级浏览器:

  Chrome,Firefox,Safari,IE9+

  valid、invalid、required的定义

  代码如下:

  input:required, input:valid , input:invalid{border:0 none; outline: 0 none; -webkit-box-shadow:none; -moz-box-shadow:none; -ms-box-shadow:none; -o-box-shadow:none; box-shadow: none;}

  过去验证表单会通过js和正则去判断填写的内容是否正确,如email的验证。

  HTML5的出现为我们提供一些属性,不用编写js和正则即可解决这个检验表单内容。

  :required

  必须,那input不能为空的意思。

  :valid

  有效,即当填写的内容符合要求的时候触发。

  :invalid

  无效,即当填写的内容不符合要求的时候触发。

2.novalidate = novalidate 不提交表单

3.setCustomValidity()设置提示的内容

h5表单验证的css和js方法的更多相关文章

  1. jQuery插件 -- 表单验证插件jquery.validate.js, jquery.metadata.js

    原文地址:http://blog.csdn.net/zzq58157383/article/details/7718352   最常使用JavaScript的场合就是表单的验证,而jQuery作为一个 ...

  2. jQuery插件 -- 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  3. 表单验证插件jquery.validate.js

    最常使用JavaScript的场合就是表单的验证,而jQuery作为一个优秀的JavaScript库,也提供了一个优秀的表单验证插件----Validation.Validation是历史最悠久的jQ ...

  4. H5: 表单验证失败的提示语

    前言     前端的童鞋在写页面时, 都不可避免的总会踩到表单验证这个坑. 这时候, 我们就要跪了, 因为要写一堆js来检查. 但是自从H5出现后, 很多常见的表达验证, 它都已经帮我们实现了, 让我 ...

  5. 表单验证插件 jquery.validata 使用方法

    参考资料:http://www.runoob.com/jquery/jquery-plugin-validate.html 下载地址 jquery.validate插件的文档地址http://docs ...

  6. jquery validate表单验证插件的基本使用方法及功能拓展

    1 表单验证的准备工作 在开启长篇大论之前,首先将表单验证的效果展示给大家.    1.点击表单项,显示帮助提示 2.鼠标离开表单项时,开始校验元素 3.鼠标离开后的正确.错误提示及鼠标移入时的帮助提 ...

  7. jQuery表单验证插件——jquery.validate.js

    官网地址:http://bassistance.de/jquery-plugins/jquery-plugin-validation 一.导入js库 <script src="../j ...

  8. 表单验证控件Verify.js

    自己工作常用到表单录入验证,就顺手写了一个验证控件,刚开始写得很烂.多年后翻出来,又优化了一下,增加了一些功能.拿出来分享分享. 主要功能就是表单的录入验证. * 1.当录入框必填时,在控件后生成红色 ...

  9. jquery表单验证插件 jquery.form.js ------转载

    Form插件,支持Ajax,支持Ajax文件上传,功能强大,基本满足日常应用. 1.JQuery框架软件包下载 文件: jquery.rar 大小: 29KB 下载: 下载 2.Form插件下载 文件 ...

随机推荐

  1. Codeforces C The Game of Efil (暴力枚举状态)

    http://codeforces.com/gym/100650 阅读题,边界的cell的邻居要当成一个环形的来算,时间有8s,状态最多2^16种,所以直接暴力枚举就行了.另外一种做法是逆推. #in ...

  2. PAT (Basic Level) Practise (中文)-1033. 旧键盘打字(20)

    PAT (Basic Level) Practise (中文)-1033. 旧键盘打字(20)  http://www.patest.cn/contests/pat-b-practise/1033 旧 ...

  3. ueditor1.4.3.all.js报错

    .replace( /<[^>/]+>/g, '' ) 转义符问题! 修改为: .replace( /<[^>\/]+>/g, '' )

  4. Bootstrap 网格系统(Grid System)实例4

    Bootstrap 网格系统(Grid System)实例4:中型和大型设备 <!DOCTYPE html><html><head><meta http-eq ...

  5. Git学习之路

    目录 git安装 linux windows git命令 创建版本库 提交文件 仓库状态 版本回退 工作区和暂存区 工作区 暂存区 推送.下拉和克隆 推送 下拉 克隆 git应该可以说是程序员必备技能 ...

  6. json数据格式 与 for in

    格式一: var json1={ name:'json', age:'23' }; json1.name='金毛'; 格式二: (比较安全)  属性名字里有空格或者有连字符‘-’或者有保留字例如‘fo ...

  7. find 命令search使用

    GNU在目录树中查找的时候,是根据所给的名字从根节点开始从左到右匹配.根据优先级规则,直到在某一个节点找到结果了才会移动到下一个文件名字. 1.找空目录 find  ./path -depth -ty ...

  8. PyQt5(2)、垃圾分类小程序(2)——初代窗口程序可执行文件

    又是一天时间(又没做大作业).今天的心路历程:(1)前端后端怎么连接?(2)后端数据库插数据(3)完全没用上之前的字典反查法(4)突然发现面向对象编程其实很好用,甚至越用越上瘾(5)QLineEdit ...

  9. Python爬虫-字体反爬-猫眼国内票房榜

    偶然间知道到了字体反爬这个东西, 所以决定了解一下. 目标:  https://maoyan.com/board/1 问题: 类似下图中的票房数字无法获取, 直接复制粘贴的话会显示 □ 等无法识别的字 ...

  10. H.264 Profile-level-id

    基于SIP协议的VOIP通信,该字段通常位于视频协商sdp报文中,如: video RTP/AVP rtpmap: H264/ fmtp: profile-level-id=42801E; packe ...