用户注册_表单验证

最新推荐文章于 2022-11-22 10:34:00 发布
最新推荐文章于 2022-11-22 10:34:00 发布
阅读量400 收藏
点赞数
分类专栏： JavaScript 文章标签： class function input xhtml table html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kong1yi/article/details/5809548
版权

提交成功后转向另一页

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-
transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=gb2312" />
<title>表单验证综合实例</title>
<style type="text/css">
<!--
.table1px {
 border-top-width: 1px;
 border-right-width: 1px;
 border-top-style: solid;
 border-right-style: solid;
 border-top-color: #003366;
 border-right-color: #003366;
}
.table1px td {
 border-bottom-width: 1px;
 border-left-width: 1px;
 border-bottom-style: solid;
 border-left-style: solid;
 border-bottom-color: #003366;
 border-left-color: #003366;
 text-decoration: none;
 padding: 5px;
}
.txt1 {
 font-size: 14px;
 color: #003366;
}
.txt2 {
 font-size: 12px;
 color: #999999;
}
.input1 {
 font-size: 16px;
 color: #FF0000;
 background-color: #FFFFCC;
 border: 1px solid #990000;
}
.input2 {
 font-size: 16px;
 color: #000000;
 background-color: #CCCCCC;
 border: 1px solid #666666;
}
.inputText {
 background-color: #FFC;
 border: 1px solid #FC0;
 height: 20px;
 width: 160px;
}
.inputText2 {
 background-color: #FFF;
 border: 1px solid #FC0;
 height: 20px;
 width: 160px;
}
-->
</style>
<script type="text/javascript">
function check_uname()
{
 //alert(iserr);
 var ff = document.form123;
 var reg = //w{4,10}/;
 if (!reg.test(ff.uname.value))
 {
  showIDHTML("uname_tag","<img
src='wrong.gif'> <font color=red>用户名长度在4-10位之
间</font>");
  return false;
 }
 else
 {
  showIDHTML("uname_tag","<img
src='pass.gif'>");
  return true;
 }
}
function check_upwd()
{
 //alert(iserr);
 var ff = document.form123;
 if (ff.upwd.value.length <6)
 {
  showIDHTML("upwd_tag","<img
src='wrong.gif'> <font color=red>密码长度最低为6位
</font>");
  return false;
 }
 else
 {
  showIDHTML("upwd_tag","<img
src='pass.gif'>");
  return true;
 }
}
function check_upwd2()
{
 var ff = document.form123;
 if((ff.upwd.value != ff.upwd2.value) ||
(ff.upwd2.value == ""))
 {
  showIDHTML("upwd2_tag","<img
src='wrong.gif'> <font color=red>确认密码不一致
</font>");
  return false;
 }
 else
 {
  showIDHTML("upwd2_tag","<img
src='pass.gif'>");
  return true;
 }
}
function check_usex()
{
 var ff = document.form123;
 if((ff.usex[0].checked == false) && (ff.usex
[1].checked == false))
 {
  showIDHTML("usex_tag","<img
src='wrong.gif'> <font color=red>请选择性别
</font>");
  return false;
 }
 else
 {
  showIDHTML("usex_tag","<img
src='pass.gif'>");
  return true;
 }
}
function check_umail()
{
 var ff = document.form123;
 //if (ff.umail.value.indexOf("@") == -1)
 var reg = //w+([-+.]/w+)*@/w+([-.]/w+)*/./w+
([-.]/w+)*/;
 if (!reg.test(ff.umail.value))
 {
  showIDHTML("umail_tag","<img
src='wrong.gif'> <font color=red>邮箱格式不正确
</font>");
  return false;
 }
 else
 {
  showIDHTML("umail_tag","<img
src='pass.gif'>");
  return true;
 }
}
function check_uage()
{
 var ff = document.form123;
 if ((isNaN(ff.uage.value)) || (ff.uage.value ==
""))
 //isNaN（）测试是否为数字，如果是返回false,如果不
是返回true
 {
  showIDHTML("uage_tag","<img
src='wrong.gif'> <font color=red>年龄为空或非数字
</font>");
  return false;
 }
 else
 {
  showIDHTML("uage_tag","<img
src='pass.gif'>");
  return true;
 }
}
function showcode()
{
 sjs = new String();
 for(i=0;i<4;i++)
 {
  var code=Math.floor(Math.random()*10);
  sjs += code.toString();
 }
 showIDHTML("code","<font color=red>" +sjs+
"</font>");
 return sjs;
}
function checkcode()
{
 var cv = document.form123.anycode.value;
 
 if(cv != "")
 {
  if (cv != sjs)
  {
   showIDHTML("code_tag","<font
color=red>验证码错误</font>");
   return false;
  }
  else
  {
   showIDHTML("code_tag","<img
src='pass.gif'>");
   return true;
  }
 }
 else
 {
  showIDHTML("code_tag","<font color=red>请输
入验证码</font>");
  return false;
 }
}
function showIDHTML(xid,content)
{
 document.getElementById(xid).innerHTML=
content;
}
function checkform()
{
 var tt = true;
 tt = tt && check_uname();
 tt = tt && check_upwd();
 tt = tt && check_upwd2();
 tt = tt && check_usex();
 tt = tt && check_umail();
 tt = tt && check_uage();
 
 if(!tt)
 {
  alert("请返回检查");
  return false;
 }
}

</script>

</head>

<body οnlοad="showcode()">
<h1 align="center">用户注册页面</h1>
<form name="form123" action="checkok.html"
method="get" οnsubmit="return checkform()">
<table width="500" border="0" align="center"
cellpadding="0" cellspacing="0" class="table1px">
  <tr>
    <td width="90" align="right" class="txt1">用户
名：</td>
    <td width="180"><input name="uname" type="text"
class="inputText" id="uname" maxlength="10"
οnmοuseοver="this.className='inputText2'"
οnmοuseοut="this.className='inputText'"
οnblur="check_uname()" /></td>
    <td class="txt2"><span id="uname_tag">用户名长度
在4-10位之间</span></td>
  </tr>
  <tr>
    <td align="right" class="txt1">密码：</td>
    <td><input name="upwd" type="password"
class="inputText" id="upwd" maxlength="12"
οnmοuseοver="this.className='inputText2'"
οnmοuseοut="this.className='inputText'"
οnblur="check_upwd()" /></td>
    <td class="txt2"><span id="upwd_tag">密码长度最低
为6位</span></td>
  </tr>
  <tr>
    <td align="right" class="txt1">重复密码：</td>
    <td><input name="upwd2" type="password"
class="inputText" id="upwd2" maxlength="12"
οnmοuseοver="this.className='inputText2'"
οnmοuseοut="this.className='inputText'"
οnblur="check_upwd2()" /></td>
    <td class="txt2"><span id="upwd2_tag">请确认刚才
输入的密码</span></td>
  </tr>
  <tr>
    <td align="right" class="txt1">性别：</td>
    <td><input name="usex" type="radio" value="1"
οnclick="check_usex()" />
      男
        <input name="usex" type="radio" value="0"
οnclick="check_usex()" />
      女</td>
    <td class="txt2">&nbsp;<span id="usex_tag">
</span></td>
  </tr>
  <tr>
    <td align="right" class="txt1">邮箱：</td>
    <td><input name="umail" type="text"
class="inputText" id="umail"
οnmοuseοver="this.className='inputText2'"
οnmοuseοut="this.className='inputText'"
οnblur="check_umail()" /></td>
    <td class="txt2"><span id="umail_tag">请输入正确
的邮箱格式</span></td>
  </tr>
  <tr>
    <td align="right" class="txt1">年龄：</td>
    <td><input name="uage" type="text"
class="inputText" id="uage"
οnmοuseοver="this.className='inputText2'"
οnmοuseοut="this.className='inputText'"
οnblur="check_uage()" /></td>
    <td class="txt2"><span id="uage_tag">请输入您的年
龄</span></td>
  </tr>
  <tr>
    <td align="right" class="txt1">验证码：</td>
    <td><input name="anycode" type="text"
id="anycode" size="16" class="inputText"
οnmοuseοver="this.className='inputText2'"
οnmοuseοut="this.className='inputText'"
οnblur="checkcode()" /></td>
    <td><span id="code"></span> &nbsp;
<a href="#" οnclick="showcode()"><span id="F5code"
class="txt2">看不清？点击刷新</span></a>
    <span id="code_tag" class="txt2"></span>
 </td>
  </tr>
  <tr>
    <td colspan="3" align="center"><input
name="Submit" type="submit" class="input1" value="提
交" /> &nbsp;
    <input name="reset" type="reset" class="input2"
id="reset" value="重置" /></td>
  </tr>
</table>
</form>
</body>
</html>

储采珍
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery实现用户注册的表单验证示例
10-26
用户注册的表单往往是需要进行验证的，否则会有一些不否合规则的数据入库，后果会不堪设想，下面为大家详细介绍下通过jquery是如何实现的，下面有个示例，感兴趣的朋友可以参考下
注册表单验证
m0_74348480的博客
01-17 430
注册表单验证
用户注册表单验证
csdn_wyl的博客
09-13 9494
大概是一些文本框的验证，单选按钮，复选框的验证，通过表单名字获取表单，再调用表单里的内容。验证文本框用正则表达式。通过这次练习，增加了对javascript运用的熟练程度。 效果图 步骤 重要代码截图 文本框 单选 复选 验证所有 js代码<script> //页面加载函数 function iniState() {
用户注册表单的设计及验证
weixin_48864837的博客
03-21 3785
JSP程序设计 用户注册表单的设计及验证
JQuery用户注册表单验证
Sirius小鑫的博客
11-22 2715
使用jquery编写代码实现用户注册表单的验证功能：代码地址。
5.用户注册_表单验证——使用wtforms-tornado表单数据验证
m0_63953077的博客
11-08 276
使用wtforms-tornado表单数据验证
yii用户注册表单验证实例
10-23
主要介绍了yii用户注册表单验证,以实例形式详细分析了基于yii框架的用户注册表单验证功能模型,视图及控制器层具体实现技巧,需要的朋友可以参考下
PHP实现的用户注册表单验证功能简单示例
10-17
主要介绍了PHP实现的用户注册表单验证功能,结合简单实例形式分析了php form表单提交、数据库查询、正则验证等相关操作技巧,需要的朋友可以参考下
Ajax注册用户时实现表单验证
12-07
很多时候在网站上注册时，我们会发现，注册表单通常需要检查用户名和电子邮件地址的...图1新浪微博注册表单 1、正文 假设，现在要求我们实现一个注册界面并且它采用实时方式检查用户信息是否符合系统的要求。 其中，
注册时的表单验证
m0_46570170的博客
04-03 1268
用户名验证 首先用户名要大于6位小于12位 然后给用户名表单加一个离开焦点的事件 如果输入有错 就下显示提示信息 js代码 //验证名户名是符合法 var elementById = document.getElementById("username"); elementById.onblur=function (){ //trim() 去除字符串两端的空格 value是得到表单的内容 var username = document.getEle...
JS注册表单验证
10-15
网上常见的用JS编写的注册表单验证的代码，非常实用哦
Web前端 | 注册表单验证
ZY-JIMMY
05-08 2万+
注册格式要求：   页面中所有项均为必填项 登录账号：只能是数字或字母且以字母开头 密码：大于8位且需要有字母和数字之外的字符 姓名：格式为2-4个汉字 出生年月日：格式为yyyy-mm-dd 【eg：1998-02-17】 邮编：正确的6位数字邮编 E-mail：基本格式 Html程序代码如下(页面程序，封装在index.html中)： &lt;!DOCTYPE html&...
HTML简单注册界面——含表单验证
热门推荐
荷塘月色
10-28 7万+
最近学习HTML表单，感慨万千。虽然看起来好像不难学，但要是真自己实践起来问题却多多。这里是我写的一个简单的注册页面，只有“注册账号、密码、重输密码”三个文本框，还包含了原生JavaScript验证。（记一下，也希望能给有需要的人一点帮助。）
javascript - 用户注册页面（表单验证）
zyljjf的博客
09-26 1万+
javascript - 用户注册页面java <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> ![var names = \["tom","jack","lily","韩梅梅"\]; fu
小程序之简单登录注册表单验证
weixin_30607659的博客
08-28 2512
这段时间在做员工管理的小程序，前期在登录注册上花了不少功夫，今天就给大家分享下。 效果图，wxss的内容较简单，自己编写即可。 ##主要内容 一、首先我是在util.js中引入表单正则验证规则，给予login.js来引用 function regexConfig() { var reg = { userid: /^[A-Za-z0-9]...
JavaScript基础—表单验证
csdn2479993071的博客
09-27 180
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script> var names = ["tom","jack","lily","韩梅梅"]; //表单验证 function my
jsp用户注册表单验证
最新发布
04-23
为了实现jsp用户注册表单验证，您可以使用以下步骤： 1. 创建一个注册表单，包括所需的输入字段（例如姓名、电子邮件地址、密码等）以及提交按钮。 2. 在提交按钮上添加JavaScript函数，以便在用户单击按钮时执行...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值