表单验证是数据被送往服务器前对 HTML 表单中输入数据进行验证。
表单验证是前端Javascript重要功能之一。是网页中不可缺少的重要部分。输入框的表单验证是表单验证中的最重要部分。文本框、密码框、文本域这些控件的验证方式完全一致，下面以一个文本框作为例子，演示输入框的验证方式。
1. 基础版
单击提交按钮时进行验证，是最简单最直接的验证方式。下面是这种验证的实现方式。
1.1 基本结构
- HTML代码
<form action="#">
<input id="txt_submit" type="text" name="test" placeholder="请输入6~10个字符的中文"><span id="msg"></span>
<button id="btn_submit" type="submit">提交</button>
</form>
没有真实提交的URL，暂时使用#代替。
表单三要素
- 表单
form(必须指定属性action,必要时指定属性method) - 输入
input/select/textarea - 提交按钮
submit
- JS基本框架
Javascript必备结构
// HTML文档加载完成后执行JS代码
window.onload = function() {
// JS代码到此为止
};
1.2 验证处理
- 获取相关的元素DOM对象
// 获取输入框
var txt_submit = document.getElementById("txt_submit");
// 获取提交按钮
var btn_submit = document.getElementById("btn_submit");
// 获取信息span
var msg = document.getElementById("msg");
- 给提交按钮添加单击事件，并且在事件中验证输入框的值。
btn_submit.onclick = function() {
// 获取文本内容
var strText = txt_submit.value;
// 必填项验证
if ("" == strText) {
msg.innerHTML = "该输入项不能为空";
return false;
}
// 最小长度验证
if (strText.length < 6) {
msg.innerHTML = "输入长度不能小于6";
return false;
}
// 最大长度验证
if (strText.length > 10) {
msg.innerHTML = "输入长度不能大于10";
return false;
}
// 汉字验证
if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
msg.innerHTML = "必须输入汉字";
return false;
}
// 错误信息清空
msg.innerHTML = "";
return true;
};
2. 升级版
现在很多验证不止在提交按钮时进行，在输入框输入时实时验证，我们把上面的版本升级一下。
- 把输入框的验证单独做成一个有名字的函数。
// 输入框验证
function check() {
// 获取文本内容
var strText = txt_submit.value;
// 必填项验证
if ("" == strText) {
msg.innerHTML = "该输入项不能为空";
return false;
}
// 最小长度验证
if (strText.length < 6) {
msg.innerHTML = "输入长度不能小于6";
return false;
}
// 最大长度验证
if (strText.length > 10) {
msg.innerHTML = "输入长度不能大于10";
return false;
}
// 汉字验证
if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
msg.innerHTML = "必须输入汉字";
return false;
}
// 错误信息清空
msg.innerHTML = "";
return true;
};
- 把函数的名字分别赋给提交按钮的单击事件和输入框的键盘事件。
btn_submit.onclick = check;
txt_submit.onkeyup = check;
以上两步升级大功告成。
友情提示
上面的两份代码代码使用对比工具对比，能够清晰看出二者差异。
如有任何疑问，欢迎下面留言
