本文目录
- html5中所有表单验证能不能再不提交前就验证
- html5正则表达式 怎么验证表单
- html5怎么用js提交，触发表单验证
- HTML5中表单内置验证规则是什么，有哪些内置验证规则呢
- HTML5 表单多条件验证问题
html5中所有表单验证能不能再不提交前就验证
要看你的验证规则，如果只是对输入数据的格式上验证，完全可以在html里写js验证，更何况html5提供的新标签有一定的验证功能；但是如果要验证数据是否有重复，就必须要提交后才能验证。
html5正则表达式 怎么验证表单
通过CSS伪类设置表单的验证规则主要的思路如下： 1、 首先我们要表单设置验证规则 2、 设置验证消息 3、 用CSS伪类来控制验证消息，或者控制input元素的样式来提示用户进行输入。 下面我们以这个思路来写一个小小的示例来以供参考
html5怎么用js提交，触发表单验证
在表单最后放置一个button，然后在button的click事件中通过表单dom对象.submit()来提交表单，在提交前可以编写校验逻辑或者使用jquery validate之类的表单校验组件来校验
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=“/^+$/" 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 表单多条件验证问题
1.输入型控件Input type 用途 说明email 电子邮件地址文本框url 网页URL文本框number 数值的输入域 属性 值 描述max number 规定允许的最大值min number 规定允许的最小值step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）value number 规定默认值range 特定值的范围的数值，以滑动条显示 属性 值 描述max number 规定允许的最大值min number 规定允许的最小值step number 规定合法的数字间隔（如果 step="3"，则合法的数是 -3,0,3,6 等）value number 规定默认值Date pickers 日期，时间选择器 仅Opera9+支持，包含date, month, week, time, datetime, datetime-localsearch 用于搜索引擎，比如在站点顶部显示的搜索框 与普通文本框用法一样，只不过这样更语文化color 颜色选择器 仅Opera支持将原本type为text的input控件声明为以上特殊类型，是为了给用户呈现不同的输入界面（移动平台上支持这些不同的输入界面，这里就不细说），而且表单提交时会对其值做进一步的验证。下面展示这些新表单元素，请用支持这些表单元素的浏览器查看，IE对其支持最差。E-mail: date:range: number: color: 2. 表单新特性和函数2.1 placeholder当用户还没有输入值时，输入型控件可能通过placeholder向用户显示描述性说明文字或者提示信息，这在目前网站中很常见，一些JS框架都会提供类似功能，简单的说下在旧版本中常用的解决方案，为输入控件创建一个label，然后通过CSS控制些label的位置使之覆盖在输入控件上面，当label获得焦点时，浏览器会把焦点指向输入控件。不过有了placeholder，新的浏览器就内置了这一功能，其特性值会以浅灰色样式显示在输入框中，当输入框获得焦点并有值后，该提示信息自动消失。如：《p》《label for="runnername"》Runner:《/label》 《input id="runnername"name="runnername" type="text" placeholder="First and last name" /》 《/p》Runner: 2.2 autocomplete其实在IE6中,autocomplete就已经实现，不过现在这一特性终于标准化了，浏览器通过autocomplete特性能够知晓是否应该保存输入值以备将来使用，autocomplete应该用一保护用户敏感数据，避免本地浏览器对它们进行不安全的存储。类型 作用on 该字段无需保护，值可以被保存和恢复off 该字段需要保护，值不可以保存unspecified 包含《form》的默认设置，如果没有被包含在表单中或没有指定值，则行为表现为on如：《form action="" method="get" autocomplete="on"》Name:《input type="text" name="name" /》《br /》E-mail: 《input type="email" name="email" autocomplete="off" /》《br /》《input type="submit" /》《/form》当用户提交过一次表单后，再次访问，name的输入框会提示你曾输入的值，而email则不会提示。2.3 autofocus页面载入时，我们通过autofocus指定某个表单元素获得焦点，但每个页面只允许出现一个autofocus，如果设置多个则相当于未指定些行为。目前Opera10,Chromet和Safari浏览器支持。如果用户有希望焦点转移的情况下，使用使用autofocus会惹恼用户。2.5 list特性和datalist通过使用list，开发人员能够为某个输入型控件构造一个选值列表，其使用方法：Webpage: 《input type="url" list="url_list" name="link" /》《datalist id="url_list"》***隐藏网址******隐藏网址******隐藏网址***《/datalist》Webpage: 请在Opera9+或Firefox10+浏览器中查看。2.6 requiredrequired 属性规定必须在提交之前填写输入域（不能为空）。它是表单验证最简单的一种方式方法，使用方法：Name: 《input type="text" name="usr_name" required="required" /》2.7 patternpattern 属性规定用于验证 input 域的模式（pattern），模式（pattern） 是正则表达式。那些type为email或url的输入控件内置相关正则表达式，如果value不符合其正则表达式，那表单将通不过验证，无法提交。使用方法：Country code: 《input type="text" name="country_code"pattern="{3}" title="Three letter country code" /》2.8 novalidatenovalidate 属性规定在提交表单时不应该验证 form 或 input 域。如：《form action="demo_form.asp" method="get" novalidate="true"》E-mail: 《input type="email" name="user_email" /》《input type="submit" /》《/form》3. 表单验证表单验证是一套系统，它为终端用户检测无效的数据并标记这些错误，是一种用户体验的优化，让web应用更快的抛出错误，但它仍不能取代服务器端的验证，重要数据还要要依赖于服务器端的验证，因为前端验证是可以绕过的。目前任何表单元素都有八种可能的验证约束条件：名称 用途 用法valueMissing 确保控件中的值已填写 将required属性设为true，《input type="text"required="required"/》typeMismatch 确保控件值与预期类型相匹配 《input type="email"/》patternMismatch 根据pattern的正则表达式判断输入是否为合法格式 《input type="text" pattern="{12}"/》toolong 避免输入过多字符 设置maxLength，《textarea id="notes" name="notes" maxLength="100"》《/textarea》rangeUnderflow 限制数值控件的最小值 设置min，《input type="number" min="0" value="20"/》rangeOverflow 限制数值控件的最大值 设置max，《input type="number" max="100" value="20"/》stepMismatch 确保输入值符合min,max,step的设置 设置max min step，《input type="number" min="0" max="100" step="10" value="20"/》customError 处理应用代码明确设置能计算产生错误 例如验证两次输入的密码是否一致，等会DEMO细说下面展现浏览器自带的验证功能请在Chrome、Opera或Firefox中查看：源代码：《form name="register1" id="register1"》 《p》《label for="runnername"》RunnerName:《/label》 《input id="runnername"name="runnername" type="text" placeholder="First and last name" required="required" autofocus="autofocus"/》 《/p》 《p》《label for="phone"》Tel #:《/label》 《input id="phone" name="phone" type="text" pattern="\d{3}-\d{4}-\d{4}" placeholder="xxx-xxxx-xxxx"/》《/p》 《p》《label for="emailaddress"》E-mail:《/label》 《input id="emailaddress" name="emailaddress" type="email" placeholder="For confirmation only"/》《/p》 《p》《label for="dob"》DOB:《/label》 《input id="dob" name="dob" type="date" placeholder="MM/DD/YYYY"/》《/p》 《p》Count:《input type="number" id="count" name="count" min="0" max="100" step="10"/》《/p》 《p》《label for="style"》Shirt style:《/label》 《input id="style" name="style" type="text" list="stylelist" title="Years of participation" autocomplete="off"/》《/p》 《datalist id="stylelist"》 《option value="White" label="1st Year"/》 《option value="Gray" label="2nd - 4th Year"/》 《option value="Navy" label="Veteran (5+ Years)"/》 《/datalist》 《fieldset》 《legend》Expectations:《/legend》 《p》 《label for="confidence"》Confidence:《/label》 《input id="confidence" name="level" type="range" onchange="setConfidence(this.value)" min="0" max="100" step="5" value="0"/》 《span id="confidenceDisplay"》0%《/span》《/p》 《p》《label for="notes"》Notes:《/label》 《textarea id="notes" name="notes" maxLength="100"》《/textarea》《/p》 《/fieldset》 《p》《input type="submit" name="register" value="Submit" onclick=" checkForm()"/》《/p》 《/form》
