[Javascript] 如何在客户端验证表单被改变

简介:

Form中的每个对象都保留了初始值,所以可以在提交表单时,遍历Form中对象,
检查对象当前的值与初始值是否一致,就判断出了表单是否被修改了。

示例代码

 1 function  IsFormChanged()
 2 {
 3    var isChanged = false;
 4    var form = document.forms[0];
 5    for (var i = 0; i < form.elements.length; i++)
 6    {
 7        var element = form.elements[i];
 8        var type    = element.type;
 9        if (type == "text" || type == "hidden" || type == "textarea" || type == "button")
10        {
11            if (element.value != element.defaultValue)
12            {
13                isChanged = true;
14                break;
15            }

16        }

17        else if (type == "radio" || type == "checkbox")
18        {
19            if (element.checked != element.defaultChecked)
20            {
21                isChanged = true;
22                break;
23            }

24        }

25        else if (type == "select-one")
26        {
27            for (var j = 0; j < element.options.length; j++)
28            {
29                if (element.options[j].selected != element.options[j].defaultSelected)
30                {
31                    isChanged = true;
32                    break;
33                }

34            }

35        }

36        else
37        {
38            //
39        }

40    }

41
42    return isChanged;
43}


本文转自高海东博客园博客,原文链接:http://www.cnblogs.com/ghd258/archive/2007/01/12/618257.html,如需转载请自行联系原作者
相关文章
|
2月前
|
存储 安全 API
Next.js 实战 (九):使用 next-auth 完成第三方身份登录验证
这篇文章介绍了next-auth,一个为Next.js设计的身份验证库,支持多种认证方式,如电子邮件和密码、OAuth2.0提供商(如Google、GitHub、Facebook等)以及自定义提供商。文章包含了如何配置Github Provider以及会话管理,并提到了适配器Adapters在next-auth中的作用。最后,文章强调了next-auth的强大功能值得进一步探索。
110 10
|
4月前
ractive.js联系表单动画效果源码
一款ractive.js联系表单动画效果,很有创意的发送邮件、联系内容等表单,基于ractive.js实现的动画效果,以发送信件的方式。
43 1
|
4月前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
80 3
|
4月前
|
开发框架 JavaScript 前端开发
Node.js日记:客户端和服务端介绍、Node.js介绍
Node.js日记:客户端和服务端介绍、Node.js介绍
|
5月前
|
JavaScript 数据安全/隐私保护
2024了,你会使用原生js批量获取表单数据吗
2024了,你会使用原生js批量获取表单数据吗
84 4
|
5月前
|
前端开发 网络协议
Nest.js 实战 (十四):如何获取客户端真实 IP
这篇文章介绍了在Nest.js应用中获取客户端真实IP地址的问题及解决方法。问题出现在使用本地代理时,请求的IP地址总是返回::1或::ffff:127.0.0.1。为解决这个问题,需要确保代理服务器正确设置转发头如X-Forwarded-For或X-Real-IP,后端服务能够读取这些头信息来确定客户端的IP地址。文章以作者自己的OpenResty应用为例,展示了如何通过配置反向代理和设置X-Forwarded-For头来获取真实IP地址,并提供了相关的代码示例。最后,文章提到了使用这个解决方案后的实际效果,例如在操作日志中记录真实IP地址。
166 0
|
5月前
|
JavaScript 前端开发 数据安全/隐私保护
前端技术分享:使用Vue.js构建响应式表单
【10月更文挑战第1天】前端技术分享:使用Vue.js构建响应式表单
|
6月前
|
移动开发 JavaScript 前端开发
js之操作表单 | 12-4
js之操作表单 | 12-4
|
6月前
|
JavaScript 前端开发 API
JavaScript 验证 API
JavaScript 验证 API
55 2
|
6月前
|
移动开发 前端开发 JavaScript
JavaScript 表单
JavaScript 表单
34 9

热门文章

最新文章