<form>
<input type="text" value="defaultValue 1"/>
<input type="text" value="defaultValue 2"/>
<textarea >defaultValue 1</textarea>
<textarea >defaultValue 2</textarea>
<input type="radio" name="a" />test
<input type="radio" name="a" checked="checked"/>defaultChecked
<input type="checkbox" name="b"/>test
<input type="checkbox" name="b" checked="checked"/>defaultChecked
<input type="checkbox" name="b" checked="checked"/>defaultChecked
<select>
<option selected="selected">defaultSelected 1</option>
<option>test</option>
<option>test</option>
<option>test</option>
</select>
<select multiple="multiple">
<option>test</option>
<option selected="selected">defaultSelected 1</option>
<option selected="selected">defaultSelected 2</option>
<option>test</option>
</select>
<input type="button" onclick="IsFormChanged()" value="submit"/>
</form>
<script>
function IsFormChanged() {
var isChanged = false;
var form = document.forms[0];
for (var i = 0; i < form.elements.length; i++) {
var element = form.elements[i];
var type = element.type;
if (type == "text" || type == "hidden" || type == "textarea" || type == "button") {
if (element.value != element.defaultValue) {
isChanged = true;
break;
}
} else if (type == "radio" || type == "checkbox") {
if (element.checked != element.defaultChecked) {
isChanged = true;
break;
}
} else if (type == "select-one"|| type == "select-multiple") {
for (var j = 0; j < element.options.length; j++) {
if (element.options[j].selected != element.options[j].defaultSelected) {
isChanged = true;
break;
}
}
} else {
// etc...
}
}
alert( isChanged?"你改变了表单的默认值.":"成功提交.");
return isChanged;
}
</script>
有2点注意
1,表单元素都有默认值属性,比如element.defaultValue , element.defaultChecked ,element.options[j].defaultSelected
2,select元素的type类型是:""select-one"或者"select-multiple",而不是"select"。
分享到:
相关推荐
综上,"JavaScript验证注册表单(包含多种表单元素)"这个项目涉及到前端开发中基础但关键的技能,通过`Ten.html`和`validate.js`这两个文件,我们可以学习到如何利用JavaScript有效地实现客户端表单验证,提升用户...
此外,还可以利用`addEventListener`方法监听表单元素的`change`事件,实现实时验证,即用户在输入时立即得到反馈。 在这个"JavaScript案例-js表单验证"中,提供的"03_validation"文件很可能包含了上述提到的验证...
JavaScript还可以结合`prompt`或`alert`函数向用户显示提示信息,或者动态修改元素的样式来直观地反馈验证结果。 此外,考虑到兼容性和用户体验,除了使用JavaScript进行客户端验证,通常还需要在服务器端进行二次...
在JavaScript中,可以使用`document.getElementById()`、`document.getElementsByName()`等方法获取表单元素,然后通过这些元素的属性来读取或修改它们的值。例如,检查邮箱是否为空或格式是否正确,可以通过`value`...
当用户填写或修改表单字段时,对应的验证函数会被调用,检查输入内容是否符合预设规则。 三、JavaScript验证常用方法 1. **空值检查**:`if (!value) { ... }` 或 `if (value.trim() === '') {...}` 验证输入是否...
4. **正则表达式**:在JavaScript中,`/pattern/`表示正则表达式,常用于验证输入是否符合特定格式,如邮箱、电话号码或密码强度。 5. **表单验证函数**:一个典型的验证函数会检查每个字段的值,如果不符合要求,...
二、JavaScript验证技术 1. DOM操作:JavaScript通过Document Object Model (DOM)与HTML元素交互,可以获取、修改、删除表单元素的值。例如,`document.getElementById('inputId').value`可以获取指定ID的输入字段...
在代码中,通过`document.all.TxtOldPWD`、`document.all.TxtNewPWD`和`document.all.TxtNewPWD2`分别获取对应的表单元素,并读取其`value`属性来判断用户输入的内容。 #### 5. 弹出警告与焦点设置 使用`alert()`...
- JavaScript代码,用于获取表单元素、监听提交事件、定义验证规则并处理错误反馈。 - 可能还会有CSS样式,用于美化错误提示和表单布局。 通过学习和实践这个项目,JS初学者可以熟悉DOM操作、事件处理、正则表达式...
在数据被提交至服务器前,JavaScript会检查表单中的各项数据是否符合预设的规则,比如检查邮箱格式、密码强度等。一旦发现不合规项,立即反馈给用户,指导其修正错误,这种即时反馈大大提升了用户的操作效率和满意度...
通过发送异步请求到服务器,我们可以验证表单数据的有效性,如检查用户名是否已存在,而无需刷新整个页面。在JavaScript中,可以使用`XMLHttpRequest`对象或者更高级的`fetch` API来实现这个功能。 4. **JS验证规则...
JavaScript是一种广泛用于网页和网络应用的脚本语言,它能够实现客户端的交互性,如动态更新内容、表单验证、动画效果等。"s2"可能代表课程的第二阶段,暗示我们已经对基础知识有所了解,现在要提升到更高级的应用。...
1. **事件监听**:利用JavaScript的事件监听机制,如`onsubmit`、`onchange`等,可以在用户提交表单或更改输入时立即执行验证函数。 2. **正则表达式**:JavaScript支持正则表达式,可以用于创建复杂的模式匹配,以...
- 使用`document.forms[0]`获取当前页面中的第一个表单元素,这里假设页面中只有一个表单。 - `password1`和`password2`变量分别存储了两个密码框的值。 - 第一层条件判断检查两个密码框是否都非空,如果有一个为...
1. **获取表单元素**:通过`document.getElementById`或`document.querySelector`等方法获取表单元素,例如`<input>`、`<select>`和`<textarea>`等。 2. **添加事件监听器**:通常我们会对`onsubmit`事件进行监听,...
1. DOM操作:JavaScript通过Document Object Model (DOM)与HTML元素进行交互,用于获取、修改、添加或删除表单元素。 2. 事件监听:如onsubmit、onchange等事件,用于在用户提交表单或更改输入时触发验证函数。 3. ...
根据提供的文件信息,本文将详细解释“JavaScript的表单验证”这一主题,包括表单验证的基本概念、原理、实现方式以及示例代码分析等。 ### 一、表单验证概述 表单验证是指在用户提交表单之前对输入的数据进行检查...
4. 验证表单方法:遍历所有表单字段,调用对应的验证方法,返回验证结果。 四、实例化与使用 创建一个表单验证类实例,然后绑定到特定表单,如下: ```javascript var formValidator = new FormValidator(form...
- DOM操作:通过JavaScript可以获取、修改HTML表单元素,实现验证逻辑。 - 事件监听:如onsubmit、onchange等,可以在特定用户行为时触发验证。 3. **示例文件解析** - `right.gif`:通常用于表示验证通过的提示...
首先,表单验证的基本原理是通过监听表单元素的事件(如onsubmit、onchange等)来触发验证函数。当用户提交表单或者改变输入时,验证函数会检查输入是否符合预设的规则,如非空检查、邮箱格式验证、手机号码合法性...