编程心得+使用JS完成注册页面表单校验
2018-02-09 22:49
483 查看
今天给大家带来简单的JavaScript注册表单的校验，顺便说一下码代码的心得，其实编程是一种心有猛虎，细嗅蔷薇的功夫，通俗说来，大脑只需要知道有这个用法即可，手指才是记忆代码的工具。比如今天的代码，可能会用到正则表达式，正则表达式我学过很多遍，学了忘忘了学，很苦恼，但是其实这并不需要记忆，你只需要知道去网上搜索邮箱正则表达式就会出来很多，许多高级的程序员背后一定有一个强大的类库，需要的时候ctrl+c和ctrl+v即可，遇到好的项目也要先来看看源码学习，见多才能识广，故希望看到这篇博客的和我一样是菜鸟的同学不要陷入开发的误区。<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用JS完成注册页面表单校验</title>
<script>
function checkForm(){
//alert("aa");
/*校验用户名*/
//1.获取用户输入的数据
var uValue = document.getElementById("user").value;
if (uValue=="") {
//2.给出错误提示信息
alert("用户名不能为空！");
return false;
}
/*校验密码*/
//1.获取用户输入的数据
var pValue = document.getElementById("password").value;
if (pValue=="") {
//2.给出错误提示信息
alert("密码不能为空！");
return false;
}
/*校验确认密码*/
var rpValue = document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码不一致！");
return false;
}
/*校验邮箱*/
var eValue = document.getElementById("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确！");
return false;
}
}
</script>
</head>
<body>
<!--
作者：2651164672@qq.com
时间：2018-02-08
描述：写3.注册表单时请千万不要忘记写form标签
-->
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px"/>
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--2.导航栏部分-->
<tr height="50px">
<td bgcolor="black">
<a href="#">
<font size="5" color="white">首页</font>
</a>
<a href="#">
<font color="white">手机数码</font>
</a>
<a href="#">
<font color="white">电脑办公</font>
</a>
<a href="#">
<font color="white">鞋靴箱包</font>
</a>
<a href="#">
<font color="white">家用电器</font>
</a>
</td>
</tr>
<!--3.注册表单-->
<tr>
<td height="300px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="0px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="center">用户名</td>
<td>
<input type="text" name="user" size="34px" id="user"/>
</td>
</tr>
<tr>
<td align="center">密码</td>
<td>
<input type="password" name="password" size="34px" id="password"/>
</td>
</tr>
<tr>
<td align="center">确认密码</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"/>
</td>
</tr>
<tr>
<td align="center">Email</td>
<td>
<input type="text" name="email" size="34px" id="email"/>
</td>
</tr>
<tr>
<td align="center">姓名</td>
<td>
<input type="text" name="username" size="34px" />
</td>
</tr>
<tr>
<td align="center">性别</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td align="center">出生日期</td>
<td>
<input type="text" name="birthday" size="34px"/>
</td>
</tr>
<tr>
<td align="center">验证码</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--4.广告图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<!--5.友情链接和版权信息-->
<tr>
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>
以上代码在Hbuilder上测试完毕，其中图片不另附，运行不出，删除即可，无关紧要。
<html>
<head>
<meta charset="UTF-8">
<title>使用JS完成注册页面表单校验</title>
<script>
function checkForm(){
//alert("aa");
/*校验用户名*/
//1.获取用户输入的数据
var uValue = document.getElementById("user").value;
if (uValue=="") {
//2.给出错误提示信息
alert("用户名不能为空！");
return false;
}
/*校验密码*/
//1.获取用户输入的数据
var pValue = document.getElementById("password").value;
if (pValue=="") {
//2.给出错误提示信息
alert("密码不能为空！");
return false;
}
/*校验确认密码*/
var rpValue = document.getElementById("repassword").value;
if(rpValue!=pValue){
alert("两次密码不一致！");
return false;
}
/*校验邮箱*/
var eValue = document.getElementById("email").value;
if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){
alert("邮箱格式不正确！");
return false;
}
}
</script>
</head>
<body>
<!--
作者：2651164672@qq.com
时间：2018-02-08
描述：写3.注册表单时请千万不要忘记写form标签
-->
<table border="1px" align="center" width="1300px" cellpadding="0px" cellspacing="0px">
<!--1.logo部分-->
<tr>
<td>
<!--嵌套一个一行三列的表格-->
<table border="1px" width="100%">
<tr height="50px">
<td width="33.3%">
<img src="../img/logo2.png" height="47px"/>
</td>
<td width="33.3%">
<img src="../img/header.png" height="47px" />
</td>
<td width="33.3%">
<a href="#">登录</a>
<a href="#">注册</a>
<a href="#">购物车</a>
</td>
</tr>
</table>
</td>
</tr>
<!--2.导航栏部分-->
<tr height="50px">
<td bgcolor="black">
<a href="#">
<font size="5" color="white">首页</font>
</a>
<a href="#">
<font color="white">手机数码</font>
</a>
<a href="#">
<font color="white">电脑办公</font>
</a>
<a href="#">
<font color="white">鞋靴箱包</font>
</a>
<a href="#">
<font color="white">家用电器</font>
</a>
</td>
</tr>
<!--3.注册表单-->
<tr>
<td height="300px" background="../img/regist_bg.jpg">
<!--嵌套一个十行二列的表格-->
<form action="#" method="get" name="regForm" onsubmit="return checkForm()">
<table border="0px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">
<tr height="40px">
<td colspan="2">
<font size="4">会员注册</font> USER REGISTER
</td>
</tr>
<tr>
<td align="center">用户名</td>
<td>
<input type="text" name="user" size="34px" id="user"/>
</td>
</tr>
<tr>
<td align="center">密码</td>
<td>
<input type="password" name="password" size="34px" id="password"/>
</td>
</tr>
<tr>
<td align="center">确认密码</td>
<td>
<input type="password" name="repassword" size="34px" id="repassword"/>
</td>
</tr>
<tr>
<td align="center">Email</td>
<td>
<input type="text" name="email" size="34px" id="email"/>
</td>
</tr>
<tr>
<td align="center">姓名</td>
<td>
<input type="text" name="username" size="34px" />
</td>
</tr>
<tr>
<td align="center">性别</td>
<td>
<input type="radio" name="sex" value="男" />男
<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td align="center">出生日期</td>
<td>
<input type="text" name="birthday" size="34px"/>
</td>
</tr>
<tr>
<td align="center">验证码</td>
<td>
<input type="text" name="yzm" />
<img src="../img/yanzhengma.png" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="注册" />
</td>
</tr>
</table>
</form>
</td>
</tr>
<!--4.广告图片-->
<tr>
<td>
<img src="../img/footer.jpg" width="100%"/>
</td>
</tr>
<!--5.友情链接和版权信息-->
<tr>
<td align="center">
<a href="#">关于我们</a>
<a href="#">联系我们</a>
<a href="#">招贤纳士</a>
<a href="#">法律声明</a>
<a href="#">友情链接</a>
<a href="#">支付方式</a>
<a href="#">配送方式</a>
<a href="#">服务声明</a>
<a href="#">广告声明</a>
<p>
Copyright © 2005-2016 传智商城 版权所有
</p>
</td>
</tr>
</table>
</body>
</html>
以上代码在Hbuilder上测试完毕，其中图片不另附，运行不出，删除即可，无关紧要。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 使用Js完成注册页面表单校验
- 使用JS完成注册页面表单简单校验
- JavaScript学习——使用JS完成注册页面表单校验
- JavaEE day03 使用JS完成简单的数据校验、完成图片轮播效果、完成页面定时弹出广告、完成表单校验
- 教你一天玩转JavaScript(五)——使用JavaScript完成注册页面表单提示及校验
- JS应用实例1：注册页面表单校验
- 正则表达式及js校验表单代码（注册页面）
- php用户注册页面使用js进行表单验证具体实例
- JavaScript 完成注册页面表单校验的实例
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面，不使用JS来完成怎么做
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 一段用于编辑页面表单并使用ajax提交与无刷新获取的js段落
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- 请写一个简单的幻灯效果页面。如果不使用JS来完成，可以加分。
- php用户注册页面利用js进行表单验证