js简略表单验证代码示例
日期：2014-05-16 浏览次数：20614 次
js简单表单验证代码示例
<html>
<head>
<style>
#d1{
left:30;
top:30;
width:440;
height:300;
position:absolute;
background-color:#cccccc;
}
#d1_head{
height:30;
font-size:20pt;
color:white;
background-color:blue;
}
#d1_body{
padding-top:40;
padding-left:40;
}
.s1{
color:red;
}
.s2{
background-color:#ffee55;
}
</style>
<script>
function valiForm(){
return valiName() && valiPwd();
}
function valiName(){
//step1 先找到要操作的节点
var obj = document.getElementById('name');
//className属性：用于设置或者读取
//节点的class属性值。
obj.className='';
var msg = document.getElementById('name_msg');
msg.innerHTML='';
//step2 对节点的操作
//value属性 ： (input控件 + textarea)的值
var v1 = obj.value;
if(v1.length==0){
//innerHTML: 可以读取或者设置
//标记之间的内容
msg.innerHTML='名字不能为空';
obj.className='s2';
return false;
}else{
return true;
}
}
function valiPwd(){
var obj = document.getElementById('pwd');
obj.className='';
var msg = document.getElementById('pwd_msg');
msg.innerHTML='';
if(obj.value.length==0){
msg.innerHTML='密码不能为空';
obj.className='s2';
return false;
}else{
return true;
}
}
</script>
</head>
<body style="font-size:20pt;">
<div id="d1">
<div id="d1_head">表单数据验证</div>
<div id="d1_body">
<form action="" method="" onsubmit="return valiForm();">
<table>
<tr>
<td>name</td>
<td><input type="text" name="name" id="name"
onblur="valiName();"/>
<span class="s1" id="name_msg"></span>
</td>
</tr>
<tr>
<td>password</td>
<td><input type="password" name="pwd" id="pwd" onblur="valiPwd();"/>
<span class="s1" id="pwd_msg"></span>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="confirm"/>
<input type="reset" value="reset"/>
</td>
</tr>
</table>
</form>
</div>
</div>
</body>
</html>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
