html5表单非空验证（form表单非空验证）

今天给各位分享html5表单非空验证的知识，其中也会对form表单非空验证进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

微信号：cloud7591
如需了解更多，欢迎添加客服微信咨询。
复制微信号

本文目录一览：

• 1、如何调用html5表单验证提示
• 2、html5表单失去焦点进行非空验证，并用placeholder显示错误提示
• 3、HTML5中表单内置验证规则是什么，有哪些内置验证规则呢？
• 4、HTML5中表单验证的好处
• 5、html5实现 input必须为手机号且非空的验证方法

如何调用html5表单验证提示

HTML5加强了表单验证功能，可验证是否可空及输入内容的类型及格式，并可通过为表单或控件设置 novalidate 属性指定在提交表单时不验证整个 form 或指定的input。

例：

form action="demo_form.asp" method="get" novalidate="false"

input type="text" name="user_name" required novalidate="true"/

input type="number" name="user_age" /

input type="submit" /

/form

END

INPUT验证

INPUT 标签中通过 type属性指定输入内容类型：

email，指定输入内容为电子邮件地址。

url，指定输入内容为URL。

number，指定输入内容为数字，并可通过 min、max、step 属性指定最大最小及间隔。

date、month、week、time、datetime、datetime-local 指定输入内容为相应日期相关类型。

color，指定控件为颜色选择器。

例：input id="u_email" name="u_email" type="email"/

END

其它验证

1

required 属性指定输入内容不可为空。

pattern 属性指定输入内容必须符合指定模式（正则表达式）。

例：

input id="phone_num" name="phone_num" type="text" pattern="\d{3}-\d{4}-\d{4}" placeholder="xxx-xxxx-xxxx"/

html5表单失去焦点进行非空验证，并用placeholder显示错误提示

简单改了下你的，效果实现了，规范的写法自己改改吧

!DOCTYPE html  

html  

head  

    meta charset="UTF-8"/  

    titlecheckValidity 示例/title 

    style

      input.dd::-webkit-input-placeholder{

          color: red;

          opacity:1;

      } 

    /style

/head  

body 

form action="" method="get"

table width="200%" border="0" cellspacing="0" cellpadding="0" 

  tr

    tdinput class='' id='id' name="uname" type="text" placeholder="ID" onblur="aa(this)"/td

  /tr

  tr

    tdinput name="pwd" type="password" placeholder="密码"/td

  /tr

  tr

    tdinput name="" type="submit"/td

  /tr

/table

/form

script 

  function aa(a){

      if(a.value==''){

        a.placeholder='ID不能为空';

       a.className="dd";

      }

  }

/script

/body  

/html

HTML5中表单内置验证规则是什么，有哪些内置验证规则呢？

在HTML5中内置了很多表单的验证规则，这些验证规则会根据用户在input元素中输入的内容返回一个布尔值来告诉我们表单验证的状态。下面我们就来列举一些我们比较常用的内置验证规则吧：

ValueMising规则

示例：input type="text" required value=""

目的：确保表单控件(input元素在页面中是以一个控件的形式呈现的)中的值已填写。

用法：在表单控件中将required属性设置为true。因为required属性的默认值为true所以如示例中所示：在input元素中接添加required属性也是可以的。

详细说明：如果表单控件设置了required特性，那么在用户填写或者通过代码调用方式填值之前，控件会一直处于无效状态。例如，在示例中我们设置该控件的值为空，空的文本输入框无法通过必填检查，除非在其中输入任意文本。输入值为空时，valueMissing会返回true。表示没有通过验证。

typeMismatch规则

示例：input type=“url” value=“miaomiaoxue”/

目的：保证控件值与预期类型相匹配(如numbe、email、URL等)。

用法： 指定表单控件的type特性值为numbe、email、URL等规定文本输入规则的类型。

详细说明: 特殊的表单控件类型不只是用来定制手机键盘,如果浏览器能够识别出来表单控件中的输入不符合对应的类型规则,比如email地址中没有@符号，或者number型控件的输入值不是有效的数字，示例中URL型的空间不是一个标准的链接格式。那么浏览器就会把这个控件标记出来以提示类型不匹配。无论哪种出错情况，typeMismatch将返回true。表示没有通过验证。

patternMismatch规则

示例：input type="text" pattern=“/^[A-z]+$/" value=“1234“/

目的：根据表单控件上设置的格式规则验证输入的文本是否为有效格式

用法：在表单控件上设置pattern特性，井赋予适当的匹配规则。

详细说明：pattern特性向开发人员提供了一种强大而灵活的方式来为表单的控件值设定正则表达式验证机制。当为控件设置了pattern特性后，只要输入控件的值不符合模式规则，如示例中设定的正则表达式规则该控件的值含有字母和$符号，这里设置的值为1234，不符合规则设定，因此patternMismatch就会返回true值。从引导用户和技术参考两方面考虑，

你应该在包含pattern特性的表单控件中设置title特性以说明规则的作用。

tooLong规则

示例：input type=“text” maxlength=“3” value=“hello“/

目的：避免输入值包含过多字符。

用法：在表单控件上设置maxLength特性。

详细说明：如果输入值的长度超过maxLength，示例中最大限制设置为3，但值为hello，操过了3个字符的限制，tooLong规则就会返回true。虽然表单控件通常会在用户输入时限制最大长度，但在有些情况下，如通过程序设置，还是会超出最大值。

rangeUnderflow规则

示例：input type=“text” min=“3” max=“5” value=“0" /

目的：限制数值型控件的最小值。

用法：为表单控件设置min属性，并赋予允许的最小值。

详细说明：在需要做数值范围检查的表单控件中，数值很可能会暂时低于设置的下限，如示例中设置的值为0，而设置的min属性为3。此时，rangeUnderflow属性将返回true。

rangeOverflow规则

示例：input type=“text” min=“3” max=“5” value=“7" /

目的：限制数值型控件的最大值。

用法：为表单控件设置max属性，并赋予允许的最大值。

详细说明：与rangeUnderflow类似，如果一个表单控件的值比max属性值更大，如示例中设置的值为7，而设置的max属性为5。此时，rangeOverflow属性将返回true。

stepMismatch规则

示例：input type=“text” min=“0” max=“100” step=“5” value=“17" /

目的：确保输入值符合min、max及step即设置。

用法：为表单控件设置step特性，指定数值的增量。

详细说明：此约束条件用来保证数值符合min、max和step的要求。换句话说，当前值必须是最小值与step属性值的倍数之和。如示例中设置的数值范围为0到100，step特性值为5，此时就不允许出现17，而可以是“0+5*X”X为（0~20）中任意一个值皆可。否则stepMismatch返回true值。

valid规则

示例：input type=“range” min=“5” max=“20” step=“5” value=“10" /

目的：验证表单控件是否满足所有的表单验证规则

用法：适用于所有的input表单控件。

详细说明：当该表单控件满足所有验证规则时，valid属性就是true，否则，只要有一项验证规则没通过，valid属性会返回false。如示例所示就满足所有验证条件所以valid属性会返回true。注意前面几个验证属性是没有通过的情况下返回true。推荐你去教程网站秒秒学上过一遍相关知识，希望对你有帮助。

HTML5中表单验证的好处

HTML5中表单验证有如下好处：

1、可判断用户是否已填写表单中的必填项目。

2、可判断用户输入的邮件地址是否合法。

3、可判断用户是否已输入合法的日期。

4、可判断用户是否在数据域(numeric field)中输入了文本。

表单验证通常采用策略模式的思想，把一个个验证规则封装成一个函数，比如非空规则、最大长度规则等，不同的输入框选择某一个或者某几个规则进行验证。

扩展资料：

HTML表单一直都是Web的核心技术之一，有了它才能在Web上进行各种各样的应用。HTML5 Forms新增了许多新控件及其API，方便做更复杂的应用，而不用借助其它Javascript框架。

表单有以下几个基本知识点：

1、表单仍是以form元素作为容器，可在其中设置基本的提交特性。

2、当用户提交页面时，表单仍然向服务器发送表单控件的值。

3、之前老版本中的表单控件，如text radio checkbox等等，都可以按原有方式使用，尽管增加了新的功能。

4、仍然可以使用javascript操作表单控件。

html5实现 input必须为手机号且非空的验证方法

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

title文哥讨厌IE/title

script language="javascript" type="text/javascript"

function checkMobile(str) {

    if(str==""){

        alert("手机号不能为空！");

    }

    else{

        var re = /^1\d{10}$/

        if (re.test(str)) {

            alert("正确");

        } else {

            alert("手机号格式错误！");

        }

    }

}

/script

/head

body

input type="text" id="btn_getNum"/

input type="button" value="得到数字" onclick="checkMobile(btn_getNum.value);"/

/body

/html

关于html5表单非空验证和form表单非空验证的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。