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. Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured.Reason: Failed to determine a suitable driver class

    解决方案: @SpringBootApplication(exclude = DataSourceAutoConfiguration.class) 作用://取消数据库配置 但是 在用到数据库的时候记 ...

  2. JavaScript中数据类型和typeof返回的数据类型

    除了上图,要注意三点:1.symbol是ES6中新增的数据类型 2.typeof(null)结果是Object 3.typeof(Object)和typeof(Array)的结果是function,因 ...

  3. Bootstrap历练实例:分页的大小

    分页的大小 下面的实例演示了上表中所讨论的 class .pagination-* 的用法: <!DOCTYPE html><html><head><meta ...

  4. [LUOGU] P2330 [SCOI2005]繁忙的都市

    题目描述 城市C是一个非常繁忙的大都市,城市中的道路十分的拥挤,于是市长决定对其中的道路进行改造.城市C的道路是这样分布的:城市中有n个交叉路口,有些交叉路口之间有道路相连,两个交叉路口之间最多有一条 ...

  5. 【OS_Linux】yum命令安装软件

    1.YUM的简介 Yum(全称为 Yellow dog Updater, Modified)是一个rpm包管理器.它能够从指定的服务器上自动下载RPM包并安装,可以自动处理包之间的依赖性关系,并且一次 ...

  6. RN服务

    https://facebook.github.io/react-native/docs/headless-js-android.html 当app在 后台运行 时,我们可以使用RN服务来同时地刷新数 ...

  7. python基础知识13-迭代器与生成器,导入模块

    异常处理作业讲解 file = open('/home/pyvip/aaa.txt','w+') try: my_dict = {'name':'adb'} file.write(my_dict['a ...

  8. 细说unittest-2

    一.unittest模块官方文档: https://docs.python.org/3/library/unittest.html 二.一张图看懂unittest: 三.Unittest主要方法属性: ...

  9. linux下如何编译运行c程序

    GCC是Linux操作系统下一个非常重要的源代码编译工具,有着许多重要的选项,支持许多不同语言的编译,如C.C++.Ada.Fortran.Objective.Perl.Python.Ruby以及Ja ...

  10. luogu3759 [TJOI2017]不勤劳的图书管理员

    分块+权值逆序对 #include <algorithm> #include <iostream> #include <cstdio> #include <c ...