JavaScript实现表单非空验证与Trim函数示例
作者:代码拾荒时间:2026-10-27 20:09:14浏览:494
本文介绍如何使用JavaScript实现表单输入的非空验证。通过自定义trim函数去除字符串两端空格,并结合DOM操作获取表单元素值,判断用户名和密码是否为空。若为空则弹出提示并阻止提交,否则允许通过。
// 复制代码
JavaScript实现表单非空验证与Trim函数示例
代码如下:
// 去除输入字符串两端的空格
function trim(s) {
var count = s.length;
var st = 0; // 起始索引
var end = count - 1; // 结束索引
if (s == "") return s;
while (st < count) {
if (s.charAt(st) == " ")
st ++;
else
break;
}
while (end > st) {
if (s.charAt(end) == " ")
end --;
else
break;
}
return s.substring(st, end + 1);
}假设表单结构如下:
// 复制代码
代码如下:
<form action="testnew.html" name="form1">
username: <input type="text" name="name">
password: <input type="password" name="pwd"> <br>
<input type="submit" value="提交" onclick="isEmpty()">
</form>此时,判断输入是否为空的函数定义如下:
// 复制代码
代码如下:
function isEmpty(){
// form1对应form标签中的name属性
var _form = document.form1;
if(trim(_form.name.value)==""){
alert("用户名不能为空!");
return false;
}
if(trim(_form.pwd.value)==""){
alert("密码不能为空!");
return false;
}
return true;
}作者最新文章
JavaScript异步发送HTTP请求时怎么优雅地处理错误
2026-11-05 17:10:44
5款主流JS在线运行工具对比:CodePen、JSFiddle与StackBlitz怎么选
2026-11-05 17:04:04
JavaScript入门书籍避坑:这些书不适合初学者
2026-11-05 16:31:15
JS使用Math.round实现保留两位小数的原理与代码
2026-11-05 15:35:55
JavaScript 原生 Date 对象怎么实现日期加减
2026-11-05 14:30:00
