2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

HTML5开发-表单验证实例

Html5作者:猿2048志愿者

表单验证
element/form/_validate.html

<!doctype html>
<html>
<head>
<title>表单验证</title>
</head>
<body>

<!--
表单验证(Opera 支持此标准)

required - 指定是否为必填元素
pattern - 用指定的正则表达式对 input 的值做验证
url, email, number 等有验证功能的元素

element.validity - 返回验证状态,ValidityState 对象
ValidityState - 验证状态对象
valid - 是否通过了验证(以下 8 个值都为 false,则此值为 true),boolean 类型
valueMissing - 是否没有值(对应的元素如果设置为必填但没有值的时候,此值为 true),boolean 类型
typeMismatch - 是否值的类型与期望类型不匹配,boolean 类型
patternMismatch - 是否正则表达式验证失败,boolean 类型
tooLong - 是否字符过多,boolean 类型
rangeUnderflow - 是否比预设的最小值还要小,boolean 类型
rangeOverflow - 是否比预设的最大值还要大,boolean 类型
stepMismatch - 是否不匹配 step 的设置(比如 step 为 3,那么如果值要匹配 step 的话,则一定要为 3 的倍数),boolean 类型
customError - 是否有自定义错误信息,boolean 类型

element.setCustomValidity("错误信息") - 用于指定自定义的错误信息
element.setCustomValidity("") - 用于清除自定义的错误信息
-->

<form action="#">
<input type="text" name="txt" id="txt" required />
<input type="email" name="email" id="email" />
<input type="submit" name="btn" value="submit" />

<br />
<input type="button" value="验证 email 元素" onclick="validateEmail();" />
</form>

<script遇新是直朋能到 type="text/javascript">

function validateEmail() {
var email = document.getElementById("email");
var validityState = email.validity;

alert
(
validityState.valid
+ "\n" +
validityState.valueMissing
+ "\n" +
validityState.typeMismatch
+ "\n" +
validityState.patternMismatch
+ "\n" +
validityState.tooLong
+ "\n" +
validityState.rangeUnderflow
+ "\n" +
validityState.rangeOverflow
+ "\n" +
validityState.stepMismatch
+ "\n" +
validityState.customError
);
}

</script>

</body>
</html>
本文来源于网络:查看 >
« 上一篇:HTML5中的常用表单元素使用例子
» 下一篇:html5开发-文本框和密码框标签的使用
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
相关博文
×添加代码片段