表单验证

2019-04-15 16:49发布

站内文章 / PIC单片机
13970 0 1743
近来有机会接触前端，学习过程中便记录下来。

HTMl 代码

<html> <head> <title>Car Pickertitle> <link rel="stylesheet" href="整合版的例子.css"> head> <body> <h2 class="centered">Car Pickerh2> <form action="someAction.cgi"> <p> <label for="emailAddr">Email Address: <input id="emailAddr" type="text" size="30" class="reqd email"> label> p> <p> <label for="color">Colors: <select id="color" class="reqd"> <option value="" selected>Choose a coloroption> <option value="Red">Redoption> <option value="green">Greenoption> <option value="blue">Blueoption> select> label> p> <p>Options: <label for="sunroof"><input type="checkbox" id="sunroof" value="yes">Sunroof(Two door only)label> <label for="pWindows"><input type="checkbox" id="pWindows" value="yes">Power Windowslabel> p> <p> <label for="DoorCt">Doors:   <input type="radio" id="twoDoor" name="DoorCt" value="twoDoor" class="radio">Two <input type="radio" id="fourDoor" name="DoorCt" value="fourDoor" class="radio">Four label> p> <p><label for="zip">Enter your Zip code or pick the dealer nearest you:<br> Zip:<input id="zip" type="text" size="5" maxlength="5" class="isZip dealerList"> <select id="dealerList" size="4" class="zip"> <option value="California--Lemon Grove">California--Lemon Groveoption> <option value="California--Lomita">California--Lomitaoption> <option value="California--Long Beach">California--Long Beachoption> <option value="California--Los Alamitos">California--Los Alamitosoption> <option value="California--Los Angeles">California--Los Angelesoption> select> p> <p><input type="submit" value="submit"> <input type="reset">p> form> <script src="整合版的例子.js">script> body> html> 非常简单的一个页面，其中包括输入框，单选按钮，复选框，下拉列表等。

CSS代码

body{
color:#000;
background-color:#fff;
}
input.invalid{
background-color:#ff9;
border:2px red inset;
}
label.invalid{
color:#f00;
font-weight:bold;
}
select{
margin-left:80px;
}
input{
margin-left:30px;
}
input+select,input+input{
margin-left:20px;
}
.centered{
text-align:center;
}
和平常css无任何不同

JS 代码

处理单选按钮

单选按钮表示用户必须在每一组选项中选择一个选项。基本思路是：遍历每个按钮并且检查它 的状态。如果没有选择按钮，就将单选按钮的标签和按钮本身转换成其他颜 {MOD}。 /*含义：处理单选按钮事件 radioName：标签的名称 */ function radioChecked(radioName) { var radioset =""; for(var i=0;iif(!radioset) { radioset = document.forms[i][radioName]; } } if(!radioset) { return false; } for(var k=0;kif(radioset[k].checked) { return true; } } return false; }

用一个字段设置另一个字段

在表单上常见一种情况，如果用户作出选择，那么这个选择会影响表单上其他字段的值。这种问题有两种处理思路：第一种是检查输入，如果用户作出错误选择，就弹出警告对话框；当然还有更好的方法就是替用户做输入。比如，我选择了宠物猫，自动默认四条腿（举例，勿喷~）
在上述例子中，处理如下： document.getElementById("sunroof").onclick=doorset; function doorset() { if(this.checked) { document.getElementById("twoDoor").checked = true; } else { document.getElementById("twoDoor").checked = false; } }

验证电子邮件地址

存在的正则表达式，可以让我们快速的验证某些输入是否合法。如果不用正则表达式，该如何操作呢？真正验证电子邮件地址还是很复杂的，下面的代码只是简单的判断。 /*含义：验证Email地址*/ function validEmail(email) { var invalidChars=" ?:,;"; //电子邮件地址中最可能出现的5个无效字符：空格、斜杠、冒号、逗号和分号 if(email=="") { return false; //如果email字段的内容为空，则结果为false } for(var k=0;kvar bedchar= invalidChars.charAt(k); if(email.indexOf(bedchar) >-1) //检验输入中是否包含无效字符 { return false; } } var atPos=email.indexOf("@",1); //从地址的第二个字符开始检查第一个“@”符号 if(atPos == -1) { return false; } if(email.indexOf("@",atPos+1) !=-1) //检查后面的地址中是否还包含“@”符号 { return false; } var periodPos=email.indexOf(".",atPos); //检查“@”符号后面是否还有“.” if(periodPos == -1) { return false; } if(periodPos+3 >email.length) //要求“.”号后面还有两个字符 { return false; } return true; } 总结完毕，欢迎指正！代码已上传http://download.csdn.net/my。

热门文章