js表单验证实战与常见错误处理

195 浏览量更新于2024-08-29 收藏 50KB PDF 举报

本文主要探讨了如何使用JavaScript进行表单验证的实例，帮助读者理解和实现在网页开发中确保用户输入数据准确性和完整性的技术。首先，我们回顾了一个传统的表单验证方法，该方法涉及HTML结构、元数据设置以及JavaScript代码的结合。 HTML部分，代码开始于标准的DOCTYPE声明和XHTML1.0 Transitional文档类型定义，确保浏览器能正确解析。`<html>`标签中包含了XML命名空间，`<head>`部分设置了页面的字符编码为UTF-8，以及一个简单的<title>元素和`<script>`标签用于引入JavaScript代码。 JavaScript代码部分，定义了两个函数：`$`作为轻量级的选择器，用于获取HTML元素；`check`函数是核心验证逻辑。在`check`函数中，首先通过`$(id)`获取表单中的输入字段（如email、password、repassword和name）。然后，依次检查这些输入： 1. **Email验证**：检查email是否为空，以及是否包含 "@" 和 "." 符号。如果为空或格式错误，弹出警告并聚焦到错误的输入框。 2. **Password验证**：确认密码是否为空，以及其长度是否至少为6个字符。若不符合，给出提示并聚焦到密码输入框。 3. **Retype Password验证**：比较两次输入的密码是否一致，如果不一致，显示错误消息并聚焦到重复密码输入框。 4. **Name验证**：检查姓名是否为空，同样在为空时给出警告并聚焦到相应输入。这个例子展示了基本的客户端表单验证，它可以在用户提交数据前即时检测输入的有效性，提供更好的用户体验。然而，为了增强安全性，现代前端开发更倾向于将复杂的数据验证和业务规则放在服务器端进行，因为JavaScript可以被禁用，而服务器端验证更可靠。此外，还可以利用HTML5的内置验证属性和正则表达式进行更高级的验证。JavaScript表单验证是Web开发中必不可少的一部分，它简化了前端用户体验，同时也减轻了后端服务器的负担。

js进行表单验证实例分析进行表单验证实例分析

本文实例讲述了js进行表单验证的方法。分享给大家供大家参考。具体实现方法如下：

1. 传统的表单验证代码

代码如下:<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-

transitional.dtd”>

<head>

function $(id) {

return document.getElementById(id);

}

function check() {

var email = $(“email”).value;

var password = $(“password”).value;

var repassword = $(“repassword”).value;

var name = $(“name”).value;

if(email == “”) {

alert(“Email值不能为空”);

$(“email”).focus();

return false;

}

if(email.indexOf(“@”) == -1 || email.indexOf(“.”) == -1) {

alert(“邮箱格式不正确,必须包含@和.”);

$(“email”).focus();

return false;

}

if(password == “”) {

alert(“密码不能为空”);

$(“password”).focus();

return false;

}

if(password.length < 6) {

alert(“密码长度必须大于或者等于6”);

$(“password”).focus();

return false;

}

if(repassword != password) {

alert(“两次输入的密码不一致”);

$(“repassword”).focus();

return false;

}

if(name == “”) {

alert(“姓名不能为空”);

$(“name”).focus();

return false;

}

for(var i = 0; i < name.length; i++) {

var j = name.subString(i , i+1);

if(isNaN(j) == false) {

alert(‘姓名中不能包含数字’);

$(“name”).focus();

return false;

}

下载后可阅读完整内容，剩余5页未读，立即下载

weixin_38557530

粉丝: 6
资源: 896

js表单验证实战与常见错误处理

表单验证实例

js表单验证大全，js提交表单

php用户注册页面利用js进行表单验证具体实例

JS提交form表单实例分析

JS表单验证插件之数据与逻辑分离操作实例分析【策略模式】

JS实现的通用表单验证插件完整实例

JS两种类型的表单提交方法实例分析

AngularJS表单验证功能分析

JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】

js表单提交和submit提交的区别实例分析

最新资源