js中验证html⽂本框是否必填,Javascript表单验证--输⼊框表单验证是数据被送往服务器前对 HTML 表单中输⼊数据进⾏验证。
表单验证是前端Javascript重要功能之⼀。是⽹页中不可缺少的重要部分。输⼊框的表单验证是表单验证中的最重要部分。⽂本框、密码框、⽂本域这些控件的验证⽅式完全⼀致,下⾯以⼀个⽂本框作为例⼦,演⽰输⼊框的验证⽅式。
1. 基础版
单击提交按钮时进⾏验证,是最简单最直接的验证⽅式。下⾯是这种验证的实现⽅式。
1.1 基本结构
HTML代码
提交
没有真实提交的URL,暂时使⽤#代替。
表单三要素
表单form(必须指定属性action,必要时指定属性method)
输⼊input/select/textarea
提交按钮submit
JS基本框架
Javascript必备结构
// HTML⽂档加载完成后执⾏JS代码
// JS代码到此为⽌
};
1.2 验证处理
获取相关的元素DOM对象
/
/ 获取输⼊框
var txt_submit = ElementById("txt_submit");
// 获取提交按钮
var btn_submit = ElementById("btn_submit");
// 获取信息span
var msg = ElementById("msg");
给提交按钮添加单击事件,并且在事件中验证输⼊框的值。
lick = 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;
html中提交表单用什么属性}
/
/ 汉字验证
if (!/^[\u4e00-\u9fa5]+$/.test(strText)) {
msg.innerHTML = "必须输⼊汉字";
return false;
}
// 错误信息清空
msg.innerHTML = "";
return true;
};
把函数的名字分别赋给提交按钮的单击事件和输⼊框的键盘事件。lick = check;
keyup = check;
以上两步升级⼤功告成。
友情提⽰
上⾯的两份代码代码使⽤对⽐⼯具对⽐,能够清晰看出⼆者差异。如有任何疑问,欢迎下⾯留⾔
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论