HTML初级,用基本CSS+JS实现表单验证
2017-08-09 18:46
736 查看
--------------------这是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>
----------------------演示截图---------------------------------------------
<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>
----------------------演示截图---------------------------------------------
相关文章推荐
- Html JS实现表单验证
- jquery验证表单的js代码(HTML+CSS+PHP代码部分省略)
- html+js实现form表单多值的验证
- HTML+CSS+jquery 实现环形比例图效果 AngularJS+css实现环形比例图效果
- HTML+js+css实现点击图片弹出上传文件窗口的两种思路
- js实现表单验证(submit /button)
- “代码雨”js+css+html实现
- layui.js实现的表单验证功能示例
- 用html+css+js实现中国象棋小游戏开发项目
- html,css,js实现老虎机游戏以及出现的问题
- web里面html,css,js基本知识
- html+css+js实现的简易下拉菜单
- HTML+CSS+JS实现选项卡
- javascript 基础 js实现简单表单验证
- UL LI结构实现二级导航菜单(HTML+CSS+JS)
- JQuery笔记(表单验证)八 metadata-demo.html jquery.metadata.js
- 表单数据验证方法(一)—— 使用validate.js实现表单数据验证
- HTML/CSS/JS实现二级菜单导航+轮播图
- JS实现的通用表单验证插件完整实例
- js+html+css实现简单页面交互功能(2015知乎前端笔试题)http://v.youku.com/v_show/id_XMTI0ODQ5NTAyOA==.html?from=y1.7-1.2