频道栏目
首页 > 资讯 > HTML/CSS > 正文

HTML初级,用基本CSS+JS实现表单验证

17-08-11        来源:[db:作者]  
收藏   我要投稿

--------------------这是HTML代码------------------------------------------------------------------

<body>
<form action="login.html" method="post" onsubmit=" return userInfo()">
<fieldset >
<legend>注册用户信息</legend>
<table>
<input type="hidden" value="10001" name="id"/>
<tr>
<td>用户名:</td>
<!-- onkeyup是指当键盘按下松开是触发-->
<td><input type="text" value="username" name="username" id="loginId" onkeyup="checkedId()" /> 
<span class="span" id="spanId">用户名至少为六位</span>
</td>

</tr>
<tr>
<td>密码:</td>
<td><input type="password" value="password" name="password" id="pwd"/>
<span style="color:red; display: none;" id="spanPwd">密码至少为六位</span>
</td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" value="age" name="age" /></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="radio" name="sex" value="0" /> 男<input type="radio" name="sex" value="1" />女</td>
</tr>
<tr>
<td>邮箱:</td>
<td><input type="txt" name="email" id="email" />
<span style="color:red; display: none;" id="spanEmail">邮箱格式不正确</span>
</td>
</tr>

<tr>
<td>电话:</td>
<td><input type="txt" name="tel" id="tel" />
<span style="color:red; display: none;" id="spanTel">电话格式不正确</span>
</td>
</tr>

<tr>
<td>出生日期:</td>
<td>
<select name="year">
<option> 1990</option>
<option> 1991</option>
<option> 1992</option>
<option> 1993</option>
<option> 1994</option>
<option> 1995</option>
<option selected="selected">1996</option>
</select>
<select name="month">
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option> 4</option>
<option selected="selected"> 5</option>
<option> 6</option>
</select>
<select name="day">
<option> 1</option>
<option> 2</option>
<option> 3</option>
<option selected="selected"> 4</option>
<option> 5</option>
<option> 6</option>
</select>
</td>
</tr>
<tr>
<td>爱好:</td>
<td><input type="checkbox" name="holbay"  value="唱歌"/>唱歌  
<input type="checkbox" name="holbay"  value="上网"/>上网 
<input type="checkbox" name="holbay"  value="打球"/>打球
</td>
</tr>
<tr>
<td>简介:</td>
<td>
<textarea rows="6" cols="40">
1.12313131313
2.asdafasdad
</textarea>
 
</td>

</tr>
<tr>
<td></td>
<td><input type="submit" value="提交"/> <input type="submit" value="重置"/></td>
</tr>
</table>
</fieldset>
</form>
</body>

--------------------这是JS代码------------------------------------------------------------

<style type="text/css">
.span{display: none; }
.span1{display: initial;color: red;}
</style>
<script type="text/JavaScript">
function userInfo(){
var id=document.getElementById("loginId").value;
var pwd=document.getElementById("pwd").value;
var email=document.getElementById("email").value;
var tel=document.getElementById("tel").value;

var erg= new RegExp(/^1(3|4|5|7|8)\d{9}$/);//正则表达式,选择你需要验证的条件,如果不会,建议去百度如何写!!!大笑

if(id.length<6){
//判断用户的ID是否小于6位
document.getElementById("loginId").focus();
document.getElementById("spanId").className="span1";
return false;
}

if(pwd.length<6){
document.getElementById("pwd").focus();
document.getElementById("spanPwd").style.display="initial";
return false;
}
//判断邮箱格式是否正确
//etc@126.com @的位置index>1 如果没有或者在第一位时 index为-1或者0 
//然后判断有(.)的情况 (.)一定在@之后 所以@的位置一定大于(.)的位置
if(email.indexOf("@")<1||email.indexOf("@")>email.lastIndexOf(".")){
document.getElementById("email").focus();
document.getElementById("spanEmail").style.display="initial";
return false;
}
if(!erg.test(tel)){
document.getElementById("tel").focus();
document.getElementById("spanTel").style.display="initial";
return false;
}
return true;
}

function checkedId(){
var id=document.getElementById("loginId").value;
if(id.length>=6){
//如果大于或等于6位时 则红色提示取消
document.getElementById("spanId").className="span";
}else{
document.getElementById("spanId").className="span1";
}

}

</script>
相关TAG标签
上一篇:Log4j日志的使用
下一篇:CSS3新特性(二)选择器
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站