h5 - 表单验证validity属性

回复

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有帐号？立即注册

x

1. validity属性

* 通过该属性可以获取validityState对象

* validityState对象提供了一系列的有效状态

* 有效状态帮助完成表单验证

* 有效状态

* valid

* true - 表示验证通过

* false - 表示验证不通过

* valueMissing

* 作用 - 验证值是否为空

* 结果

* true - 表示值为空(错的)

* false - 表示值不为空(对的)

* 配合required属性一起使用

* patternMismatch

* 作用 - 验证是否匹配正则表达式

* 结果

* true - 表示不匹配

* false - 表示匹配

* 配合pattern属性一起使用

* typeMismatch

* 作用 - 验证元素类型是否匹配

* 结果

* true - 表示不匹配

* false - 表示匹配

* 配合email、url、number等元素使用

* tooLong

* 作用 - 验证元素值是否过长

* 结果

* true - 表示过长

* false - 表示正常

* 匹配maxlength属性一起使用

* rangeUnderflow

* 作用 - 验证元素值是否过小

* 结果

* true - 表示过小

* false - 表示正常

* 配合min属性一起作用

* stepMismatch

* 作用 - 验证步长是否匹配

* 结果

* true - 表示不匹配

* false - 表示匹配

* 配合step属性一起使用

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>有效状态</title>
</head>
<body>
<form>
用户名:<input id="user" type="text" required><br>
密码:<input id="pwd" type="text" pattern="^[0-9]{6,8}$"><br>
Email:<input id="mail" type="email"><br>
年龄:<input id="age" step="5" type="number" min="20"><br>
<input type="submit">
</form>
<script>
var user = document.getElementById("user");
user.onblur = function(){
if(user.validity.valid){
alert("验证通过.");
}else if(user.validity.valueMissing){
alert("用户名不能为空.");
}
}
var pwd = document.getElementById("pwd");
pwd.onblur = function(){
if(pwd.validity.valid){
alert("验证通过.");
}else if(pwd.validity.patternMismatch){
alert("密码输入有误.");
}
}
var mail = document.getElementById("mail");
mail.onblur = function(){
if(mail.validity.valid){
alert("验证通过.");
}else if(mail.validity.typeMismatch){
alert("Email输入有误.");
}
}
var age = document.getElementById("age");
age.onblur = function(){
if(age.validity.valid){
alert("验证通过.");
}else if(age.validity.rangeUnderflow){
alert("年龄过小.");
}else if(age.validity.stepMismatch){
alert("年龄有误.");
}
}
</script>
</body>
</html>

复制代码

效果：

* customError

* 作用 - 判断是否使用了setCustomValidity()方法

* 结果

* true - 表示使用了setCustomValidity()

* false - 表示没有使用

* 配合setCustomValidity()方法使用

* 自定义错误 - setCustomValidity()

* 当调用该方法时,customError为true

* 如果正确的话,将该方法的内容设置为空

例如：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>自定义错误提示</title>
</head>
<body>
<form>
<input id="data" type="text" pattern="^[0-9]{6}$" required>
<input type="submit">
</form>
<script>
var data = document.getElementById("data");
data.onblur = function(){
if(data.validity.valueMissing){
data.setCustomValidity("输入不能为空.");
}else if(data.validity.patternMismatch){
data.setCustomValidity("输入格式不正确.");
}else if(data.validity.customError){
data.setCustomValidity("");
}
}
</script>
</body>
</html>

复制代码

效果：

* 注意事项

* 使用HTML5中的验证属性的话,手动验证的逻辑不能编写在submit事件的处理函数中

* 当验证属性有效时,submit事件不被触发

用户注册验证案例：

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册</title>
</head>
<body>
<fieldset>
<legend>用户注册</legend>
<form>
<table>
<tr>
<td>用户名:</td>
<td><input id="user" type="text" required pattern="^[a-zA-Z]{6,12}$"></td>
</tr>
<tr>
<td>密码:</td>
<td><input id="pwd" type="text" required pattern="^[0-9]{6,8}$"></td>
</tr>
<tr>
<td>年龄:</td>
<td><input id="age" type="number" min="18" required></td>
</tr>
<tr>
<td>email:</td>
<td><input id="mail" type="email" required></td>
</tr>
<tr>
<td>个人主页:</td>
<td><input id="url" type="url" required></td>
</tr>
<tr>
<td>出生日期:</td>
<td><input id="birth" type="date" required></td>
</tr>
<tr>
<td></td>
<td><input type="submit" value="注册"></td>
</tr>
</table>
</form>
</fieldset>
<script>
/*
需求:
* 用户名 - 不能为空,长度在6至12之间,必须为英文
* 密码 - 不能为空,长度在6至8之间,必须为数字
* 年龄 - 不能为空,最小为18岁
* Email - 不能为空,格式正确
* 个人主页 - 不能为空,格式正确
* 出生日期 - 不能为空
要求:
* 所有判断必须使用验证属性和有效状态
* 如果验证不通过,使用setCustomValidity()方法设置自定义错误提示信息
* 事件使用失去焦点
*/
var user = document.getElementById("user");
user.onblur = function(){
if(user.validity.valueMissing){
user.setCustomValidity("用户名不能为空.");
}else if(user.validity.patternMismatch){
user.setCustomValidity("用户名必须是6至12之间的英文.");
}else if(user.validity.customError){
user.setCustomValidity("");
}
}
var pwd = document.getElementById("pwd");
pwd.onblur = function(){
if(pwd.validity.valueMissing){
pwd.setCustomValidity("密码不能为空.");
}else if(pwd.validity.patternMismatch){
pwd.setCustomValidity("密码必须为6至8之间的数字.");
}else if(pwd.validity.customError){
pwd.setCustomValidity("");
}
}
var age = document.getElementById("age");
age.onblur = function(){
if(age.validity.valueMissing){
age.setCustomValidity("年龄不能为空.");
}else if(age.validity.rangeUnderflow){
age.setCustomValidity("年龄过小.");
}else if(age.validity.customError){
age.setCustomValidity("");
}
}
var mail = document.getElementById("mail");
mail.onblur = function(){
if(mail.validity.valueMissing){
mail.setCustomValidity("Email不能为空.");
}else if(mail.validity.typeMismatch){
mail.setCustomValidity("Email的格式有误.");
}else if(mail.validity.customError){
mail.setCustomValidity("");
}
}
var url = document.getElementById("url");
url.onblur = function(){
if(url.validity.valueMissing){
url.setCustomValidity("url不能为空.");
}else if(url.validity.typeMismatch){
url.setCustomValidity("url的格式有误.");
}else if(url.validity.customError){
url.setCustomValidity("");
}
}
var birth = document.getElementById("birth");
birth.onblur = function(){
if(birth.validity.valueMissing){
birth.setCustomValidity("请选择你的出生日期.");
}else if(birth.validity.customError){
birth.setCustomValidity("");
}
}
</script>
</body>
</html>

复制代码

效果：

oaks · 发表于 2016-2-28 18:01:59

其实我一直觉得楼主的品味不错！呵呵！

muerder · 发表于 2016-2-28 20:15:24

社区不能没有像楼主这样的人才啊！

[HTML5开发] h5 - 表单验证validity属性

[HTML5开发] h5 - 表单验证validity属性

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

阅读推荐

用微信扫一扫