第九章 表单校验

其他 2018-07-30 15:11:02 阅读次数: 0

1，输入内容提示

*{padding:0; margin:0;font-size:12px;
    line-height:25px;}

.register{
    float:none;
    width: 503px;
    clear:both;
    margin: 0px auto;
}
.register dl{clear: both;}
.register dt{width:120px;
    text-align:right;
    padding-right:5px;
    float: left;
}
.inputs {
    border: 1px solid #333;
    width:120px;
    height: 20px;;
}

.register dl dd div{
    color:#ff0000;
    padding-left:5px;
    display: inline;
}
.btn{width: 60px; text-align: center; height: 26px; margin: 5px 5px 0 0;}



<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>百度注册页面</title>
	<link href="reg.css" rel="stylesheet">
</head>
<body>
<div class="register">
	<div class="center"><img src="images/header1.jpg" /></div>
  <form action="success.html" method="post" id="myform">
	  <dl>
		  <dt>用户名：</dt>
		  <dd><input id="user" type="text"  class="inputs"/><div id="userId"></div></dd>
	  </dl>
	  <dl>
		  <dt>密码：</dt>
		  <dd><input id="pwd" type="password"  class="inputs"/><div id="pwdId"></div></dd>
	  </dl>
	  <dl>
		  <dt>确认密码：</dt>
		  <dd><input id="repwd" type="password"  class="inputs"/><div id="repwdId"></div></dd>
	  </dl>
	  <dl>
		  <dt>性别：</dt>
		  <dd><input name="sex" type="radio" value="男" />男 <input name="sex" type="radio" value="女" />女
			  <div id="sexId"></div></dd>
	  </dl>
	  <dl>
		  <dt>电子邮件：</dt>
		  <dd><input id="email" type="text"  class="inputs"/><div id="emailId"></div></dd>
	  </dl>
	  <dl>
		  <dt>出生日期：</dt>
		  <dd><select id="year">
			  <script>
				  for(var i=1900;i<=2015;i++){
					  document.write("<option value="+i+">"+i+"</option>");
				  }
			  </script>
		  </select>年
			  <select id="month">
				  <script>
					  for(var i=1;i<=12;i++){
						  document.write("<option value="+i+">"+i+"</option>");
					  }
				  </script>
			  </select>月
			  <select id="day">
				  <script>
					  for(var i=1;i<=31;i++){
						  document.write("<option value="+i+">"+i+"</option>");
					  }
				  </script>
			  </select>日</dd>
	  </dl>
	  <dl>
		  <dt>&nbsp;</dt>
		  <dd><input name="sub" type="submit" value="注册" class="btn" /> <input name="cancel" type="reset" value="清除"  class="btn"/></dd>
	  </dl>
  </form>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
	//验证用户名
	function user(){
	    var reg=new RegExp(/^\w+$/);
		var $user=$("#user");
		var $userid=$("#userId");
        $userid.html("")
		if ($user.val()==""){
		    $userid.html("用户名不能为空")
			return false;
		}
		if(!reg.test($user.val())){
            $userid.html("用户名必须由字母，数字和下划线组成")
			return false;
		}
        if($user.val()<4||$user.val()>12){
            $userid.html("用户名必须由字母，数字和下划线组成")
            return false;
        }
		return true;
    }
    //验证密码
    function pass() {
		var $pwd=$("#pwd");
		var $pwdid=$("#pwdId");
        $pwdid.html("")
		if ($pwd.val()==""){
            $pwdid.html("密码不能为空")
			return false;
		}
		if ($pwd.val().length<6||$pwd.val().length>12){
            $pwdid.html("密码长度为6~12个字符")
            return false;
		} 
		return true;
    }
    //确认密码
	function truePass() {
        var $repwd=$("#repwd");
        var $pwd=$("#pwd");
        var $repwdid=$("#repwdId");
        $repwdid.html("")
		if($repwd.val()!=$pwd.val()){
            $repwdid.html("两次输入的密码不一致")
			return false;
		}
		return true;
    }
    //验证邮箱
	function Email() {
		var $email=$("#email");
		var $emailid=$("#emailId");
        $emailid.html("")
		if($email.val()==""){
            $emailid.html("邮箱地址不能为空")
            return false;
		}
		if ($email.val().indexOf("@")==-1||$email.val().indexOf(".")==-1){
            $emailid.html("邮箱地址必须包含@和.")
			return false;
		}
        return true;
    }
    //绑定事件
    $(function () {
		$("#user").blur(user);
		$("#pwd").blur(pass);
        $("#repwd").blur(truePass);
        $("#email").blur(Email);
        $("#myform").submit(function (){

			var flag=true;
			if(!user()){
			    flag=false;
            }
            if(!pass()){
			    flag=false;
            }
            if(!truePass()){
			    flag=false;
            }
            if(!Email()){
			    flag=false;
            }
            return flag;
        })
    })
</script>
</body>
</html>



<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<title>注册成功</title>
<style type="text/css">
body{ margin:0;
text-align:center;
font-size:24px;
font-weight:bold;}
</style>
</head>

<body>
<img src="images/top.jpg" /><br />
欢迎您注册成为百度用户!
</body>
</html>

2，用户注册提示

*{
    margin:0;
    padding:0;
    font-size:14px;
    line-height:20px;
}
.main{
    width:900px;
    margin: 0 auto;
}
.main dl{clear: both; height: 30px;}
.main dl dt{
    text-align:right;
    float: left;
    width:180px;
    height:25px;
    padding-right:5px;
}
.inputs{
    width:130px;
    height:16px;
    border:solid 1px #666666;
    float:left;
    margin-right:5px;
}
.main dl dd div{
    display: inline;
    margin-left:10px;
    color:#F00;
}



<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>使用正则表达式验证表单内容</title>
	<link href="reg1.css" rel="stylesheet">
</head>

<body>
<div class="main"><img src="images/login1 (2).jpg" alt="logo"/>
	<form action="https://zhidao.baidu.com" id="myform" method="post">
		<dl>
			<dt>用户名：</dt>
			<dd><input id="user" type="text" class="inputs" onblur="checkUser()" /><div id="user_prompt"></div></dd>
		</dl>
		<dl>
			<dt>Email地址：</dt>
			<dd><input id="email" type="text" class="inputs" onblur="checkEmail()" /><div id="email_prompt"></div></dd>
		</dl>
		<dl>
			<dt>手机号码：</dt>
			<dd><input id="mobile" type="text" class="inputs" onblur="checkMobile()" /><div id="mobile_prompt"></div></dd>
		</dl>
		<dl>
			<dt>登录密码：</dt>
			<dd><input id="pwd" type="password"  class="inputs" onblur="checkPwd()" /><div id="pwd_prompt"></div></dd>
		</dl>
		<dl>
			<dt>密码确认：</dt>
			<dd><input id="repwd" type="password"  class="inputs" onblur="checkRepwd()" /><div id="repwd_prompt"></div></dd>
		</dl>
		<dl>
			<dt>&nbsp;</dt>
			<dd><input name="img" type="image" src="images/login1 (1).jpg" /></dd>
		</dl>
	</form>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
	//验证用户名
	function user() {
		var reg=new RegExp(/^[a-zA-Z]\w{4,15}$/);
		var $user=$("#user");
		var $user_prompt=$("#user_prompt");
		    $user_prompt.html("");
		if ($user.val()==""||!reg.test($user.val())){
            $user_prompt.html("用户名不正确");
			return false;
		}
		    return true;
    }
    //验证email
	function email() {
		var $email=$("#email");
		var $email_prompt=$("#email_prompt");
            $email_prompt.html("");
		if ($email.val().indexOf("@")==-1||$email.val().indexOf(".")==-1||($email.val().indexOf("@"))>($email.val().indexOf("."))){
            $email_prompt.html("Email格式不正确，例如[email protected]");
            return false;
		}
            return true;
    }
    //验证手机号码
	function mobile() {
	    var reg=new RegExp(/^13[0-9]{9}$/)
        var $mobile=$("#mobile");
        var $mobile_prompt=$("#mobile_prompt");
		    $mobile_prompt.html("");
        if (!reg.test($mobile.val())){
            $mobile_prompt.html("手机号码格式错误");
            return false;
		}
		    return true;
    }
    //验证密码
	function pwd() {
	    var reg=RegExp(/^\w+$/);
		var $pwd=$("#pwd");
		var $pwd_prompt=$("#pwd_prompt")
		    $pwd_prompt.html("");
		if (!reg.test($pwd.val())||$pwd.val().length<4||$pwd.val().length>10){
            $pwd_prompt.html("密码格式错误");
            return false;
		}
            return true;
    }
    //密码确认
	function repwd() {
        var $pwd=$("#pwd");
		var $repwd=$("#repwd");
        var $repwd_prompt=$("#repwd_prompt");
        $repwd_prompt.html("");
        if ($pwd.val()!=$repwd.val()){
            $repwd_prompt.html("密码输入不一致")
            return false;
		}
            return true;
    }
    $(function () {
		$("#user").blur(user);
        $("#email").blur(email);
        $("#mobile").blur(mobile);
        $("#pwd").blur(pwd);
        $("#repwd").blur(repwd);
        $("#myform").submit(function(){
			var flag=true;
			if(!user()){
			    flag=false
			}
            if(!email()){
                flag=false
            }
            if(!mobile()){
                flag=false
            }
            if(!pwd()){
                flag=false
            }
            if(!repwd()){
                flag=false
            }
            return flag;
        })
    })
</script>
</body>
</html>

3，提示错误信息

*{
    margin:0;
    padding:0;
    font-size:12px;
    line-height:25px;
}
.main{
    width:470px;
    margin: 0 auto;
}

.main dl{clear: both; height: 30px;}
.main dl dt{
    text-align:right;
    float: left;
    width:100px;
    height:25px;
    padding-right:5px;
}
.inputs{
    width:100px;
    height:16px;
    border:solid 1px #666666;
    float:left;
    margin-right:5px;
}
.main dl dd div{
    display: inline;
    margin-left:10px;
    color:#F00;
}




<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
<title>制作注册验证</title>
	<link href="reg3.css" rel="stylesheet">
</head>

<body>
<div class="main"><img src="images/top.jpg"  alt="top"/>
	<form action="" method="post" id="myform">
		<dl>
			<dt class="left">用户名：</dt>
			<dd><input id="user" type="text" class="inputs" onblur="checkUser()" onfocus="showUser()" /><div id="user_prompt" class="prompt"></div></dd>
		</dl>
		<dl>
			<dt class="left">密码：</dt>
			<dd><input id="pwd" type="password"  class="inputs" onblur="checkPwd()" onfocus="showPwd()" /><div id="pwd_prompt" class="prompt"></div></dd>
		</dl>
		<dl>
			<dt class="left">&nbsp;</dt>
			<dd><input name="" type="image" src="images/sumbit_btn.jpg" /></dd>
		</dl>
	</form>
</div>
<script src="js/jquery-1.12.4.js"></script>
<script>
	function showUser() {
        $("#user_prompt").html("首位为字母的4~16个数字，字母，下划线")
    }

	function checkUser() {
        var reg=new RegExp(/^[a-zA-Z]\w{4,15}$/);
		var $user=$("#user");
		var $user_prompt=$("#user_prompt");
        $user_prompt.html("");
		if(!reg.test($user.val())){
            $user_prompt.html("用户名不正确");
            return false;
		}
		    return true;
    }

    function showPwd() {
        $("#pwd_prompt").html("请输入4~10个字母和下划线")
    }

    function checkPwd() {
        var reg=new RegExp(/^\w{4,10}$/);
        var $pwd=$("#user");
        var $pwd_prompt=$("#pwd_prompt");
        $pwd_prompt.html("");
        if(!reg.test($pwd.val())){
            $pwd_prompt.html("密码不正确");
            return false;
        }
        return true;
    }

    $(function () {
		$("#myform").submit(function () {
		    var flag=true;
			if (!checkUser()) {
			    flag=false;
			}
            if (!checkPwd()) {
                flag=false;
            }
            return flag;
        })
    })
</script>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/jiangmye/article/details/81219662
今日推荐
基于大语言模型的开源知识库问答系统 MaxKB GitHub Star 数量突破 5,000 个！
美国拟限制 AI 大模型出口中国和俄罗斯
苹果将与 OpenAI 达成协议，将 ChatGPT 应用于 iPhone
openKylin 社区生态委员会第六次会议圆满召开
阿里云正式发布通义千问 2.5
Python 3.13 发布首个 Beta：实验性自由线程模式和 JIT、改进交互式解释器
Stack Overflow 拿我的代码去训练 AI 大模型，还封了我的账号
Pop!_OS 的 COSMIC 桌面完成 App Store 上架工作
报告：Django 仍然是 74% 开发者的首选
《2024 年一季度互联网投融资运行情况》研究报告
15 年前上了“FFmpeg 耻辱柱”，今天他还得谢谢咱——腾讯QQPlayer一雪前耻？
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
周排行
BPM为企业带来的实际利益
好程序员web前端分享css常用属性缩写
Java文件下载（excel）
css样式的动态添加及显示和隐藏等零碎用法
axios全局配置以及拦截器
使用Logstash来实时同步MySQL和log日志数据到ES
C++获取当前时间（年月日、时分秒、毫秒）
Odoo产品分析 (四) -- 工具板块(11) -- 网站即时聊天(1)
Java环境配置正确，但是java、javac、java -version均返回“不是内部或外部命令，也不是可运行的程序或批处理文件”？
01 官网下载各种CentOS教程（超详细版）
每日归档
更多
2024-05-14(0)
2024-05-13(18)
2024-05-12(0)
2024-05-11(38)
2024-05-10(38)
2024-05-09(35)
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022