登录注册——注册输入验证
上次讲了登录注册问题的数据库表怎么建，以及具体有哪些内容。今天主要讲一下注册的表单验证。我们经常上网各种登录注册的时候应该已经注意过就是有时候密码有要求，比如输入6-20位密码。还有确认密码，必须和密码输入一致的时候才行。邮箱也是，邮箱的格式不能出错。当以上格式有误的时候就不能提交表单，还有如果还有必填项目没有填的话也不可以提交表单。
一看见判断输入框的格式还有位数限制时我们首先就应该想到正则表达式。
下面我们来边看代码表讲解。
这个就是html的页面代码，我们用的是AngularJS来写的。布局用了Bootstrap。
<body><div class="container" ng-controller="contentController"><div class="row r1"><form role="form" id="form"><p>注册</p><div class="form-group"><label for="name">用户名：</label><input type="text" ng-blur="testUser()" ng-model="name" class="form-control" id="name" placeholder="Enter name"><span ng-class="{redText:isRedName}">{{username_info}}</span></div><div class="form-group"><label for="pwd">密码：</label><input type="password" ng-model="pwd" ng-blur="testPwd()" class="form-control" id="pwd" placeholder="Password"><span ng-class="{redText:isRedPwd}">{{pwd_info}}</span></div><div class="form-group"><label for="confirmPwd">确认密码：</label><input type="password" ng-blur="testConfirmPwd()" ng-model="confirmPwd" class="form-control" id="confirmPwd" placeholder="Confirm password"><span ng-class="{redText:isRedConfirmPwd}">{{confirmPwd_info}}</span></div><div class="form-group"><label for="email">邮箱：</label><input type="email" ng-model="email" ng-blur="testEmail()" class="form-control" id="email" placeholder="Enter email"><span ng-class="{redText:isRedEmail}">{{email_info}}</span></div><div class="form-group"><label for="sex">性别：</label><input type="text" ng-blur="testSex()" ng-model="sex" class="form-control" id="sex" placeholder="Enter sex"><span ng-class="{redText:isRedSex}">{{usersex_info}}</span></div><button type="button" id="submit" ng-click="register()" class="btn btn-default">Submit</button><div id="infoBox"><span ng-model="info" id="info">{{register_info}}</span></div></form></div></div></body>View Code
先看用户名的判断：
ng-blur="testUser()"就是鼠标离开用户名输入框时调用testUser()函数
testUser()函数如下：
$scope.testUser=function(){var reg=/^[A-Za-z0-9]\w{5,14}$/;if($scope.name && reg.test($scope.name)){$scope.username_info="√";$scope.usernameIsError=false;$scope.isRedName=false;}else{$scope.username_info="×";$scope.usernameIsError=true;$scope.isRedName=true;}View Code
正则表达式表示用户名为以字母或数字开头的6-15位包括下划线的任何单词字符。在输入框后面加span字段来标志输入是否正确，定义为username_info，span定义一个类ng-class="{redText:isRedName}"，当输入符合正则表达式时，$scope.isRedName=false;就是span输入“√”，颜色为绿，相反输入“×”，颜色为红。效果图如下：
密码判断：
$scope.testPwd=function(){var reg=/^.{6,15}$/;if($scope.pwd && reg.test($scope.pwd)){$scope.pwd_info="√";$scope.pwdIsError=false;$scope.isRedPwd=false;}else{$scope.pwd_info="×";$scope.pwdIsError=true;$scope.isRedPwd=true;}}View Code
看正则表达式表示我们需要输入6-15位的任意字符即可。
效果图如下：
输了17位的情况：
输了10位的情况：
确认密码：
$scope.testConfirmPwd=function(){if($scope.pwd==$scope.confirmPwd && $scope.pwd){$scope.confirmPwd_info="√";$scope.confirmPwdIsError=false;$scope.isRedConfirmPwd=false;}else{$scope.confirmPwd_info="×";$scope.confirmPwdIsError=true;$scope.isRedConfirmPwd=true;}};View Code
如上，我们只需要判断确认密码输入框和密码输入框一致并且密码输入框不为空时就是正确的。效果图如下：
邮箱输入：
$scope.testEmail=function(){var reg=/^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/;if($scope.email && reg.test($scope.email)){$scope.email_info="√";$scope.emailIsError=false;$scope.isRedEmail=false;}else{$scope.email_info="×";$scope.emailIsError=true;$scope.isRedEmail=true;}};View Code
正则表达式写了邮箱的样式，大家平时写代码的时候正则表达式不清楚的话可以自己上网查一下正则表达式该怎么写。
效果图如下：
关于性别我没有用input type=”radio”来做，我用的是input type=”text”来做的。只是限定了只能输入“男”或者“女”。
$scope.testSex=function(){if($scope.sex && $scope.sex=="男"||$scope.sex=="女"){$scope.usersex_info="√";$scope.usersexIsError=false;$scope.isRedSex=false;}else{$scope.usersex_info="×";$scope.usersexIsError=true;$scope.isRedSex=true;}};View Code
效果图如下：
各项判断大致就是这样写的，写好提交到后台就需要用到ajax了。我们下一篇再来讲ajax的写法。
转载于:https://www.cnblogs.com/renshengrucha/p/4596156.html
登录注册——注册输入验证相关推荐
- 26：第三章：开发通行证服务：9：【注册/登录】接口：验证码校验OK后，先根据手机号去查查该用户是否已存在，如果用户不存在就创建这个用户；（tkmybatis查询构建查询条件，雪花算法，枚举类等等）
说明: (1)本篇博客内容:继续开发[注册/登录]接口: ● 在[25:第三章:开发通行证服务:8:[注册/登录]接口:接收并校验"手机号和验证码"参数:]中,[注册/登录]接口, ...
- 登录滑块验证表单_如何构建双滑块登录和注册表单
登录滑块验证表单 Some of you might already know but for those who don't, I'm starting a Weekly Coding Challe ...
- java注册登录小程序,详解小程序之简单登录注册表单验证
这段时间在做员工管理的小程序,前期在登录注册上花了不少功夫,今天就给大家分享下. 效果图,wxss的内容较简单,自己编写即可. ##主要内容 一.首先我是在util.js中引入表单正则验证规则,给予l ...
- 登录和注册(struts2+hibernate+spring)
一:添加三框架jar包 二:model层(student.java) Java代码 package com.wdpc.ss2h.model; public class Student { priv ...
- PHP+Mysql 实现用户登录，注册界面
目标: 实现用户的登录 .注册 .修改密码.重置密码.添加书签,显示书签,删除书签 等功能 进一步目标: 实现对 用户输入信息的控制,具体表现在 对注册信息.登录信息的 的过滤,具有简单的防sql注入 ...
- 登录及注册模块设置与流程图
登录及注册模块设置与流程图 原文地址:http://www.cocoachina.com/design/20170320/18918.html 一.登录/注册模块流程图 1.电商&O2O类产品 ...
- 基于springboot+thymeleaf+mybatis的员工管理系统 —— 登录与注册
员工管理系统 - 登录与注册功能 创建项目 pom.xml 数据库表设计和环境准备 建表SQL application.properties 用户注册与登录功能 entity dao service ...
- 使用短信登录和注册的流程
现在各个网站普遍使用的登录认证方式是使用短信认证登录,并且在用户与服务器交互的过程中这部分功能需要被多次调用,所以在项目中不可避免地要包括这一部分,学习之后,在此记录其流程: 实现短信认证登录可以有两 ...
- java比较炫的登录界面_教你写一个炫酷的Material Design 风格的登录和注册页面
每个人都会喜欢漂亮的登录界面,一个App 给人们的第一印象是非常重要的. 这篇文章将教你使用谷歌材料设计规范(Material design spec )和谷歌的新的设计支持库( design sup ...
- 仿 手机QQ 登录、注册、找回密码、好友列表、QQ状态等功能的实现
仿 手机QQ 登录.注册.找回密码.好友列表.QQ状态等功能的实现 全文 图 + 代码 .... 福利!!!(QQ登录背景,过度页面背景) 1.加载过程中的背景 2.登录页面 ==1. 登录页面 布局 ...
最新文章
- maven nexus 3 third party 构件上传
- LeetCode刷题-3
- 无监督学习距离监督学习还有多远？Hinton组新作解读
- 现成Android 5.0系统源代码
- 微信公众平台开发——问题篇
- C#LeetCode刷题之#766-托普利茨矩阵（Toeplitz Matrix）
- CentOS 6.3 samba安装及配置
- Android MVP Presenter 中引发的空指针异常
- 港顺计算机怎么放音乐,csgo怎么放歌 CSGO内置语音播放歌曲
- h3c trunk口改access_H3C交换机恢复出厂和各种基本配置
- PLSql不用安装Oracle客户端，实现远程连接
- Axure最新激活码
- dell 2420 bios 降级文件，可以用回独立显卡
- 计算机体系结构量化研究方法学习(二)
- DirectX11,DirectX12,OpenGL,Vulkan学习资料
- Google Earth Engine（GEE）——ee.Reducer.percentile筛选影像百分比案例分析
- 牛客—编程初学者入门训练—Kiki和酸奶（C语言实现）
- android判断应用是否回到桌面的两种方法
- 我是如何用最简单的前端技术揭示那些灰色产业背后的原理
- React(Js)学习