在大部分的情况下我们希望用户输入的数据是我们理想中的格式，尤其是在用户注册上，一些重要的信息我们是不允许用户乱写的，如手机号，邮箱等。接下来一起看几种表单验证的方式：
1、验证长度
验证长度是比较简单的，input标签元素的maxlength属性可以设置可输入的最大长度
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="" cid="n5" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace; margin-top: 0px; margin-bottom: 20px; font-size: 0.9rem; display: block; break-inside: avoid; text-align: left; white-space: pre; background: rgb(51, 51, 51); padding: 10px 10px 10px 30px; width: inherit; caret-color: rgb(184, 191, 198); color: rgb(184, 191, 198); font-style: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; text-indent: 0px; text-transform: none; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration: none; position: relative !important;">// 用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">
<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></pre>
2、正则匹配验证
复杂一点的情况，例如网址等就需要正则表达式来匹配了，关于正则表达式后面会专门出一篇介绍，感兴趣的同学可以关注一下。
网友评论