- 搜索
日期：2025/04/01 00:13来源：未知 人气：55
对于#JavaScript#语言来说，更多的是前端操作，最初的功能也是为了表单的前端验证而出现的，因此，表单验证是JavaScript的鼻祖功能。
我们可以将在C#后端开发中使用的一些表单验证技巧用在JavaScript表单验证中。语言不同，但原理都是一样的。
JavaScript深入编程-从0基础到深入学习 线上.NET培训课程淘宝¥18购买
已下架
目标：练习JavaScript给文本框赋值和取值，并进行非空判断。
一、【项目案例】
登录是项目中常见的效果，比如上淘宝网购物，登录QQ，都要先登录，才能获取用户信息，那么我首先来实现登录时如何获取用户信息。
二、【效果图】
用户信息注册页面
图1
在此图中，是一个只有用户名和密码的用户信息注册页面，这是一个最为简单的注册页面，这里我们所做的工作就是对用户名和密码执行非空验证。
非空验证是为了保证禁止将空数据保存到数据库中，起到一个数据完整性的作用。
三、【HTML代码】
Html表单代码如下：
此HTML代码说明如下：
每个表单标记必须具有id属性，且要唯一，因为这是获取标记的唯一标识。Input标记中，type属性值为text表示一个单行文本框。Type属性的值为password，表示一个密码框。将表单提交到服务器上，input的类型必须是submit，表示提交按钮。如查要清空表单数据，可以使用type=“reset”的重置按钮。有了Html表单，现在就可以编写JavaScript代码实现非空验证了。
四、【JavaScript代码】
JavaScript代码如下：
此段JavaScript代码说明如下：
使用了getElementById()方法根据Id值获取了用户名和密码框对象。使用value属性获取用户名和密码值。使用if语句判断用户名和密码是否为空值。在clearData()函数中，对用户名和密码框做清空数据处理。最后将编写好的2个函数挂接到按钮上。上面完成的Html+JavaScript完整代码如下图所示：
JS非空验证
图2
五、【运行结果】
在浏览器里运行一下上面的代码，结果如下：
非空验证失败
图3
在图3中，当文本框的值为空时，会弹出一个提示信息，提示用户名或密码不可为空。
如果输入正确的值，则会将值输出：
非空验证成功
图4
在图4中，非空验证通过了，通过后得到了用户名和密码值，然后显示在警告框中。
这里只是一个简单的表单验证，对于复杂的表单页面，验证逻辑也会复杂，常见的表单验证有：手机号、邮箱地址、数字、密码、用户名等。
还有一种验证叫做正则表达式验证，这个验证更为灵活，只需要定义一种匹配模式，然后将输入的值在模式中匹配即可，匹配到了就表示验证成功。
虽然在Html页面上使用JavaScript可以实现前端的验证，但是这种验证不是绝对安全的，如果用户将自己浏览器的JavaScript代码禁用了，则JavaScript验证就会失效，因此，还是有必须做服务端器验证的。
最保险的验证是客户端+服务器端双重验证，这样就能保证数据完全给验证到了。
