使用正则表达式写网易通行证
css样式；
//首先全局选择器（*）内边距、外边距、样式都设为0或无。
//根据html类名来设置所需样式。
<style type="text/css">
*{
margin:0;
padding:0;
list-style: none;
}
.easy{
font-size: 36px;
color:red;
padding-left: 30px;
}
.cord{
font-size: 36px;
}
.bigbox{
width:530px;
height:480px;
border:1px solid black;
margin-left: 10px;
margin-top: 10px;
}
.box tr td{
padding:10px;
}
button{
margin-left: 140px;
margin-top: 20px;
border:1px solid lightblue;
font-size: 30px;
color:white;
background-color: hotpink;
border-radius: 10%;
height:60px;
width:150px;
}
.person input{
margin-left: 20px;
}
</style>
HTML代码：
//用table来写表单类的代码，非常方便。内容不会随着前面标签类的文本内容而变化。
//如果用form写的话，input后的框会随着内容发生变化。
//input类型中的密码类型，相比get，用post更安全，隐秘性更高。
//get输入时，密码会显示在文本框里，而用post时，密码为***。
<body>
<span class="easy">网易</span><span class="cord">通行证</span>
<div class="bigbox">
<table class="box">
<tbody>
<tr>
<td>通行证用户名:</td>
<td><input type="text" /id="name" οnblur="lose()" οnfοcus="get()"><span id="sone"></span></td>
</tr>
<tr>
<td>登录密码:</td>
<td><input type="password" / method="post" id="password" οnblur="loseA()" οnfοcus="getA()"><span id="stwo"></span></td> //onblur 失去焦点时的事件 onfocus得到焦点时的事件。插入到input标签中，因为是为本需要的点击事件。
</tr>
<tr>
<td>重复登录密码:</td>
<td><input type="password" / method="post" id="pass" οnblur="loseB()" οnfοcus="getB()"><span id="sthree"></span></td>
</tr>
<tr class="person">
<td>性别:</td>
<td><input type="radio" /name="sex" checked="checked">男<input type="radio" /name="sex">女</td>
//input标签中性别的 name属性 两个name名要设置为同一个名字。否则，不能点击单选。
</tr>
<tr>
<td>真实姓名:</td>
<td><input type="text" / id="real" οnblur=" loseC()" οnfοcus="loseC()"><span id="sfour"></span></td>
</tr>
<tr>
<td>昵称:</td>
<td><input type="text" /id="namer" οnblur="loseD()" οnfοcus="getD()" ><span id="sfive" ></span></td>
</tr>
<tr>
<td>关联手机号:</td>
<td><input type="text" /id="phone" οnblur="loseE()" οnfοcus="getE()"><span id="ssix"></span></td>
</tr>
<tr>
<td>保密邮箱:</td>
<td><input type="text" / id="mail" οnblur="loseF()" οnfοcus="getF()"><span id="sseven" ></span></td>
</tr>
</tbody>
</table>
<button>注册</button>
</div>
</body>
JS代码：
//使用函数function，判断if...else来完成正则表达式验证。
<script type="text/javascript">
function get(){ //得到焦点时的事件，及得到焦点时，input框中的内容。
sone.innerHTML = "请输入正确的通行证用户名" //在span标签中添加HTML内容
}
function lose(){ //失去焦点时的事件。
if(name.value == ""){ //如果input框中的值是没有填，则在span标签中添加HTML内容。
sone.innerHTML = "通行证名不能为空"
}else{
var reg =/^[a-zA-Z0-9_-]{0,16}$/; //验证用户名的正则表达式
if(reg.test(name.value)!= false){ //使用正则验证进行判断
sone.innerHTML = "格式不正确，请重新输入" //判断完成在HTML中添加所需内容
}else{
sone.innerHTML = "格式正确";
}
}
}
function getA(){
stwo.innerHTML = "请输入正确的登录密码"
}
function loseA(){
if(password.value == ""){
stwo.innerHTML = "密码不能为空"
}else{
var reg = /^(\w){6,20}$/;
if(reg.test(password.value)!=false){
stwo.innerHTML = "格式不正确，请重新输入"
}else{
stwo.innerHTML = "密码正确"
}
}
}
function getB(){
sthree.innerHTML = "请再次确认密码"
}
function loseB(){
if(pass.value == ""){
sthree.innerHTML = "密码不能为空"
}else{
if(pass = password){
sthree.innerHTML = "确认密码正确";
}else{
sthree.innerHTML = "两次输入的密码不同，请重新输入"
}
}
}
function getC(){
sfour.innerHTML = "请输入正确的真实姓名"
}
function loseC(){
if(real.value == ""){
sfour.innerHTML = "姓名不能为空"
}else{
var reg = /^[\u4e00-\u9fa5]{2,4}$/;
if(reg.test(real.value)!=false){
sfour.innerHTML = "姓名不正确，请重新输入"
}else{
sfour.innerHTML = "您输入的正确"
}
}
}
function getD(){
sfive.innerHTML = "请输入正确的昵称"
}
function loseD(){
if(namer.value == ""){
sfive.innerHTML = "昵称不能为空";
}else{
var reg = /^[a-zA-Z0-9_-]{4,16}$/;
if(reg.test(namer.value)!=false){
sfive.innerHTML = "昵称不正确，请重新输入"
}else{
sfive.innerHTML = "您输入的昵称正确"
}
}
}
function getE(){
ssix.innerHTML = "请输入正确的手机号"
}
function loseE(){
if(phone.value == ""){
ssix.innerHTML = "手机号不能为空";
}else{
var reg = /^1[34578][0-9]{9}$/;
if(reg.test(phone.value)!=false){
ssix.innerHTML = "手机号输入错误，请重新输入"
}else{
ssix.innerHTML = "您输入的手机号正确"
}
}
}
function getF(){
sseven.innerHTML = "请输入正确的邮箱";
}
function loseF(){
if(mail.value == ""){
sseven.innerHTML = "邮箱不能为空";
}else{
var reg = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
if(reg.test(mail.value)!=false){
sseven.innerHTML = "邮箱号输入错误，请重新输入"
}else{
sseven.innerHTML = "您输入的邮箱正确";
}
}
}
</script>
</html>
使用正则表达式写网易通行证相关推荐
- 如何用Windows Live Writer写网易博客
安装Windows Live Writer后增加网易博客帐号: 选择其它日志服务 填写日志网址 163邮箱用户格式如下: 例邮箱帐号是:blog_admin@163.com 你的日志网址:就是你的网易 ...
- java护照号码校验、java港澳台通行证校验、护照正则表达式、港澳台通行证正则表达式
护照.港澳台通行证校验工具类 /*** 证件号码校验*/ public class CardUtils {/*** 护照验证* 规则: G + 8位数字, P + 7位数字, S/D + 7或8位数字 ...
- 用Windows Live Writer写CSDN博客和网易博客
用Windows Live Writer写CSDN博客的步骤如下: 安装Windows Live Writer后,会有一个添加账户的向导 在第一步"选择博客类型"时,选择" ...
- 写了一个测试正则表达式的小工具
这两天写了两个蜘蛛程序用来自动下载漫画,许多时候都是用他在网页中通过正则表达式获取关键字和信息.我用的正则表达式的工具是Expresso,这个工具无疑是目前最好的正则表达式的工具之一.但用着用着就觉得 ...
- 互联网金融爬虫怎么写－第二课 雪球网股票爬虫（正则表达式入门）
系列教程: 互联网金融爬虫怎么写-第一课 p2p网贷爬虫(XPath入门) 上一节课我们一起通过一个p2p网贷爬虫,深入了解了一下XPath以及其在最终实际使用中的写法.可以毫不夸张的说,对于写简单爬 ...
- 互联网金融爬虫怎么写－第二课 雪球网股票爬虫（正则表达式入门） 1
系列教程: 互联网金融爬虫怎么写-第一课 p2p网贷爬虫(XPath入门) 上一节课我们一起通过一个p2p网贷爬虫,深入了解了一下XPath以及其在最终实际使用中的写法.可以毫不夸张的说,对于写简单爬 ...
- 网易视频云技术分享：记一次.gitignore的操作细节
网易视频云是网易倾力打造的一款基于云计算的分布式多媒体处理集群和专业音视频技术,提供稳定流畅.低时延.高并发的视频直播.录制.存储.转码及点播等音视频的PAAS服务,在线教育.远程医疗.娱乐秀场.在线 ...
- 博客群发软件--用 Windows Live Writer完美发布新浪、网易、blogcn、blogbus、cnbl
前言: 当今网络博客.微薄铺天盖地,相信即使一个普通的用户也都注册了很多家品牌的博客或者微薄等,那么困扰着大家一个很大的问题,同时在多家博客发布同样的内容,如果说只是简单的文字还好说,复制粘贴就完事了 ...
- Zoundry Raven网易博客设置
1.在主界面中的"添加帐户"中来调出下面的窗口."博客链接"里面不用填(至少网易博客是这样): 2.单击"下一个"后, 在出现的" ...
- 网易airtest录制web应用测试脚本
网易airtest初体验 使用airtest进行web测试 使用airtest进行web测试 根据网易介绍,airtest project支出多种测试环境,包括Windows应用,Android和io ...
最新文章
- python indexerror_python – “IndexError：位置索引器超出范围”,当它们明显没有时
- adb和adb shell
- ITK:通过指定区域裁剪图像
- 如果你也会C#，那不妨了解下F#（5）：模块、与C#互相调用
- Android：是时候掌握WebView与Js的交互技术了
- 学术 | 如何写一篇学术论文？（下）
- linux中so文件如何打开,安卓手机如何打开.so文件？
- DeFi中的关键——智能合约 | 白话区块链入门220
- 纠错码与魔术（一）——纠错码与汉明码简介
- New Windows Vista Includes ActiveSync
- 用excel做logistic回归分析_利用Excel进行统计分析——入门篇
- linux yes 命令_如何在Linux上使用yes命令
- 苹果cms安装mysql检测失败_苹果cmsV10安装过程中的常见问题处理办法
- Ubuntu中shell命令-（4）-echo/tar/which/whereis/ps/kill/top/df/du
- 查互联网ip(公网ip)
- OpenCV技巧 | 常用格式图片保存为透明背景图片(附Python源码)-教你轻松制作Logo
- 华为RIP动态路由实例
- RAD Studio 10 自带Demo代码汇总说明
- sketch操作（一）
- Java周记2（第二周）