蜗牛—JavaScript学习之表单验证

最新推荐文章于 2022-11-10 22:15:55 发布
最新推荐文章于 2022-11-10 22:15:55 发布
阅读量805 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq1791422018/article/details/26146555
版权 
<!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">
   
    ul {list-style-type:none;}
    ul li {margin-bottom:15px;}
	
   .myclock{font-size:12px;color:#0000CC;}
    .front_input {width:150px;display:block;text-align:right;}
    .front_input,ul li input {float:left;}
    .after_input {margin-left:5px;color:#FF0000;font-size:14px;folat:left;}
     ul input {width:200px;height:18px;}
    .front_input {clear:both;}
   </style>
   <script type="text/javascript">
   function showtime()
	{
	var now = new Date();
	var year = now.getFullYear();
	var month = now.getMonth()+1;
	var dath = now.getDate();
	var hour = now.getHours();
	var mi = now.getMinutes();
	var se = now.getSeconds();
	if (mi < 10) //如果分钟只有1位，补0显示
		mi="0"+mi;
	if (se < 10) //如果秒数只有1位，补0显示
		se="0"+se;

	if(hour<12)
		document.myform.myclock.value=hour+":"+mi+":"+se+" AM";
	if(hour>12)
		document.myform.myclock.value=(hour-12)+":"+mi+":"+se+" PM";
	var myTime = setTimeout("showtime()",1000);	
	//每1000毫秒，调用函数显示
}
   
   
    function check_username(){
     var username;
     username = document.getElementById('username').value;
     //username = username.Trim();
     if (username == "") {
      document.getElementById('username_error').innerHTML = "请输入用户名";
      } else {
       if (/^\w{6,20}$/.test(username)) {
        document.getElementById('username_error').innerHTML = "";
        } else {
        document.getElementById('username_error').innerHTML = "请输入6 ~ 20 字符【0-9】【a-z-A-Z】";
        }
     }
    }
    /**
    *检查Email
    */
    //---------------------------------------------------------------------------
    function check_email(){
     var email;
     email = document.getElementById('email').value;
    // email = email.Trim();
     if (email == "") {
      document.getElementById('email_error').innerHTML = "请输入Email";
      } else {
       if (/^[\w-]+[\.]*[\w-]+[@][\w\-]{1,}([.]([\w\-]{1,})){1,3}$/.test(email)) {
        document.getElementById('email_error').innerHTML = "";
        } else {
        document.getElementById('email_error').innerHTML = "请输入有效的Email地址";
        }      
      }
     }
    /**
    *检查密码
    */
    //---------------------------------------------------------------------------
    function check_pass(){
     var pass;
     pass = document.getElementById('pass').value;
   //  pass = pass.Trim();
     _pass = pass;
     if (pass == "") {
      document.getElementById('pass_error').innerHTML = "请输入密码";
      } else {
       if (/^\w{6,20}$/.test(pass)) {
        document.getElementById('pass_error').innerHTML = "";
        } else {
        document.getElementById('pass_error').innerHTML = "请输入6 ~ 20 字符【0-9】【a-z-A-Z】";
        }      
      }
     }
    /**
    *检查rpass
    */
    //---------------------------------------------------------------------------
    function check_rpass(){
     var rpass;
     rpass = document.getElementById('rpass').value;
    // rpass = rpass.Trim();
     if (rpass == "") {
      document.getElementById('rpass_error').innerHTML = "请输入确认密码";
      } 
     else if (rpass !=_pass) {
      document.getElementById('rpass_error').innerHTML = "密码不一致";
      }
     else {
      document.getElementById('rpass_error').innerHTML = ""
      }    
     }
	 //-----------------------------------------------------------------------------
	  function check_tel(){
     var tel;
     tel = document.getElementById('tel').value;
   //  tel = tel.Trim();
     if (tel== "") {
      document.getElementById('tel_error').innerHTML = "请输入电话号码";
      } else {
       if (tel.length==11) {
        document.getElementById('tel_error').innerHTML = "";
        } else {
        document.getElementById('tel_error').innerHTML = "请输入11位数字";
        }
     }
    }
    //---------------------------------------------------------------------------
    function regist(){
     var username_error=document.getElementById('username_error').innerHTML;
     var pass_error=document.getElementById('pass_error').innerHTML;
     var rpass_error=document.getElementById('rpass_error').innerHTML;
     var email_error=document.getElementById('email_error').innerHTML;
	  var tel_error=document.getElementById('tel_error').innerHTML;
     var username=document.getElementById('username').value;
     var pass=document.getElementById('pass').value;
     var rpass=document.getElementById('rpass').value;
     var email=document.getElementById('email').value;
	 var email=document.getElementById('tel').value;    
     //判断错误信息全部为空并且文本框全部不为空
     if ((username_error == "" && pass_error == "" && rpass_error == "" && email_error == "")&&(username != "" && pass != "" && rpass != "" && email != "")) {
      alert ("恭喜，注册成功!");
      } else {
       alert ("注册信息填写错误，请仔细检查更正后再提交");
      
       }
    
    
     }       
   </script>
</head>
<body οnlοad="showtime();" bgcolor="#FFCC66">
用户注册表单
<hr>
<form name="myform" method="post">
<input class="myclock" name="myclock" size="20" disabled/>
   <ul>
    <li>
     <span class="front_input">用户名:</span><input id="username" type="text" class="_input" οnfοcus="check_username()" οnblur="check_username()" /><span id="username_error" class="after_input"></span>
    </li>
    <li>
     <span class="front_input">密码:</span><input id="pass" type="password" class="_input" οnfοcus="check_pass()" οnblur="check_pass()" /><span id="pass_error" class="after_input"></span>
    </li>
    <li>
     <span class="front_input">确认密码:</span><input id="rpass" type="password" class="_input" οnfοcus="check_rpass()" οnblur="check_rpass()" /><span id="rpass_error" class="after_input"></span>
    </li>
	
<li>
<span class="front_input">职业：</span><select name="sel" >
<option value="">教师</option>
<option value="">学生</option>
<option value="">职工</option>
<option value="">农民</option>
<option value="">机关干部</option>
<option value="">歌手</option>
</select><br>
</li>
    <li>
     <span class="front_input">邮箱:</span><input id="email" type="text" class="_input" οnfοcus="check_email()" οnblur="check_email()" /><span id="email_error" class="after_input"></span>
    </li>
    <li>
    <span class="front_input">电话:</span><input id="tel" type="text" class="_input" οnfοcus="check_tel()" οnblur="check_tel()" /><span id="tel_error" class="after_input"></span>

    </li>
    <li>
     <span class="front_input"> 个人简介：</span>
    <textarea id="intro" cols="30" rows="4"></textarea>
  </li>
   </ul>
   <div style="clear:both;margin-left:330px;margin-top:50px;">
   <input type="submit" value="注册" οnclick="regist()"> 
   <input type="reset" value="重置"> 
   </form>
   </div>
</body>
</html>



树上的大腰子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
document getElementById innerHTML
weixin_43726152的博客
05-06 7109
innerHTML在JS是双向功能：获取对象的内容 或 向对象插入内容； 如： 这是内容 ，我们可以通过 document.getElementById(‘demo’).innerHTML 来获取id为aa的对象的内嵌内容； 也可以对某对象插入内容，如 document.getElementById(‘demo’).innerHTML=‘这是被插入的内容’; 这样就能向id为abc的对象插入内容...
JS动态显示时间
Cookie_1030的专栏
09-23 1116
无标题文档 function disptime(){ var time = new Date(); //获得当前时间 var hour = time.getHours(); var minute = time.getMinutes(); var second = time.getSeconds(); document.myForm.myclock.value = time.ge
JavaScript网页特效之网页弹出
weixin_30446197的博客
09-28 67
让它无限循环的弹出链接到的网页吧，好好玩！哈哈 <HTML><HEAD><META http-equiv="Content-Type" content="text/html; charset=gb2312"><TITLE>settimeout方法</TITLE><SCRIPT language="JavaScript"&gt...
jQuery表单验证+日期插件
03-29
jQuery是JavaScript库中最受欢迎的工具之一，它极大地简化了网页的DOM操作、事件处理、动画设计和Ajax交互。在这个主题中，我们关注的是jQuery在表单验证和日期处理方面的应用，具体涉及到"jQuery formValidator...
jQuery表单验证插件
05-17
jQuery 表单验证插件是前端开发中常用的一种工具，它可以帮助开发者轻松实现对用户输入数据的有效性检查，确保表单提交的数据符合预设规则，从而提高用户体验并减少服务器端的处理负担。jQuery库因其简洁易用的API而...
javaScript
07-11
总结来说，JavaScript从一个简单的表单验证语言发展成为一个全面的编程语言，它的应用范围不仅限于网页浏览器，还延伸到服务器端（Node.js）、移动应用开发（Cordova、React Native）以及桌面应用（Electron）。...
表单设计器(Java)
08-01
在Java中，表单设计器可能基于Swing、JavaFX或者Web技术（如HTML5和JavaScript）实现。对于桌面应用，Swing和JavaFX提供丰富的组件库和强大的事件处理机制，使得构建用户友好的表单设计环境成为可能。对于Web应用，...
MySql_MSSQL _Oracle基础知识以及HTML+Javascript+CSS学习资料
02-08
JavaScript是一种解释型的编程语言，主要负责网页的交互性，可以实现动态效果、表单验证、异步数据请求等功能。 学习HTML，你需要熟悉基本标签和属性，理解盒模型和流体布局。CSS的学习包括选择器、属性、层叠规则...
阶段二-蜗牛CRM管理系统
最新发布
weixin_45732755的博客
11-10 170
Bootstrap+Vue+Axios开发
蜗牛爬井
zjhzcjg的专栏
01-21 8051
2120: 蜗牛爬井 时间限制: 1 Sec  内存限制: 128 MB 提交: 808  解决: 77 [提交][状态][讨论版][Edit] [TestData] 题目描述 有一口井n米深，一只蜗牛每天白天向上爬x米，晚上滑下y米，问蜗牛在第几天爬出井？ 输入 输入数据有多组，每组占一行，每行第一个数是正数n（0）第二、三个数是正数x和y（x>=y），
【每日一题】蜗牛爬井问题
Sunnyside_
09-17 4946
【题目】蜗牛爬井问题 描述 有一口深度为high米的水井，井底有一只青蛙，它每天白天能够沿井壁向上爬up米，夜里则顺井壁向下滑down米，若青蛙从某个早晨开始向外爬，对于任意指定的high、up和down值（均为自然数），计算青蛙多少天能够爬出井口？ 输入： 输入3个正整数：high、up和down。 输出： 输出一个整数，表示天数。输出单独占一行。 #include <iostream> using namespace std; int main() {//井深high 上升up 下降do
郑州轻工业大学OJ python 1072: 青蛙爬井
weixin_42437183的博客
02-16 1051
1072: 青蛙爬井 题目描述 有一口深度为high米的水井，井底有一只青蛙，它每天白天能够沿井壁向上爬up米，夜里则顺井壁向下滑down米，若青蛙从某个早晨开始向外爬，对于任意指定的high、up和down值（均为自然数），计算青蛙多少天能够爬出井口？ 输入 输入3个正整数：high、up和down。 输出 输出一个整数，表示天数。输出单独占一行。 样例输入 10 2 1 样例输出 9 在这里插...
利用js进行表单验证：判断用户名和密码非空
热门推荐
看不过的黑工坊
03-20 1万+
转自：http://www.runoob.com/js/js-form-validation.html http://www.jikexueyuan.com/course/597_7.html?ss=2 function validateForm() { var x=document.forms["myForm"]["fname"].value; if (x==nul
蜗牛—JavaScript学习之仿网易邮箱注册页面
树上的大腰子
05-18 3156
body { font:12px/25px 宋体; color:#333; background:#d4e8f3; } ul,li,dl,dt,dd,input { margin:0; padding:0; } ul { list-style:none; } #mail { margin:20px auto; width:646px; } #mail .menu { float:left; mar
蜗牛—JavaScript学习之鼠标滑过与离开
树上的大腰子
05-25 989
JavaScript初学，请多多关照
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值