精华内容
下载资源
问答
  • 用户注册页面的设计与实现

    千次阅读 2020-10-21 18:20:46
    用户注册页面的设计与实现 功能介绍: 1.使用HTML5表单技术实现用户注册页面,要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。 2.验证要求:每个输入栏目的文本框均需要显示提示信息。用户在点击...

    用户注册页面的设计与实现

    功能介绍:
    1.使用HTML5表单技术实现用户注册页面,要求用户可以输入用户名、密码、真实姓名和电子邮箱等信息进行注册。
    2.验证要求:每个输入栏目的文本框均需要显示提示信息。用户在点击按钮提交注册信息时可以验证所有栏目均为必填项以及电子邮箱的有效性。
    实现效果图:
    在这里插入图片描述
    一、界面设计
    1.使用<div>划分区域
    2.使用CSS外部样式表定义样式
    1)reg.css
    2)关键属性:box-shadow: 10px 10px 15px black;
    二、表单设计
    1.使用<form>形成表单区域
    2.使用<label>标签形成文字标签
    3.使用<input>标签形成各种输入框
    1)type=text:单行文本框;
    2)type=password:密码框;
    3)type=email:邮箱输入框。
    4.使用<button>制作提交按钮
    三、提示与验证功能的实现
    1.使用<input>标签的placeholder属性实现提示效果

    <label>用户名:
    <input type="text" placeholder="请输入用户名" name="username" />
    </label>
    

    2.使用<input>标签的required属性实现非空验证

    <input type="text" placeholder="请输入用户名" name="username" required />
    

    3.使用<input>标签的email类型实现电子邮箱验证

    <input type="email" name="email" />
    

    4.使用<form>标签的autocomplete属性实现内容自动记忆补全

    <form method="post" action="URL" autocomplete="on"  >
        ……(内容省略)
    </form>
    

    四、完整代码

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8" >
            <title>HTML5用户注册页面示例</title>
            <link rel="stylesheet" href="css/reg.css">
        </head>
        <body>
            <div id="container">
                <!--页面标题-->
                <h1>用户注册页面</h1>
                <!--水平线-->
                <hr />
                <!--表单-->
                <form method="post" action="URL" autocomplete="on">
                    <label>用户名:
                        <input type="text" placeholder="请输入用户名" name="username" required />
                    </label>
                    <br />
                    <label>密 码:
                        <input type="password" placeholder="请输入密码" name="pwd" required />
                    </label>
                    <br />
                    <label>确 认:
                        <input type="password" placeholder="请再次输入密码" name="pwd" required />
                    </label>
                    <br />
                    <label>姓 名:
                        <input type="text" placeholder="请输入真实姓名" name="name" required />
                    </label>
                    <br />
                    <label>邮 箱:
                        <input type="email" placeholder="请输入电子邮箱" name="email" required />
                    </label>
                    <br />
                    <button type="submit">
                        提交注册
                    </button>
                </form>
            </div>
        </body>
    </html>

    备注:reg.css文件请下载附件
    https://download.csdn.net/download/YQEMMMM/12999087

    展开全文
  • JavaScript、CSS、HTML 实现用户注册页面与信息校验

    万次阅读 多人点赞 2015-12-12 19:44:04
    需求:实现用户注册页面并作出逻辑校验。要求:  (1)完成注册页面样式如下:  (2)页面提交,用户注册信息不符合规范,要显示红色提示框,如下:  (3)页面提交,用户注册信息不符合规范,要显示...

    需求:实现用户注册页面并作出逻辑校验。要求:

      (1)完成注册页面样式如下:


      (2)页面提交,用户注册信息不符合规范,要显示红色提示框,如下:

      (3)页面提交,用户注册信息不符合规范,要显示绿色提示框,如下:

      分析:HTML实现页面元素,CSS做页面美化,JavaScript 实现逻辑校验;用户注册规则采用正则表达式。

    1、HTML实现注册页面。

      注:在本文中,对代码的详细解释都放在了相应的代码旁边注释内,类似代码不重复注释。

    <span style="font-size:14px;">
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="Content-Type" content="text/html; charset=GBK"> <!-- HTTP标题信息(HTTP-EQUIV) -->
    		<title>用户注册页面</title>
    		
    		<link type="text/css" rel="stylesheet" href="register.css"> <!--引入外部定义好的register.css文件 -->
    		
    		<script type="text/javascript" src="register.js"></script>  <!--引入外部定义好的register.js文件 -->
    		
    	</head>
    	<body>
    		<form action="" method="" οnsubmit="return validateForm()"> <!-- 当触发提交事件时调用validateForm()方法  -->
    			<table border="26" align="center" width="50%">
    				<caption >用户注册</caption>
    				<tr>
    					<td align="right">
    						<sup><font color="red">*</font></sup>用户名:
    					</td>
    					<td><input type="text" name="username" id="username" class="input_class" οnblur="checkUsername(this)" /><span id="username_span">用户名由3-5个字符组成</span></td>					
    				</tr>
    				
    				<tr>
    					<td align="right">
    						<sup><font color="red">*</font></sup>密码:
    					</td>
    					<td><input type="password" name="password" id="password" class="input_class" οnblur="checkPassword(this)" /><span id="password_span">请输入8-12位密码</span></td>					
    				</tr>
    				
    				<tr>
    					<td align="right">
    						<sup><font color="red">*</font></sup>确认密码:
    					</td>
    					<td><input type="password" name="rePassword" id="rePassword" class="input_class" οnblur="checkRePassword(this)" /><span id="rePassword_span">两次密码不一致</span></td>					
    				</tr>
    				
    				<tr>
    					<td align="right">
    						<sup><font color="red">*</font></sup>Email:
    					</td>
    					<td><input type="text" name="Email" id="Email" class="input_class" οnblur="checkEmail(this)" /><span id="Email_span" >格式示例:xxxxxxxx@163.com</span></td>					
    				</tr>
    				
    				<tr>
    					<td align="right">
    						<sup><font color="red">*</font></sup>真实姓名:
    					</td>
    					<td><input type="text" name="realName" id="realName" class="input_class" οnblur="checkName(this)" /><span id="realName_span">由2-5个中文组成</span></td>					
    				</tr>
    				
    				<tr>
    					<td align="right">
    						<sup><font color="red">*</font></sup>省份:
    					</td>
    					<td><select name="province" id="province" οnblur="checkProvince(this)">
    						<option value="--请选择--">--请选择--</option>
    						<option value="河北">河北</option>
    						<option value="山西">山西</option>
    						<option value="山东">山东</option>
    						<option value="海南">海南</option>
    					</select><span id="province_span">请选择省份</span></td>					
    				</tr>
    				
    				<tr>
    					<td align="left" colspan="2">
    						<sup><font color="red">*</font></sup>技术方向:
    					<input type="radio" name="jishu" id="Java" value="Java" checked="checked" />Java <!-- 技术方向默认选中Java -->
    					<input type="radio" name=".jishu" id=".net" value=".net" />.net
    					<input type="radio" name="jishu" id="PHP" value="PHP" />PHP
    					<input type="radio" name="jishu" id="网页" value="网页" />网页
    					<input type="radio" name="jishu" id="IOS" value="IOS" />IOS
    					</td>					
    				</tr>
    				
    				<tr>
    					<td align="center" colspan="2">  <!-- 合并两列 -->
    						<input type="submit" class="aaa" value="注册" />
    						<input type="reset" class="aaa" value="重置" />
    					</td>
    				</tr>
    			</table>
    		</form>
    	</body>
    </html>
    
    </span>

    2、CSS进行页面美化。

      在本文 CSS 代码中主要根据类选择器、标签选择器来设置相应的标签样式:

    <span style="font-size:14px;">
    .input_class {  /*设置class属性名称为input_class的标签内容*/
    	width:250px;
    	height:16px;	
    }
    
    caption{        /*设置caption标签内容*/
    	font-size:30px;
    	color:red;
    	text-shadow: yellow 6px 0px 5px; 
    	font-stretch: wider;
    	font-weight: 900; 
    }
    
    .aaa{          /*设置class属性名称为aaa的标签内容*/
    	font-size:16px;
    	font-weight: bold;
    }
    
    </span>

    3、JavaScript 进行逻辑校验。

      在JavaScript 代码中需要用到正则表达式来简化验证:

    <span style="font-size:14px;">
    /**
     * @author 胡根得 
     * 2015/12/08
     */
    
    		//用户名:
    		var  usernameRegex = /^\w{3,15}$/;
    		//密码:
    		var passwordRegex = /^\w{6,12}$/;
    		//邮箱:
    		var emailRegex = /^\w+@\w+(\.\w+)+$/;
    		//真实姓名:
    		var realNameRegex = /^[\u4e00-\u9fa5]{2,5}$/;
    		
    		//alert("222");
    		function validateForm(){ //定义validateForm方法用于客户端校验
    			var flag = true;
    			//校验用户名
    			var usernameNode = byId("username"); //获得ID值为username的节点对象
    			var username = usernameNode.value;   //获得usernameNode节点的值,即用户在username文本框内填写的值
    			if(!usernameRegex.test(username)){    //验证获得到的值是否符合正则表达式
    				byId("username_span").style.color = "red"; //如果不符合,则将ID值为username_span的节点对象内容变为红色
    				flag = false;        //返回false,不提交
    			}
    			
    			//校验密码
    			var passwordNode = byId("password");  //获得ID值为password的节点对象
    			var password = passwordNode.value;
    			if(!passwordRegex.test(password)){
    				byId("password_span").style.color = "red";
    				flag = false;
    			}
    			
    			//确认密码
    			var rePasswordNode = byId("rePassword");  //获得ID值为rePassword的节点对象
    			var rePassword = rePasswordNode.value;
    			if(!password==rePassword){
    				byId("rePassword_span").style.color = "red";
    				flag = false;
    			}else if(!passwordRegex.test(rePassword)){
    				byId("rePassword_span").style.color = "red";
    				flag = false;
    			}else{
    				byId("rePassword_span").style.color = "green";
    			}
    			
    			//校验邮箱
    			var emailNode = byId("Email");  //获得ID值为Email的节点对象
    			var email = emailNode.value;
    			if(!emailRegex.test(email)){
    				byId("Email_span").style.color = "red";
    				flag = false;
    			}
    			
    			//校验姓名
    			var realNameNode = byId("realName");  //获得ID值为realName的节点对象
    			var realName = realNameNode.value;
    			if(!realNameRegex.test(realName)){
    				byId("realName_span").style.color = "red";
    				flag = false;
    			}
    			
    			//校验省份
    			var provinceNode = byId("province");  //获得ID值为province的节点对象
    			var province = provinceNode.value;
    			if("--请选择--" == province){
    				byId("province_span").style.color = "red";
    				flag = false;
    			}
    
    			return flag;
    		}
    			
    		function byId(id){  //自定义方法,用于获取传递过来的ID值对应的节点对象
    			return document.getElementById(id);
    		}
    			
    		function checkUsername(node){ //当鼠标离开节点时调用此方法,验证节点内容是否符合注册规范
    			//校验用户名
    			var username = node.value;  //得到传递过来的节点对象的值
    			if(!usernameRegex.test(username)){  //验证是否符合节点对应的正则表达式
    				byId("username_span").style.color = "red"; //不符合,相应内容变成红色
    			}else{
    				byId("username_span").style.color = "green";  //符合,相应内容变成绿色
    			}
    		}
    		
    		function checkPassword(node){  //当鼠标离开节点时调用此方法,验证节点内容是否符合注册规范
    			//校验密码
    			var password = node.value;
    			//alert("111");
    			if (!passwordRegex.test(password)) {
    				byId("password_span").style.color = "red";
    			}
    			else {
    				byId("password_span").style.color = "green";
    			}
    		}	
    			
    		function checkRePassword(node){  //当鼠标离开节点时调用此方法,验证节点内容是否符合注册规范
    			//确认密码				
    			var rePassword = node.value;
    			var password = byId("password").value;
    			//alert(repassword+"***"+password);			
    			if(!password==rePassword){					
    				byId("rePassword_span").style.color = "red";
    			}else if(!passwordRegex.test(rePassword)){
    				byId("rePassword_span").style.color = "red";
    			}else{
    				byId("rePassword_span").style.color = "green";
    			}
    		}		
    
    		function checkEmail(node){  //当鼠标离开节点时调用此方法,验证节点内容是否符合注册规范
    			//校验邮箱
    			var email = node.value;
    			if(!emailRegex.test(email)){
    				byId("Email_span").style.color = "red";
    			}else{
    				byId("Email_span").style.color = "green";
    			}
    		}
    			
    		function checkName(node){  //当鼠标离开节点时调用此方法,验证节点内容是否符合注册规范
    			var realName = node.value;
    			if(!realNameRegex.test(realName)){
    				byId("realName_span").style.color = "red";
    			}else{
    				byId("realName_span").style.color = "green";
    			}
    		}
    		
    		function checkProvince(node){  //当鼠标离开节点时调用此方法,验证节点内容是否符合注册规范
    			var province = node.value;
    			if("--请选择--" == province){
    				byId("province_span").style.color = "red";
    			}else{
    				byId("province_span").style.color = "green";
    			}
    		}
    
    </span>

      小结:该文主要介绍了web中客户端用户注册的页面实现与校验功能,希望能够帮助到相关的小伙伴们。技术永无止境,有什么宝贵意见也请大家不吝赐教。


    展开全文
  • 使用CSS完成用户注册页面

    千次阅读 2018-09-19 15:45:13
    使用CSS完成用户注册页面; 做成这样一个页面; ①设置body的background-image背景图【该背景图是全铺方式,个别网页注册采用指定位置background-position定位背景图在真个页面的位置】; ②分成一个div,分装...

     

     

    使用CSS完成用户注册页面;

    做成这样一个页面;

    ①设置bodybackground-image背景图【该背景图是全铺方式,个别网页注册采用指定位置background-position定位背景图在真个页面的位置】;

    ②分成一个div,分装left ,mid,right 这三部分,mid中使用一个div来装table(以便于调节table在页面的布局或者定位) ,

    最外部div水平居中margin:  auto,(margin-top自定义设置,可以在margin:  auto中指定)边框width 宽度7-9px最佳,颜色color自定义;

    或者使用框架标签frameset  来布局整个页面的框架,Ps;使用框架标签需要去掉body,不然没有效果
    ③分析table表单;

                        1,首先定义<form ></form>  标签;

                       2,把table划分为;2列n行,通过colspan等操作,在创建表单时候给每个<td></td>列标签定义class属性,

    t-left和t-right,以便后期指定margin-left 的距离再添加时候麻烦;

                       3,head标签中设置css样式,先把表单border调出来,把整个表单位置定好(也就一个位置margin-top视距离定义即可。)

    ③针对left,mid ,right 分别设置浮动float(right是右浮动);

     

    说明;本人外部div指定的width:850px; height:400px;     

    分装left ,mid,right 的这三部分,是按照百分比来分的,分别是25%;47%;25%,(这三部分加起来不是100%,是因为留了3分给它,怕它骄傲)。也可以通过rule来测量规划各部分占得px的多少。

     


     

     


    body部分; 

    <body>
    <!--最外层容器-->
    <div>
        <!--左容器-->
        <div class="left">
            <p class="first">新用户注册</p>
            <p class="third">user register</p>
        </div>
        <!--中容器  插入表格容器-->
        <div class="mid">
            <div class="table">
                <!--表格容器中的table需要提交表单,使用form-->
                <form action="#" name="register" method="get">
                    <!--表格9行2列-->
                    <table><!--用户名,密码,邮箱姓名,手机号,性别,生日,验证码,提交-->
                        <tr><!--第一行-->
                            <td class="t-left">
                                <lable for="username">用户名</lable>
                            </td>
                            <td class="t-right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                        </tr>
                        <tr><!--第2行-->
                            <td class="t-left">
                                <lable for="password">密码</lable>
                            </td>
                            <td class="t-right"><input type="password" name="password" id="password" placeholder="请输入密码">
                            </td>
                        </tr>
                        <tr><!--第一行-->
                            <td class="t-left">
                                <lable for="email">邮箱</lable>
                            </td>
                            <td class="t-right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                        </tr>
                        <tr><!--第一行-->
                            <td class="t-left">
                                <lable for="tel">手机号</lable>
                            </td>
                            <td class="t-right"><input type="tel" name="tel" id="tel" placeholder="请输入手机号"></td>
                        </tr>
                        <tr><!--第一行-->
                            <td class="t-left">性别</td>
                            <td class="t-right">
                                <input type="radio" name="gender" value="男">男
                                <input type="radio" name="gender" value="女">女
                                <input type="radio" name="gender" value="妖">妖
                            </td>
                        </tr>
                        <tr><!--第一行-->
                            <td class="t-left">生日</td>
                            <td class="t-right"><input type="date" name="date"></td>
                        </tr>
                        <tr><!--第一行-->
                            <td class="t-left">
                                <lable for="CAPTCHA">验证码</lable>
                            </td>
                            <td class="t-right">
                                <input type="text" name="CAPTCHA" placeholder="请输入验证码" class="check">
                                <span><img src="../img/verify_code.jpg" height="30"/></span>
                            </td>
                        </tr>
                        <tr align="center"><!--第一行-->
                            <td colspan="2">
                                <button class="submit">提交表单</button>
                            </td>
                        </tr>
                    </table>
                </form>
    
            </div>
        </div>
        <!--右容器  -->
        <div class="right">
            <p>已有账号?<a href="#">立即登陆</a></p>
        </div>
    </div>
    
    </body>

     


    head的部分;

    <head>
        <meta charset="UTF-8">
        <title>注册css</title>
        <!--分析;在body中设置背景,插入一个table 或者div ,分为三部分,三部分都浮动,按照百分比来分(或者拿尺子测下像素)
        左边是p标签,右边是a标签嵌套p标签
        中间是注册表单
        首先把位置定好在中间位置;margin ;
        -->
        <style type="text/css">
            body {
                background-image: url("../img/bg.jpg");
            }
    
            /*设置所有元素不会被撑大 ,并且盒子的宽高是边框的宽高 设置margin=0,padding=0*/
            * {
                padding: 0px;
                margin: 0px;
                box-sizing: border-box;
            }
    
            body > div {
                /*最外层容器指定大小,边框,水平居中, */
                width: 850px;
                height: 400px;
                background-color: white;
                border: gray solid 8px;
                margin: 60px auto;
            }
    
            /* -------------------------------------------------------- */
            /*左浮动*/
            .left {
                float: left;
                width: 25%;
                margin-left: 20px;
                margin-top: 20px;
            }
    
            .first {
                font-size: 20px;
                color: orange;
    
            }
    
            .left p:last-child {
                font-size: 20px;
                color: gray;
            }
    
            /* -------------------------------------------------------- */
    
            .mid {
                font-size: 15px;
                float: left;
                width: 47%;
            }
    
            .table {
                margin-top: 25px;
                float: left;
            }
    
            .t-left {
                /*文字靠左边*/
                text-align: left;
    
            }
    
            .t-right {
            }
    
            /* 表单中的文本框,日期框,密码框使用属性选择器,宽256,高32,行高32,内边距上下6,左右12,
            圆角4,边框:1 实线 颜色#a6a6a6,右浮动*/
            input[type="text"], input[type="date"], input[type="password"], input[type="email"],
            input[type="tel"], input[type="radio"] {
                padding-top: 6px;
                padding-bottom: 6px;
                padding-left: 10px;
                padding-right: 10px;
                border-radius: 4px; /*圆角*/
                border: gray solid 1px;
                margin-left: 30px; /*指定左边距,调节左边距的距离*/
            }
    
            input[type="radio"] {
            }
    
            /* -------------------------------------------------------- */
            .right {
                float: right;
                width: 25%;
            }
    
            .right p {
                font-size: 15px;
                padding: 10px 10px 0px 0px;
                float: right;
                margin-left: 30px;
            }
    
            /*验证码*/
            .check {
                margin-left: 30px;
            }
    
    
        </style>
    </head>

     

     

     

    展开全文
  • servlet用户注册页面前两种输入为空和已注册情况都成功了,但往数据库插入新的数据不成功,求各位大神帮我看下哪里的问题
  • 微信小程序设计用户注册页面

    万次阅读 多人点赞 2018-06-21 08:28:36
    * 页面的初始数据 */ data: { text: '获取验证码', //按钮文字 currentTime: 61, //倒计时 disabled: false, //按钮是否禁用 phone: '', //获取到的手机栏中的值 VerificationCode: '', Code: '', N...
    Page({
    
      /**
       * 页面的初始数据
       */
      data: {
        text: '获取验证码', //按钮文字
        currentTime: 61, //倒计时
        disabled: false, //按钮是否禁用
        phone: '', //获取到的手机栏中的值
        VerificationCode: '',
        Code: '',
        NewChanges: '',
        NewChangesAgain: '',
        success: false,
        state: ''
      },
      /**
        * 获取验证码
        */
      return_home: function (e) {
        wx.navigateTo({
          url: '/pages/login/login',
        })
    
      },
      handleInputPhone: function (e) {
        this.setData({
          phone: e.detail.value
        })
      },
      handleVerificationCode: function (e) {
        console.log(e);
        this.setData({
          Code: e.detail.value
        })
      },
      handleNewChanges: function (e) {
        console.log(e);
        this.setData({
          NewChanges: e.detail.value
        })
      },
      handleNewChangesAgain: function (e) {
        console.log(e);
        this.setData({
          NewChangesAgain: e.detail.value
        })
    
      },
      doGetCode: function () {
        var that = this;
        that.setData({
          disabled: true, //只要点击了按钮就让按钮禁用 (避免正常情况下多次触发定时器事件)
          color: '#ccc',
        })
    
        var phone = that.data.phone;
        var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值
        var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字,默认为空
        var phone = that.data.phone;
        var currentTime = that.data.currentTime //把手机号跟倒计时值变例成js值
        var warn = null; //warn为当手机号为空或格式不正确时提示用户的文字,默认为空
        wx.request({
          url: '', //后端判断是否已被注册, 已被注册返回1 ,未被注册返回0
          method: "GET",
          header: {
            'content-type': 'application/x-www-form-urlencoded'
          },
          success: function (res) {
            that.setData({
              state: res.data
            })
            if (phone == '') {
              warn = "号码不能为空";
            } else if (phone.trim().length != 11 || !/^1[3|4|5|6|7|8|9]\d{9}$/.test(phone)) {
              warn = "手机号格式不正确";
            } //手机号已被注册提示信息
             else if (that.data.state == 1) {  //判断是否被注册
               warn = "手机号已被注册";
    
             }
             else {
              wx.request({
                url: '', //填写发送验证码接口
                method: "POST",
                data: {
                  coachid: that.data.phone
                },
                header: {
                  'content-type': 'application/x-www-form-urlencoded'
                },
                success: function (res) {
                  console.log(res.data)
                  that.setData({
                   VerificationCode: res.data.verifycode
                  })
                  
    
                  //当手机号正确的时候提示用户短信验证码已经发送
                  wx.showToast({
                    title: '短信验证码已发送',
                    icon: 'none',
                    duration: 2000
                  });
                  //设置一分钟的倒计时
                  var interval = setInterval(function () {
                    currentTime--; //每执行一次让倒计时秒数减一
                    that.setData({
                      text: currentTime + 's', //按钮文字变成倒计时对应秒数
    
                    })
                    //如果当秒数小于等于0时 停止计时器 且按钮文字变成重新发送 且按钮变成可用状态 倒计时的秒数也要恢复成默认秒数 即让获取验证码的按钮恢复到初始化状态只改变按钮文字
                    if (currentTime <= 0) {
                      clearInterval(interval)
                      that.setData({
                        text: '重新发送',
                        currentTime: 61,
                        disabled: false,
                        color: '#33FF99'
                      })
                    }
                  }, 100);
                }
              })
            };
            //判断 当提示错误信息文字不为空 即手机号输入有问题时提示用户错误信息 并且提示完之后一定要让按钮为可用状态 因为点击按钮时设置了只要点击了按钮就让按钮禁用的情况
            if (warn != null) {
              wx.showModal({
                title: '提示',
                content: warn
              })
              that.setData({
                disabled: false,
                color: '#33FF99'
              })
              return;
            }
          }
    
        })
    
      },
      submit: function (e) {
        var that = this
        if (this.data.Code == '') {
          wx.showToast({
            title: '请输入验证码',
            image: '/images/error.png',
            duration: 2000
          })
          return
        } else if (this.data.Code != this.data.VerificationCode) {
          wx.showToast({
            title: '验证码错误',
            image: '/images/error.png',
            duration: 2000
          })
          return
        }
        else if (this.data.NewChanges == '') {
          wx.showToast({
            title: '请输入密码',
            image: '/images/error.png',
            duration: 2000
          })
          return
        } else if (this.data.NewChangesAgain != this.data.NewChanges) {
          wx.showToast({
            title: '两次密码不一致',
            image: '/images/error.png',
            duration: 2000
          })
          return
        } else {
          var that = this
          var phone = that.data.phone;
          wx.request({
            url: getApp().globalData.baseUrl + '/Coachs/insert' ,
            method: "POST",
            data: {
              coachid: phone,
              coachpassword: that.data.NewChanges
            },
            header: {
              "content-type": "application/x-www-form-urlencoded"
            },
            success: function (res) {
              wx.showToast({
                title: '提交成功~',
                icon: 'loading',
                duration: 2000
              })
              console.log(res)
              that.setData({
                success: true
              })
            }
          })
        }
      },
      /**
       * 用户点击右上角分享
       */
      onShareAppMessage: function () {
    
      }
    })

     

     <view wx:if="{{!success}}">
     <view class='row'>
            <view class='info'>
                   <input  class= 'info-input1' bindinput="handleInputPhone" placeholder="请输入你的手机号" />
             </view>
              <button class='button' bindtap='doGetCode' disabled='{{disabled}}' style="background-color:{{color}}" >{{text}}</button>
     </view>
     <view class='row'>
            <view class='info'>
                   <input  class= 'info-input' bindinput="handleVerificationCode" placeholder="请输入你的验证码" />
             </view>
    
     </view>
      <view class='row'>
            <view class='info'>
                   <input type='password' class= 'info-input' bindinput="handleNewChanges" placeholder="请输入你的密码" />
             </view>
    
     </view>
      <view class='row'>
            <view class='info'>
                   <input  type='password' class= 'info-input' bindinput="handleNewChangesAgain" placeholder="请重新输入你的密码" />
             </view>
    
     </view>
     <button class='submit' bindtap='submit'>提交</button>
     </view>
     <view class = 'success' wx:if="{{success}}">
     <view class='cheer'><icon type="success" size="24"/> 恭喜您注册成功!</view>
     <button type = "default" class = 'return' bindtap='return_home'>返回首页</button>
     </view>

     

    page{
       background: #F0F0F0 ;
    }
    .row{
      margin-top: 20rpx;
      overflow: hidden;
      line-height: 100rpx;
      border-bottom: 1rpx solid #ccc;
      margin-left: 20rpx;
      margin-right: 20rpx;
      color: #777;
      background: #fff;
    
    }
    .info-input{
      height: 100rpx;
      margin-left: 50rpx;
      color: #777;
        float: left;
    }
    .info-input1{
      height: 100rpx;
      margin-left: 50rpx;
      color: #777;
        float: left;
        width: 420rpx;
    }
    .button{
      width: 200rpx;
      height: 70rpx;
      line-height: 70rpx;
      font-size: 28rpx;
      background: #33FF99;
      float: left;
      margin-left: 10rpx;
      margin-top: 15rpx;
      color: #FFFFFF;
    }
    .submit{
      margin-top: 50rpx;
      margin-left: 20rpx;
      margin-right: 20rpx;
      background: #00CCFF;
       color: #FFFFFF;
    }
    .success{
      background: #ffffff;
    
    }
    .cheer{
      text-align: center;
      line-height: 400rpx;
      font-size: 60rpx;
      position: relative;
    }
    .return{
      margin: 20rpx;
    
    }

    页面显示结果

    展开全文
  • HTML简单的用户注册页面

    千次阅读 2013-11-25 10:34:41
    用户注册页面 用户的注册区域 注册页面 用户名: *不能以数字、下划线开头 密码: *数字和字母的组合 确认密码: *重新...
  • HTML5~用户注册页面的设计与实现

    千次阅读 2020-12-03 00:58:15
    用户注册页面的设计与实现 需要制作的效果图如下 大概思路:我们先设置底色灰色,然后写出表单,再利用CSS给表单进行设置。 1、设置底色(css 行内式) <style> body{background:#cccccc;} </style> ...
  • Ajax用户注册页面

    千次阅读 2018-10-24 09:21:27
    使用HTML超文本标记语言制作简单页面,要求通过实验能够掌握HTML文件的基本结构和文档的创建、编辑及保存。 验证并掌握HTML超文本标记语言的文本、图像、超链接、表格、表单等标记的使用。 通过实验掌握层叠样式表...
  • WordPress自定义用户注册页面插件

    千次阅读 2011-10-04 21:01:30
    WordPress自定义用户注册页面插件 Ludou 人气: 1,737 文章目录 插件使用 更新记录 插件下载  如果你的WordPress开发后台注册的话,可能会遇到一个问题,那就发送email的问题。用户...
  • 一、取消用户注册页面 Admin Area---&gt;Settings---&gt;Sign-up enabled(取消前面的勾)---save     二、删除用户 Users----Destroy(点他会删除用户和删除相关连的所有项目代码,操作请慎重操作...
  • H5 用户注册页面

    万次阅读 2017-08-19 09:01:58
    用户注册页面 用户登录信息 用户名 <td width="40%"><input type="text" required="true" autofocus="true"> * 邮箱 <td><input type="email" required="true"> * 密码 <td><input type=...
  • 使用H5表单技术实现用户注册页面,要求可以输入用户名,密码,真实姓名,电子邮箱等信息进行注册。
  • javascript - 用户注册页面java <!DOCTYPE html> <title></title> <script> ![var names = \["tom","jack","lily","韩梅梅"\]; fu
  • 用户注册页面如何测试?

    千次阅读 2019-10-08 10:23:18
    一、用户注册 只从用户名和密码角度写了几个要考虑的测试点,如果需求中明确规定了安全问题,Email,出生日期,地址,性别等等一系列的格式和字符要求,那就都要写用例测了~ 以等价类划分和边界值法来分析 1.填写...
  • 前端利用ajax实现用户注册页面

    千次阅读 2020-07-29 11:47:28
    开发一个用户注册界面,使用ajax交互技术 ajax是什么呢?允许浏览器与服务器通信而无须刷新前页面的技术都被叫做Ajax. AJAX:(Asynchronous JavaScript and XML)并不是一项新技术,其实是多种技术的综合,包括...
  • Java Web实现用户注册页面的提交

    千次阅读 2019-06-17 09:11:09
    项目需求:创建一个Web项目,实现用户登录界面的注册,并将信息提交到数据库中。 运行环境:jdk1.8+MySQL5.6+Apache Tomcat9.0 步骤: 一、Web项目工程的创建; 1、File-->New Dynamic Web Project(如果没有...
  • 完成一个较为完整的用户注册页面

    万次阅读 2015-06-10 12:07:04
    完成一个较为完整的用户注册页面。 1:要求用户输入用户名时只能够输入英文、数字和下划线 2:要求用户输入的密码和确认密码必须一致 3:要求用户上传本地磁盘中的一个图片文件作为头像 4:要求用
  • 这是在经过断断续续学习html、css和js后,写的第一个算是比较完善,依然比较初级的小案例,用户注册界面,其中用的html以及css知识都比较少,主要是js代码中各种【验证功能】实现。 html部分:标题+form表单+table...
  • HTML5系列代码:用户注册页面

    千次阅读 2020-06-27 10:04:55
    action:这个是表单提交给某服务器的地址。 method:用什么方式提交。通常我们常见的是:get(得到、成为)和post这两种,区别就是用户在写信息时显示的是明文还是暗文。 <!DOCTYPE html> <html> <...
  • 我在做一个用户注册页面,我像在必填项例如用户名,密码后面加一个红色星号。这个怎么实现?
  • 这篇文章主要介绍了一个超详细的php用户注册页面填写信息完整实例,内容包括邮箱自动匹配、密码强度验证以及防止表单重复等,小编特别喜欢这篇文章,推荐给大家。 注册页面是大多数网站必备的页面,所以很有...
  • 使用正则表达式验证用户注册页面

    千次阅读 2017-05-03 16:39:40
    使用正则表达式验证注册页面 body{ margin:0; padding:0; font-size:12px; line-height:20px; } .main{ width:525px; margin-left:auto; margin-right:auto; } .hr_1 { font-size: 14px; font-weight: ...
  • HTML用户注册页面的设计与实现

    千次阅读 2020-06-01 14:26:28
    css部分: 效果:
  • html+css+js用户注册页面

    千次阅读 2018-10-23 21:55:02
    1)开发一个用户注册界面,要求: 年龄需用 JavaScript 检查格式是否正确。 Reg.html &lt;!DOCTYPE html&gt; &lt;html&gt;  &lt;head&gt;  &lt;style type="text/css&...
  • 用jQuery做一个简单的用户注册页面

    千次阅读 2019-02-02 13:05:02
    用户登录界面涉及到基本HTML的页面、CSS样式的设计、JS的渲染。但是最重要的是分析出哪个&lt;input&gt;没有输入,或者输入的有问题。 基本配置 软件:PyCharm 语言:HTML、Python、CSS、Javascript、jQuery...
  • 用户注册页面和信息修改页面

    千次阅读 2007-09-24 07:54:04
    小弟在用WEBWORK写网页时要实现用户信息修改页面,可是不知道怎么写,感觉把注册页面拿过来,然后从数据库掉数据来填充应该可以,当没有实际例子不知道具体怎么弄,忘会的人指点(具体的话更好),谢谢!!!...
  • 实现用户注册页面,可以重置账号,并实现了按钮关闭当前页面的功能(window.close()方法)。 <title>users signup </head> <label> </l
  • 简单的Html和JavaScript:用户注册页面

    千次阅读 2017-06-30 18:26:37
    A simple HTML sample td {text-align:center} function aa(){ if(f1.name.value==""){ alert("Please input your name!"); f1.name.focus(); return false;... if(f1.password
  • 以程序员的方式解决武汉公积金注册页面无法点击下一步问题 1.问题背景 如图: 当我们银行卡身份认证和发送验证码之后,页脚信息下移将返回和下一步的button覆盖掉了,所以点击无效,并没有触发点击按钮事件。 2....
  • 方法1:其实利用Drupal 7的 Field 模块就可以。只要把创建该Content Type(包括User)...以用户注册为例: 像其他Content Type创建一样,可以修改Fields,添加一些特殊的用户信息,唯一不同的是不用设置权限,因为你注

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 635,842
精华内容 254,336
关键字:

用户注册页面