JavaScript DOM表单相关操作之表单验证
在大部分的情况下我们希望用户输入的数据是我们理想中的格式,尤其是在用户注册上,一些重要的信息我们是不允许用户乱写的,如手机号,邮箱等。接下来一起看几种表单验证的方式:
1、验证长度
验证长度是比较简单的,input标签元素的maxlength属性可以设置可输入的最大长度
// 用maxlength属性验证
<form>
姓名:<input type="text" maxlength="10">
</form>
// 需要注意的是这个属性不区分中英文
// 在失去焦点框时验证
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>知数SEO_专注搜索引擎优化和品牌推广</title>
</head>
<body>
<form>
<h3>验证字符串长度</h3>
<input type="text" id="username"><br>
<span id="message"></span>
</form>
</body>
<script>
var obj = document.getElementById('username'); // 获取input对象
obj.onblur = function (){ // 绑定失去焦点事件
var inputValue = obj.value; // 获取表单输入的值
var inputLength = inputValue.length; // 获取表单输入值的长度
if (inputLength > 5){ // 对长度进行判断
var spanObj = document.getElementById('message'); // 获取span对象
spanObj.innerHTML = '输入的长度不能大于5'; //写入提示信息
}
}
</script>
</html>
2、正则匹配验证
复杂一点的情况,例如网址等就需要正则表达式来匹配了,关于正则表达式后面会专门出一篇介绍,感兴趣的同学可以关注一下。