<HTML>
<HEAD>
<script language="javascript">
function load(){
//可以用下标也可以用id/name属性来获取表单元素
var firstName =document.forms["userForm"]["firstName"].value;
var lastName = document.forms[0].elements[1].value;
alert(firstName+" "+lastName);
//修改表单值
document.forms[0].elements[1].value="last";
//checkBox
//当提交form时，只会把checked属性为true的参数传递
var boxForm = document.forms["checkBox"];
alert(boxForm["box1"].checked);
boxForm["box2"].checked=true;
//radio
//同一组radio有相同的name属性，只能有一个checked的值为true
var radioForm = document.forms["radioForm"];
var radios = radioForm["place"];
for(var i=0;i<radios.length;i++){
var checkStatus = radios[i].checked;
alert(checkStatus);
}
//select
var selectForm = document.forms["selectForm"];
var sel = selectForm["sel"];
//sel.value和sel[sel.selectedIndex].value的值相等
//sel.selectedIndex被选中的options的索引
alert(sel.value);
alert(sel[sel.selectedIndex].value);
//绑定两个form的验证函数
document.forms["checkForm"].onsubmit = validForm;
document.forms["checkForm1"].onsubmit = validForm1;
}
//数字验证
function validForm(){
var checkForm = document.forms["checkForm"];
var age = checkForm["number"];
var ageVal = age.value;
alert(ageVal+" "+parseInt(ageVal));
//看表单value是否和parseInt的值相等，
//如果是float的话可以用parseFloat
if(ageVal == parseInt(ageVal)){
alert("success");
checkForm.submit;
return true;
}else{
age.focus();
alert("fail");
return false;
};
return true;
}
function validForm1(){
var els = document.forms["checkForm1"].elements;
for(var i=0;i<els.length;i++){
var el = els[i];
var val = el.value;
//获取自定义验证规则
var rules = el.getAttribute("test");
if("required" == rules){//非空验证
if(val == ""){
alert("null value");
return false;
}
}else if("length" == rules){//长度验证
if(val.length<6){
alert("too small");
return false;
}if(val.length>16){
alert("too long");
return false;
}
}
/*
可以自定义多个规则，也可以一个表单元素进行多个规则匹配
必要时最好用reg
*/
}
return true;
}
</script>
</HEAD>
<BODY onload="load()">
<form id="userForm">
First Name:<input type="text" name="firstName" value="firstName"/><br/>
Last Name:<input type="text" name="lastName" value="lastName"></br/>
</form><hr/>
<form id="checkBox">
<input type="checkbox" id="box1" value="1">北京
<input type="checkbox" id="box2" value="2">上海
<input type="checkbox" id="box3" value="3">广州
<input type="checkbox" id="box4" value="4">深圳
</form><hr/>
<form id="radioForm">
<input type="radio" name="place" value="1"/>北京
<input type="radio" name="place" />上海
<input type="radio" name="place" checked/>广州
<input type="radio" name="place" />深圳
</form>
<form id="selectForm">
<select type="select" id="sel" name="sel">
<option value="A">A</option>
<option value="B" selected>B</option>
<option value="C">C</option>
</select>
</form>
<form id="checkForm">
age:<input type="text" name="number" /><br/>
<input type="submit" >
</form>
<form id="checkForm1">
name:<input type="text" name="uname" test="required"/><br/>
password:<input type="password" name="psd" test="length" /><br/>
<input type="submit" >
</form>
</BODY>
</HTML>
分享到：
相关推荐
JavaScript弹出层表单提交是一种常见的用户交互设计，它允许用户在不离开当前页面的情况下填写并提交表单数据。这种技术常用于网站的登录、注册、评论或编辑功能，提供了良好的用户体验，因为用户无需跳转到新页面...
JavaScript作为客户端脚本语言，可以通过多种策略来防止用户意外或恶意地多次提交表单。以下是一些关键的知识点： 1. **禁用提交按钮**：最简单的预防方法是在用户点击提交按钮后立即将其禁用。这可以通过监听`...
比较实用的javascript做的表单验证，验证的表单域包括用户名、密码、密码...表单域基本通过获得焦点显示提示信息，失去焦点进行验证，还有提交表单验证。提交表单先进行必填项不能为空验证，再进行正则表达式匹配验证。
在表单验证中，JavaScript可以通过监听表单的`submit`事件来阻止默认提交行为，然后逐个检查输入字段的值。可以使用`document.getElementById`或`document.querySelector`等方法获取表单元素，再利用`value`属性获取...
1. **基本的JavaScript验证** 在HTML表单中，我们可以为输入元素添加`onsubmit`事件监听器，当用户尝试提交表单时触发JavaScript函数进行验证。例如： ```html ()"> <!-- 表单元素 --> ``` 在JavaScript部分...
JavaScript中的表单验证通常在`onsubmit`事件处理程序中进行，该处理程序会在用户尝试提交表单时触发。首先，我们可以遍历表单中的每个元素，然后针对每个需要验证的元素应用正则表达式。 例如，假设我们有一个要求...
js验证表单大全,用JS控制表单提交 ,javascript提交表单
JavaScript作为一种广泛使用的客户端脚本语言，能够高效地处理表单验证任务。它可以检测用户的输入是否符合预期的格式和规则，及时反馈错误信息给用户，从而避免无效的数据提交到服务器端。 #### 表单验证的基本...
`onsubmit`事件绑定到函数`check()`，该函数会在用户尝试提交表单时执行，用于验证输入。如果邮箱、昵称、密码和确认密码等字段不符合规定，`check()`函数会阻止表单的正常提交，从而实现前端验证。 实验的目的是让...
客户端验证是指在用户提交数据到服务器之前，利用JavaScript在用户浏览器上对输入的数据进行有效性检查，以提高用户体验和减轻服务器负担。本文将深入探讨JavaScript在表单验证中的应用、原理以及常见实践。 一、...
当用户提交表单或改变输入值时，对应的函数会被调用执行验证逻辑。 3. **DOM操作**：Document Object Model (DOM)允许JavaScript访问和修改HTML元素。通过`document.getElementById`、`querySelector`或`...
"javascript验证表单大全"这个主题涵盖了使用JavaScript进行表单验证的各种方法和技术，旨在为开发者提供全面的参考。以下是对这个主题的详细阐述： 一、表单验证的重要性 表单验证是确保用户输入数据有效性和安全...
在本文中，我们将深入探讨如何使用JavaScript进行表单验证，特别是在提交表单时确保数据的安全性和有效性。 首先，表单验证的重要性在于防止“坏数据”到达服务器。这不仅能够节省服务器资源，还能提高用户体验，...
3. **事件处理**：利用JavaScript的事件监听器，可以在用户与表单交互时执行特定操作，如点击按钮时提交表单或显示错误提示。 4. **表单提交**：JavaScript可以实现无刷新提交，通过AJAX技术将表单数据发送到服务器...
总的来说，这个项目展示了JavaScript在表单验证和交互设计上的强大能力，结合正则表达式的灵活性，实现了高效的数据验证。同时，通过省市级联的选择功能，优化了用户填写地址的流程。这个项目的学习和实践有助于提升...
总的来说，"javascript表单验证器三方库.zip" 提供了一个强大的工具，用于处理JavaScript表单验证，它具有可配置性、递归数据验证等特性，是开发高效、健壮的Web应用的重要辅助工具。无论是初学者还是经验丰富的...
高级的javascript表单验证, 正则及常用验证 制作带关闭按钮的浮动窗口 制作全选全不选效果效果 DIV提示效果的表单验证
javascript验证表单工具，各种常用表单验证的正则表达式。
二、JavaScript验证技术 1. DOM操作：JavaScript通过Document Object Model (DOM)与HTML元素交互，可以获取、修改、删除表单元素的值。例如，`document.getElementById('inputId').value`可以获取指定ID的输入字段...