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. UVA1515 Pool construction (最小割模型)

    如果不允许转化'#'和'.'的话,那么可以直接在'#'和'.'之间连容量为b的边,把所有'#'和一个源点连接, 所有'.'和一个汇点连接,流量不限,那么割就是建围栏(分割'#'和'.')的花费. 问题 ...

  2. java 读取文件转换成字符串

    public String readFromFile(File src) { try { BufferedReader bufferedReader = new BufferedReader(new ...

  3. WPF中窗体在同一个位置实现不同页面切换

    要想在WPF窗体中实现不同页面切换,我们就需要用到ContentControl这个控件,这个控件的位置和大小就是你要显示页面的位置和大小. 下面举例说明: Xaml: <Grid> < ...

  4. 【page-monitor 前端自动化 中篇】 源码分析

    转载文章:来源(靠谱崔小拽) 上篇中初探了page-monitor的一些功能和在前端自动化测试方面的可行性,本篇主要分析下page-monitor的实现方式和源码. mode-module简介 pag ...

  5. HTTP协议重定向

    HTTP重定向:服务器无法处理浏览器发送过来的请求(request),服务器告诉浏览器跳转到可以处理请求的url上.(浏览器会自动访问该URL地址,以至于用户无法分辨是否重定向了.) 重定向的返回码3 ...

  6. CAP 可用性理解

    从容灾角度看可用性. 多机同时返回. 主通过 heart-beat 脑裂. 用 paxos. 性能远距离. 对整体压力较大. 从用户体验的角度看单数据可用性: 不考虑城市灾备的情况发生.只有单机房的 ...

  7. Java InputStream、String、File相互转化

    String --> InputStreamByteArrayInputStream stream = new ByteArrayInputStream(str.getBytes()); Inp ...

  8. vue+element UI如何导出excel表

    导出excel表应按如下规则 首先要先安装如下依赖 npm install --save xlsx npm install --save file-saver 接下在在你的代码中去引用这两个 impo ...

  9. JS设置组合快捷键

    为提升用户体验,想要在web页面中通过组合快捷键调出用户帮助页面,具体实现思路是监听keyup事件,在相应的处理函数中进行逻辑编写,代码如下 $(document).keyup(function (e ...

  10. GIMP素描效果

    1/打开图片,拖动图片到GIMP软件 2/复制两次图层 3/选中最上面的一个图层,mode改为Dodge 4/点击Color,选择Invert,可以看到图片变淡了 5/点击Filters,Distor ...