html中表单验证,javascript实现表单验证

　　HTML5为表单元素提供了一个patern属性，它接受正则表达式。提交表单时，这个正则表达式将用于验证表单中的非空值。如果控件的值与这个正则表达式不匹配，将弹出一个提示框，并阻止提交表达式。可以使用setCustomValidity方法自定义提示框中的文本。

　　比如下面的表格，文本框只接受大陆的手机号，其他的东西不能提交。

　　奔跑

　　XML/HTML代码将内容复制到剪贴板！Doctype HTML表单输入id= text pattern= 1 [3-9] \ d {9} $ 必需/input id= button type= submit /form请注意，只有非空表单才会使用常规验证。如果未输入任何内容，将不会使用该模式，因此需要required的帮助。但是这段代码弹出的提示是：

　　这样的提示词只有猴子能听懂！所以我们还需要更友好的提示文本，这是由setCustomValidity方法定义的。

　　奔跑

　　XML/HTML代码将内容复制到剪贴板！DOCTYPEhtml表单inputid=textpattern=^1[3-9]\d{9}$required/input id= button type= submit //表单脚本text . on input=function(){ text . setcustomvalidity()；};text . on invalid=function(){ text . setcustomvalidity(请不要输入火星的手机号码？);};/脚本

　　无效事件会在表单的提交事件之前触发，如果验证失败则不会触发表单的提交。提交时，将验证所有表单元素是否有效。除了提交之外，还可以手动调用checkValidity方法来执行验证。

　　在上面的例子中，我直接给控件设置固定的提示其实不太好。有时，可能需要更详细的提示信息，例如，提示为空时为空，过长时为过长，非数值时为非数值等。这些动作可以通过程序验证后动态设置setCustomValidity来实现。

　　其实我觉得HTML5的这个API设计的很烂。虽然能满足基本要求，但是真的不是很实用。

　　在手机页面会弹出JavaScript提交的信息，用户体验很差。所以再举一个手机上HTML5属性验证的例子：

　　XML/HTML将内容编码到剪贴板inputid= name name= name placeholder= name required= tabindex= 1 type= text inputid= email name= email placeholder= telephone 必选red=tabindex=2type=textpattern=(^(\d{3,4}-)？\ d {7，8 })$ (13 15 18 14)\ d { 9 } $ input= subject HTML= subject placeholder= example @ domain . com required= tabindex= 2 type=当输入字段为空时将显示提示，当该字段获得//的焦点时将消失。/2.required属性规定在提交之前必须填写输入字段。//3.pattern是正则表达式，正则表达式可以直接填写。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。