JavaScript7——表单基本验证技术

最新推荐文章于 2022-05-05 22:41:52 发布
最新推荐文章于 2022-05-05 22:41:52 发布
阅读量1.8k 收藏 11
点赞数 2
分类专栏： JavaScript 文章标签： javascript html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47887988/article/details/123765792
版权

 

 

 

 

 

10.1 验证休闲网登录页面

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>休闲网登录页面</title>
	<link href="login.css" rel="stylesheet" style="text/css">
    <script type="texxt/javascript">
    	function check(){
    		var mail=document.getElementById("email").value;
    		if(mail==""){//检测Email是否为空
    			alert("Email不能为空");
    			return false;
    		}
    		if(mail.indexOf("@")==-1){
    			alert("Email格式不正确\n必须包含@");
    			return false;
    		}
    		if(mail.indexOf(".")==-1){
    			alert("Email格式不正确\n必须包含.");
    			return false;
    		}
    		return true;
    	}
    </script>
</head>
<body>
    <div id="header" class="main">
        <div id="headerLeft">
            注册|登录|帮助
        </div>
    </div>
    <div class="main">
        <table id="center" border="0" cellspacing="0" cellpadding="0">
    		<tr>
    			<td><img src="images/dl_l_t.gif"/></td>
            </tr>
  			<tr>
    			<td class="bg">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    					<tr>
    						<td class="bold">登录休闲网</td>
  						</tr>
  						<form action="success.html" method="post" name="myform" onsubmit="return check()">
                            <tr>
    							<td>Email：<input id="email" type="text"  class="inputs"/></td>
  							</tr>
  							<tr>
    							<td>&nbsp;密码：<input id="pwd" type="password"   class="inputs"/></td>
  							</tr>
  							<tr>
    							<td style="height:35px; padding-left:30px;"><input name="btn" type="submit" value="登录" class="rb1" /></td>
  							</tr>
                        </form>
					</table>
				</td>
  			</tr>
  			<tr>
   				<td><img src="images/dl_l_b.gif" width="362" height="5" /></td>
            </tr>
		</table>
	</div>
    <div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a>  | <a href="#">帮助中心</a></div>
</body>

 

10.2 验证休闲网注册页面

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>休闲网注册页面</title>
	<link href="login.css" rel="stylesheet" type="text/css">
	<script type="text/javascript">
    function check(){
        var mail=document.getElementById("email").value;
        if(mail==""){
            alert("Email不能为空");
            return false;
        }
        if(mail.indexOf("@")==-1){
			alert("Email格式不正确\n必须包含@");
			return false;
		}
		if(mail.indexOf(".")==-1){
			alert("Email格式不正确\n必须包含.");
			return false;
		}
        var pwd=document.getElementById("pwd").value;
        if(pwd==""){
            alert("密码不能为空");
			return false;
        }
        if(pwd.length<6){
			alert("密码必须等于或大于6个字符");
			return false;
		}
        var repwd=document.getElementById("repwd").value;		
		if(pwd!=repwd){
			alert("两次输入的密码不一致");
			return false;
		}
		var user=document.getElementById("user").value;	
        	if(user==""){
			alert("姓名不能为空");
			return false;
		}
        for(var i=0;i<user.length;i++){
		var j=user.substring(i,i+1);
		if(isNaN(j)==false){
			alert("姓名中不能包含数字");
			return false;
			}
		}	
		return true;
    }
    </script>
</head>
<body>
    <div id="header" class="main">
        <div id="headerLeft">
            <img src="images/logo.gif" />
        </div>
        <div id="headerRight">
            注册|登录|帮助
        </div>
    </div>
    <div class="main">
    <table  id="center" border="0" cellspacing="0" cellpadding="0">
        <tr>
   			<td class="bold" colspan="2">注册休闲网</td>
  		</tr>
  		<form action="" method="post" name="myform" onsubmit="return check()">			  <tr>
    			<td class="left">您的Email：</td>
   				<td><input id="email" type="text"  class="inputs"/></td>
  			</tr>
  			<tr>
  				<td class="left">输入密码：</td>
    			<td><input id="pwd" type="password"   class="inputs"/></td>
  			</tr>
   			<tr>
  				<td class="left">再输入一遍密码：</td>
    			<td><input id="repwd" type="password"   class="inputs"/></td>
  			</tr>
  			<tr>
  				<td class="left">您的姓名：</td>
    			<td><input id="user" type="text"   class="inputs"/></td>
  			</tr>
  			<tr>
  				<td class="left">性别：</td>
    			<td><input name="sex" type="radio" value="1" /> 男
    			<input name="sex" type="radio" value="0" /> 女</td>
  			</tr>
  			<tr>
  				<td class="left">出生日期：</td>
    			<td><select name="year">
    					<script type="text/javascript">
							for(var i=1900;i<=2009;i++){
								document.write("<option value="+i+">"+i+"</option>");	
							}
						</script>
    				</select>年
    				<select name="month">
    					<script type="text/javascript">
							for(var i=1;i<=12;i++){
								document.write("<option value="+i+">"+i+"</option>");	
							}
						</script>
    				</select>月
    				<select name="day">
    					<script type="text/javascript">
							for(var i=1;i<=31;i++){
								document.write("<option value="+i+">"+i+"</option>");	
							}
						</script>
    				</select>日</td>
  			</tr>
  			<tr>
                <td>&nbsp;</td>
    			<td ><input name="btn" type="submit" value="注册" class="rb1" /></td>
      		</tr>
        </form>
	</table>
</div>
<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a>  | <a href="#">帮助中心</a></div>
</body>

 

10.3 动态改变文本框效果

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>休闲网登录页面</title>
	<link href="login.css" rel="stylesheet" type="text/css">
	<script type="text/javascript">
	function check(){
		var mail=document.getElementById("email").value;
		if(mail==""){//检测Email是否为空
			alert("Email不能为空");
			document.getElementById("email").focus();
			return false;
		}
		if(mail.indexOf("@")==-1 || mail.indexOf(".")==-1){
			alert("Email格式不正确\n必须包含符号@和.");
			document.getElementById("email").focus();
			document.getElementById("email").select();
			return false;
		}
		return true;
	}
function clearText(){
	var mail=document.getElementById("email");
	if(mail.value=="请输入正确的电子邮箱"){
		mail.value="";
		mail.style.borderColor="#ff0000";
		}
	}
</script>
</head>

<body>
	<div id="header" class="main">
  		<div id="headerLeft"><img src="images/logo.gif"/></div>
  		<div id="headerRight">注册 | 登录 | 帮助</div>
	</div>
	<div  class="main">
		<table id="center" border="0" cellspacing="0" cellpadding="0">
    		<tr>
    			<td><img src="images/dl_l_t.gif"/></td>
            </tr>
  			<tr>
    			<td class="bg">
                    <table width="100%" border="0" cellspacing="0" cellpadding="0">
    					<tr>
    						<td class="bold">登录休闲网</td>
  						</tr>
  						<form action="success.html" method="post" name="myform" onsubmit="return check()">
                			<tr>
    							<td>Email：<input id="email" type="text"  class="inputs" value="请输入正确的电子邮箱" onfocus="clearText()"/></td>
  							</tr>
  							<tr>
    							<td>&nbsp;密码：<input id="pwd" type="password"   class="inputs"/></td>
  							</tr>
 							<tr>
    							<td style="height:35px; padding-left:30px;"><input name="btn" type="submit" value="登录" class="rb1" /></td>
  							</tr>
            			</form>
					</table>
				</td>
  			</tr>
  			<tr>
    			<td><img src="images/dl_l_b.gif" width="362" height="5" /></td>
            </tr>
		</table>
	</div>
	<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a>  | <a href="#">帮助中心</a></div>
</body>

 

10.4 制作文本输入提示特效

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
	<title>休闲网注册页面</title>
	<link href="login.css" rel="stylesheet" type="text/css">
	<script type="text/javascript">
function $ (ElementID) {
	return document.getElementById(ElementID);
	}
function checkEmail(){
	var mail=$("email");
	var divID=$("DivEmail");
	divID.innerHTML="";
	if(mail.value==""){
		divID.innerHTML="Email不能为空";
		//mail.focus();
		return false;
		}
	if(mail.value.indexOf("@")==-1){
		divID.innerHTML="Email格式不正确，必须包含@";
		//mail.focus();
		return false;
		}
	if(mail.value.indexOf(".")==-1){
		divID.innerHTML="Email格式不正确，必须包含.";
		//mail.focus();
		return false;
		}
		//return true;
}
function checkPass(){
    var pwd=$("pwd");
	var divID=$("DivPwd");
	divID.innerHTML="";
	if(pwd.value==""){
		divID.innerHTML="密码不能为空";
		//pwd.focus();
		return false;
		}
    if(pwd.value.length<6){
		divID.innerHTML="密码必须等于或大于6个字符";
		//pwd.focus();
		return false;
		}
	//return true;
}
function checkRePass(){
    var pwd=$("pwd"); //输入密码
	var repwd=$("repwd");  //再次输入密码
	var divID=$("DivRepwd");   
	divID.innerHTML="";		
	if(pwd.value!=repwd.value){
		divID.innerHTML="两次输入的密码不一致";
		return false;
		}
	//return true;
}
function checkUser(){
    var user=$("user");
	var divId=$("DivUser");
	divId.innerHTML="";
    if(user.value==""){
		divId.innerHTML="姓名不能为空";
		//user.focus();
		return false;
		}
	for(var i=0;i<user.value.length;i++){
		var j=user.value.substring(i,i+1)
		if(j>=0){
			divId.innerHTML="姓名中不能包含数字";
			//user.focus();
			return false;
			}
	}
		//return true;
	}
</script>
</head>

<body>
	<div id="header" class="main">
  		<div id="headerLeft"><img src="images/logo.gif"/></div>
  		<div id="headerRight">注册 | 登录 | 帮助</div>
	</div>
	<div  class="main">
		<table  id="center" border="0" cellspacing="0" cellpadding="0">
    		<tr>
    			<td class="bold" colspan="2">注册休闲网</td>
  			</tr>
  			<form action="" method="post" name="myform">
                <tr>
    				<td class="left">您的Email：</td>
    				<td>
                        <input id="email" type="text" class="inputs" onblur="checkEmail()"/>
          				<div class="red" id="DivEmail"></div>
                    </td>
  				</tr>
  				<tr>
  					<td class="left">输入密码：</td>
    				<td>
                        <input id="pwd" type="password" class="inputs" onblur="checkPass()"/>
    					<div class="red" id="DivPwd"></div>
                    </td>
  				</tr>
   				<tr>
  					<td class="left">再输入一遍密码：</td>
    				<td>
                        <input id="repwd" type="password" class="inputs" onblur="checkRePass()"/>
    					<div class="red" id="DivRepwd"></div>
                    </td>
  				</tr>
  				<tr>
  					<td class="left">您的姓名：</td>
    				<td>
                        <input id="user" type="text" class="inputs" onblur="checkUser()"/>
    					<div class="red" id="DivUser"></div></td>
  				</tr>
  				<tr>
  					<td class="left">性别：</td>
    				<td>
                        <input name="sex" type="radio" value="1" /> 男
    					<input name="sex" type="radio" value="0" /> 女</td>
  				</tr>
  				<tr>
  					<td class="left">出生日期：</td>
    				<td><select name="year">
    						<script type="text/javascript">
								for(var i=1900;i<=2009;i++){
									document.write("<option value="+i+">"+i+"</option>");	
								}
							</script>
    					</select>年
    					<select name="month">
    						<script type="text/javascript">
								for(var i=1;i<=12;i++){
									document.write("<option value="+i+">"+i+"</option>");	
								}
							</script>
    					</select>月
    					<select name="day">
    						<script type="text/javascript">
								for(var i=1;i<=31;i++){
									document.write("<option value="+i+">"+i+"</option>");	
								}
							</script>
    					</select>日
                    </td>
  				</tr>
  				<tr>
                    <td>&nbsp;</td>
    				<td ><input name="btn" type="submit" value="注册" class="rb1" /></td>
  				</tr>
            </form>
		</table>
	</div>
	<div id="footer" class="main"><a href="#">关于我们</a> | <a href="#">诚聘英才</a> |<a href="#"> 联系方式</a>  | <a href="#">帮助中心</a></div>
</body>

 

<input type="file" /> //选择文件

 

千和儿
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS验证(网页设计中表单数据的验证)
紫竹铃
06-25 3152
/***************************************************************************************************************************************************************************************把以下2个文件放在同一目录下
javaScript表单验证
qq_60555957的博客
07-18 241
JavaScript表单验证小练习
JS实现表单的验证
ASCEICY的博客
05-12 406
无标题文档 function check(){ var userName=document.getElementById("userName2").value;//得到输入的用户名 var email=document.getElementById("email").value;//得到输入的邮箱 var index1=email.indexOf("@");//判断@符号第一次出现
js进行表单验证
张波的技术积累
11-13 819
1：传统的表单验证代码 表单验证 function $(id) { return document.getElementById(id); } function check() { var email = $("email").value; var password = $("password").value
用js实现简单的表单验证
weixin_44807818的博客
11-19 918
js的诞生是为了验证，，而一个web开发不好就会因为验证而死。 表单验证是一个永恒的问题，但其原理和能简单，简单的东西更有生命力。 表单验证图： 因为表现最简单的验证功能，我便对于注册界面写的最为简单了前端德德页面如下： 在前端中接script标签在连接函数和点击事件，给每个input的加上id，js再通过这个指定的id去取得指定的信息，返回验证后结果true或false。代码如下： 验证用...
JavaScript程序设计——页面设置与表单验证实验报告.docx
11-11
实验报告的标题“JavaScript程序设计——页面设置与表单验证实验报告.docx”涉及的核心是JavaScript编程中的两个关键领域：页面设置和表单验证。在Web开发中，JavaScript是一种常用的客户端脚本语言，用于增强用户的...
使用原生javascript创建通用表单验证——更锋利的使用dom对象
10-28
使用原生javascript创建通用表单验证——更锋利的使用dom对象，学习js的朋友可以参考下。
JavaScript表单验证实例之验证表单项是否为空
10-23
总结来说，JavaScript表单验证提供了动态的、客户端的数据校验，能够即时反馈给用户，避免无效的服务器请求。在这个实例中，我们学习了如何使用JavaScript检测表单字段是否为空，并给出了两种不同的实现方法。第一种...
HTML学习笔记（五）——表单
01-08
总的来说，HTML5的表单功能更加丰富和强大，开发者可以更便捷地创建交互式、用户友好的网页，而无需过多依赖JavaScript来实现基本的表单验证和控制。这使得HTML5成为现代网页开发的标准语言，大大提升了Web应用程序...
注册页面及验证
dunyanan1的专栏
10-17 707
用户名：  只能输入英文、数字、空格 口令: 确认口令 : 性别 :男 女 邮箱 : 照片 : 电话 : 生日 : 爱好 : 自我爱好 :   function check_fr
编写一个用户注册信息填写验证程序，注册信息包括用户名、密码、EMAIL地址、联系电话。要求验证联系电话中只能输入数字，EMAIL地址中需要包括“@”符号，密码域不少于6位。要求联系电话在输入过程中保证不能有非数字，而其他两个域在点击注册按钮时再进行数据检查。
06-06
编写一个用户注册信息填写验证程序，注册信息包括用户名、密码、EMAIL地址、联系电话。要求验证联系电话中只能输入数字，EMAIL地址中需要包括“@”符号，密码域不少于6位。要求联系电话在输入过程中保证不能有非数字，而其他两个域在点击注册按钮时再进行数据检查。
jquery实现网站注册页面验证信息
04-04
用jquery实现网站注册页面验证信息，内容很完善的哦
网页注册代码
10-07
网页注册代码的小程序
制作一个登录页面，运用正则表达式编写校验功能：要求输入的用户名和密码不能为空，用户名8位以上的字母组成，密码6位数字。
aigo_2021的博客
05-05 4145
制作一个登录页面，运用正则表达式编写校验功能：要求输入的用户名和密码不能为空，用户名8位以上的字母组成，密码6位数字。 代码展示： <!doctype html> <html lang="en"> <head> <title>Document</title> <script> function loginOnclick(){ var username=document.getElementById("userna.
表单校验。
weixin_44637905的博客
03-30 272
1、表单选择器 :text案例 当加了下面代码以后 <script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script> <script type="text/javascript"> $(function(){ // $(":input").css("background-color","#D32C47"); $(":te
JavaWeb前端开发注册表单验证
我不想读研的博客
08-05 1823
注册表单验证 最近在尝试学习开发一个网站，现将登录页面的表单验证总结如下 表单校验分析 1.用户名：单词字符，8到20位 2.密码：单词字符，8到20位 3.email：邮箱格式 4.姓名：汉字非空 5.手机号：手机号格式 6.出生日期：非空 7.验证码：4个字符非空 表单验证的JS代码 如果输入内容不符合要求，边框则会变为红色，输入正确则边框颜色恢复。 <script> /* 表单校验 1.用户名：单词字符，8到20位 2.密码：单词字符，8到20位 3.ema
网站注册时实现邮箱验证的一种方法
SimpleAct 纸上得来终觉浅 绝知此事要躬行
05-22 5195
用
java用户名密码不能为空代码_jsp注册页面用户名，密码，确认密码，手机号，邮箱不能为空...
weixin_39702649的博客
02-24 3677
效果图： 全部代码：pageEncoding="UTF-8"%>注册界面body{background-image:url(images/image2.jpg);background-size:100% 100%;background-attachment:fixed;}.main{width:525px;margin-left:auto;margin-right:auto;}.hr_1 {...
实现用户登录注册页面jQuery验证不能为空的提示以及确认密码与第一次输入密码不匹配的提示功能
热门推荐
Alex的博客
09-02 1万+
用到了blur方法, 当元素失去焦点时发生 blur 事件。 blur() 函数触发 blur 事件，或者如果设置了 function 参数，该函数也可规定当发生 blur 事件时执行的代码 script代码如下: &lt;script type="text/javascript" src="js/jquery-1.8.3.min.js"&gt;&lt;/script&gt;     &l...
JavaScript教程：从基础到精通——窗口对象解析
这对于创建交互式网页至关重要，比如表单验证、动态加载内容等。 JavaScript教程不仅涵盖了窗口对象的使用，还深入讲解了JavaScript语言的各个方面，对于想要学习JavaScript的开发者来说是一份宝贵的资源，能帮助...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值