JavaScript实现表单非空验证与Trim函数示例

作者:代码拾荒

时间:2026-10-27

浏览:493

本文介绍如何使用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;
}

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章