js中验证html文本框是否必填,Javascript表单验证--输入框

表单验证是数据被送往服务器前对 HTML 表单中输入数据进行验证。

表单验证是前端Javascript重要功能之一。是网页中不可缺少的重要部分。输入框的表单验证是表单验证中的最重要部分。文本框、密码框、文本域这些控件的验证方式完全一致，下面以一个文本框作为例子，演示输入框的验证方式。

1. 基础版

单击提交按钮时进行验证，是最简单最直接的验证方式。下面是这种验证的实现方式。

1.1 基本结构

HTML代码

提交

没有真实提交的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;

以上两步升级大功告成。

友情提示

上面的两份代码代码使用对比工具对比，能够清晰看出二者差异。

如有任何疑问，欢迎下面留言