<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弹出层表单提交代码,就是点击按钮后,弹出一个form表单让你填写,等你填好后再提交
js验证表单大全,用JS控制表单提交 ,javascript提交表单
javascript方式防止表单重复提交,
JavaScript表单验证 JavaScript表单验证 JavaScript表单验证
主要特色: 完全响应式; 完美键盘操作支持; 可定制的输入标签:select, radio, checkbox 以及 file; 自定义的日期选择器 本地化支持 表单验证的代码示例:
基于JavaScript实现简单的表单验证,涉及HTML、css、JavaScript、正则表达式等相关内容
高级的javascript表单验证, 正则及常用验证 制作带关闭按钮的浮动窗口 制作全选全不选效果效果 DIV提示效果的表单验证
使用JavaScript进行表单验证是目前通用的做法。本文实现了常见的三种基本的表单区域的验证,并给出了一个循环提示的通用的实例,提出了表单验证的需注意的原则
javascript验证表单工具,各种常用表单验证的正则表达式。
不能再让表单在提交按钮之后才被验证了!你输入的任何信息表单都会即时反应! 这个JavaScript的关键是onChange()事件,使用onKeyUp()事件完成是不行的,人家没有输入完毕,你就说人家不对,多不友好啊╮(╯▽╰)╭ ...
JavaScript验证表单大全 JavaScript验证表单大全 JavaScript验证表单大全
Javascript经典案例javascript表单验证及事件
坏数据不该抵达服务器:提交表单时的验证 表单域对象里有个form特性,它使用数组表示了整份表单的域 假如这里只有一个简单的信息文本框和一个邮政编码框,还有一个提交按钮 <form> <input id="message" ...
javascript特效 客户端验证javascript特效 客户端验证javascript特效 客户端验证
Javascript的表单验证-提交表单_.docx
js表单验证实例,HTML文件,javascript常用表单验证: 账号、密码、身份证等
javaScript表单验证大全javaScript表单验证大全javaScript表单验证大全javaScript表单验证大全
javascript验证表单大全::javascript 验证 表单