表单验证
来源:互联网 发布:ubuntu安装后的20件事 编辑:程序博客网 时间:2024/03/29 03:11
对表单中为文本框类型,下拉列表,单选,复选框的通用验证。
表单验证的样式:
<style type="text/css">
.input-text{border: solid 1px red;} -->文本框样式
.input-select-o{background:red;} -->下拉列表样式
.input-select-c{background: #FFF;}-->选中后下拉列表的样式
.input-o-text{ background-color:#FFF; border:solid #9FF 1px;} -->文本框,单选按钮,复选框选中后的样式
.input-radion{background-color:red;} -->单选按钮未选的样式
</style>
JS表单验证
<script>
function validate(){
//获取BODY下所有对象
var getAll = document.all;
for(var i=0;i<getAll.length;i++){
/*验证text类型的所有文本框*/
//如果是text类型的文本框执行本验证
if(getAll[i].type=="text"){
//值的长度小于0则没填
if(getAll[i].value.length<=0){
//调用没值的样式
getAll[i].className +=" input-text";
}else {
//调用有值的样式
getAll[i].className +=" input-o-text";
}
}
/*复选框的判断*/
if(getAll[i].type=="checkbox"){
if(getAll[i].checked){
getAll[i].className="input-o-text";
}else{
//根据复选框的名称获取所有名称下的复选框
var _check = document.getElementsByName(getAll[i].name);
var _ch = false;
for(var j=0,leng=_check.length;j<leng;j++){
//如果是复选框对象下的某一个被选
if(_check[j].checked){
_check[j].className=" input-o-text";
_ch=true;
//alert("未选 ----> 已选"+j);
}
//未选---->已选 为true时让所有该复选框名称下的复选框调用已选的样式
if(_ch){
getAll[i].className="input-o-text";
//alert("未选 ----> 已选"+j+" 第二次选择后");
}else{ //调用没有选中的样式
getAll[i].className="input-radion";
//alert("未选"+j+" ---->");
}
}
}
}
/*if(getAll[i].checked){
//已选的样式
getAll[i].className=" input-o-text";
}else {
var _ch=false;
//alert(getAll[i].name);
var che=document.getElementsByName(getAll[i].name);
for(var j=0,leng=che.length;j<leng;j++){
if(che[j].checked){
che[j].className=" input-o-text";
_ch=true;
alert("未选 ----> 已选"+j);
}
if(_ch){
che[j].className="input-o-text";
alert("未选 ----> 已选"+j);
}else{ //调用没有选中的样式
che[j].className="input-radion";
alert("未选"+j);
}
}
//getAll[i].className="input-radion";
}*/
//单选按钮的验证
if(getAll[i].type=="radio"){
if(getAll[i].checked){
getAll[i].className +=" input-o-text";
}else{
//获得getAll[i].name的对象
var _radios=document.getElementsByName(getAll[i].name);
var _flag=false;
for(var j=0,len=_radios.length;j<len;j++){
//判断某个对象下的某一个单选按钮是否选中
if(_radios[j].checked){//选中的
_flag=true;
_radios[j].className="input-o-text";//对某个对象下的某一个单选按钮调用选中的样式
break;
}
}
if(_flag)
getAll[i].className="input-o-text";
else //调用没有选中的样式
getAll[i].className="input-radion";
}
}
}
//获取所有下拉列表的对象
var getSelect = document.getElementsByTagName('select');
for(var i=0;i<getSelect.length;i++){
var _val= getSelect[i].value;
if(!_val||_val.length==0){
getSelect[i].className+=' input-select-o'
}else
{
getSelect[i].className+=' input-select-c';
}
}
}
</script>
- 验证表单
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 表单验证
- 如何往基于Dialog的程序添加工具栏
- 大明A+B hdu1753
- 七招减少沙尘对人体危害
- delphi 十六进制转十进制
- Pyke 逻辑编程入门(14):知识库之“事实库”
- 表单验证
- [Trouble Shoot]Struts2和Tile2
- 在java代码中sql语句出现start before result set的错误解决办法
- 播放歌曲文件
- JAVA注释方法及格式
- java爱好者
- 愿昨天成为美好的回忆,让我忘了你是谁
- 想了很久
- htons和htonl