JS——简单的正则表达式验证
<!-- 用户注册：结构层：html;表现层：css;行为层：javascript;
html利用ul,li来构造：
注意事项：1、每个Input都要有相应的id,这是在js中去调用的。
2、<a href="javascript:void(0)"></a>，添加javascript:void(0)是为了阻止链接的跳转。
行为层：js
js编写的主体思路：1、中心点：每一个input框，也就是获取的inp=document.getElementsByTagName("input");
2、针对input输入框会有点击即获得焦点的状态，和失去焦点的状态。
3、当获得焦点的时候，会给用户名、输入框、提示图标（改变背景图片的位置）变成蓝色，即添加point样式。
4、当input输入框失去焦点时，会给用户名、输入框、提示图标变成红色，即添加error样式。
5、当input输入框内容正确后，会给用户名、输入框变成-->。
zhuye
<body>
<div id="reg">
<form>
<div class="reg_title"><h1>用户注册</h1></div>
<ul class="reg_con">
<li>
<ul class="def">
<li><span>用户帐号：</span><input type="text" id="uname"/></li>
<li><p><i></i>给自己起个名字吧，它将成为您登录本站的用户名</p></li>
</ul>
</li>
<li>
<ul class="def">
<li><span>电子邮箱：</span><input type="text" id="email"/></li>
<li><p><i></i>请输入您的常用邮箱地址，此邮箱地址将作为修改密码</p></li>
</ul>
</li>
<li>
<ul class="def">
<li><span>手机号码：</span><input type="text" id="mobile"/></li>
<li><p><i></i>请输入您的手机号码，方便我们之间的联系</p></li>
</ul>
</li>
<li>
<ul class="def">
<li><span>安全密码：</span><input id="pwd" type="password"/></li>
<li><p><i></i>请输入安全密码，它将作为您的登录密码</p></li>
</ul>
</li>
<li>
<ul class="def ">
<li><span>确认密码：</span><input type="password" id="qrpwd"/></li>
<li><p><i></i>请将上面的密码再输入一次</p></li>
</ul>
</li>
<li>
<ul>
<li><span></span></li>
<li id="reg_sub"><a href="javascript:void(0)" id="enter">立即注册</a></li>
</ul>
</li>
</ul>
</form>
</div>
</body>
css
<style>
html,body,h1,h2,h3,h4,h5,h6,div,ul,ol,li,dl,dt,dd,iframe,textarea,input,button,p,strong,b,a,span,del,pre,table,tr,th,td{margin:; padding:; -webkit-text-size-adjust:none;}
h1,h2,h3,h4,h5,h6,em,del{font-style:normal; font-weight:normal; font-size:100%; -webkit-text-size-adjust:none;}
label,input,textarea{outline:none;}
ul{list-style:none;}
a{text-decoration:none;}
.cl{zoom:}
.cl:after{
display:block;
visibility:hidden;
content:"";
clear:both;
overflow:hidden;
}
body{
background:#DEEBF4 url(http://www.w3cfuns.com/data/attachment/album/201405/21/173823uwzw6d5rgd2xwdd8.jpg) no-repeat top center ;
margin:0 auto;
font-family:Microsoft YaHei, Arial, Helvetica, sans-serif; }
#reg{
width:770px;
background:#fff;
border-radius:5px;
-webkit-border-radius:5px;
-moz-border-radius:5px;
margin:85px auto;
overflow:hidden;
}
.reg_title{
font-size:24px;
text-align:center;
border-bottom:1px dashed #ccc;
padding:15px 0;
margin:0 10px;
}
.reg_con{
margin:20px 10px;
overflow:hidden;
}
.reg_con li ul {
margin:5px 0;
float:left;
width:100%;
line-height:35px;
}
.reg_con li ul li{
float:left;
}
.reg_con li ul li span{
font-size:14px;
}
.reg_con li ul li input{
height:25px;
width:300px;
border:1px solid #666;
}
.reg_con li ul li p{
color:#999;
font-size:12px;
position:relative;
padding-left:20px; }
.reg_con li ul li p i{
width:16px;
height:16px;
display:block;
position:absolute;
left:;
top:10px;
background:url(http://www.w3cfuns.com/data/attachment/album/201405/21/173824rvf1jjbs6j9ovisw.png.thumb.jpg) no-repeat 0 0;
display:none;
} .reg_con li ul.def li span{
font-size:14px;
}
.reg_con li ul.def li input{
height:25px;
width:300px;
margin-right:20px;
}
.reg_con li ul.def li p{
color:#333;
font-size:12px;
} .reg_con li ul.point li span{
font-size:14px;
color:#00f;
}
.reg_con li ul.point li input{
height:25px;
width:300px;
margin-right:20px;
border:1px solid #00f;
}
.reg_con li ul.point li p{ font-size:12px;
}
.reg_con li ul.point li p i{
display:block;
}
.reg_con li ul.error li span{
font-size:14px;
color:#f00;
}
.reg_con li ul.error li input{
height:25px;
width:300px;
margin-right:20px;
border:1px solid #f00;
}
.reg_con li ul.error li p{ font-size:12px;
padding-left:20px;
} .reg_con li ul.error li p i{
background-position:0 -16px;
display:block;
} .reg_con li ul.ok li input{
height:25px;
width:300px;
margin-right:20px;
border:1px solid #999;
color:#999;
}
.reg_con li ul.ok li p i{
background-position:0 -32px;
display:block;
}
#reg_sub{text-align:center;margin:0 auto;margin-left:10%;}
#reg_sub a{
border:1px solid #0066bb;
color:#ccc;
background:#0055AA;
padding:5px 20px;
}
#reg_sub a:hover{
background:#0066bb;
color:#fff;
} </style>
<script type="text/javascript">
/*闭包*/
(
function(){
var $=function(_id){
return document.getElementById(_id);
}
var inpStyle=function(){
var inp=document.getElementsByTagName("input");//获得id为inpList 中的所有的input
for(i=0;i<inp.length;i++){
inp[i].onfocus=function(){
var par=this.parentNode.parentNode;
var msg=par.getElementsByTagName("p")[0];
par.className="point";
check.focus[this.id](par,this,msg);
}
inp[i].onblur=function(){
var par=this.parentNode.parentNode;
var msg=par.getElementsByTagName("p")[0];
par.className="def";
check.blurs[this.id](par,this,msg);
}
}
$("enter").onclick=function(){
subback(inp);
}
}
var check={
focus:{
uname:function(_ul,_this,_p){
_ul.className="point";
_p.innerHTML="<i></i>给自己起个名字吧，它将成为您登录本站的用户名";
},
email:function(_ul,_this,_p){
_ul.className="point";
_p.innerHTML="<i></i>请输入您的常用邮箱地址，此邮箱地址将作为修改密码";
},
mobile:function(_ul,_this,_p){
_ul.className="point";
_p.innerHTML="<i></i>请输入您的手机号码，方便我们之间的联系";
},
pwd:function(_ul,_this,_p){
_ul.className="point";
_p.innerHTML="<i></i>请输入安全密码，它将作为您的登录密码";
},
qrpwd:function(_ul,_this,_p){
_ul.className="point";
_p.innerHTML="<i></i>请将上面的密码再输入一次";
}
},
blurs:{
uname:function(_ul,_this,_p){//ul标签、当前输入框、错误的信息
_ul.className="error";
var flag=false;
if(_this.value==""){
_p.innerHTML="<i></i>用户名不能为空！";
}else if(_this.value.length<3 || _this.value.length>16){
_p.innerHTML="<i></i>用户名长度应控制在3-16位字符之间！";
}else if(!/^[\w_-\u4e00-\u9fa5]+$/.test(_this.value)){
_p.innerHTML = "<i></i>用户名只能由大小写字母，数字，下划线，中横线和中文组成！";
}else{
_ul.className="ok";
_p.innerHTML="<i></i>";
flag=true;
}
return flag;
},
email:function(_ul,_this,_p){
_ul.className="error";
var flag=false;
if(_this.value==""){
_p.innerHTML="<i></i>邮箱不能为空！";
}else if(!/\w+((-w+)|(\.\w+))*\@[\w]+((\.|-)[\w]+)*\.[\w]+/.test(_this.value)){
_p.innerHTML="<i></i>请输入正确的邮箱地址！";
}
else{
_ul.className="ok";
_p.innerHTML="<i></i>";
flag=true;
}
return flag=false;
}
,
mobile:function(_ul,_this,_p){
_ul.className="error";
var flag=false;
if(_this.value==""){
_p.innerHTML="<i></i>电话号码不能为空！";
}else if(!/0?(13|14|15|18)[0-9]{9}/.test(_this.value)){
_p.innerHTML="<i></i>请输入正确的电话号码！";
}
else{
_ul.className="ok";
_p.innerHTML="<i></i>";
flag=true;
}
return flag;
}
,
pwd:function(_ul,_this,_p){
_ul.className="error";
var flag=false;
if(_this.value==""){
_p.innerHTML="<i></i>密码不能为空！";
}else if(_this.value.length<6 || _this.value.length>16){
_p.innerHTML="<i></i>密码应该在6-16位之间！";
}else if(!/^[\w_-]+$/.test(_this.value)){
_p.innerHTML="<i></i>密码只能由大小字母、数字、下划线组成！";
}
else{
_ul.className="ok";
_p.innerHTML="<i></i>";
flag=true;
}
return flag;
}
,
qrpwd:function(_ul,_this,_p){
_ul.className="error";
var flag=false;
if(_this.value==""){
_p.innerHTML="<i></i>为了保证您输入的密码准确无误，请再次输入密码！！";
}else if(_this.value!=$("pwd").value){
_p.innerHTML="<i></i>密码两次输入不一致，请重新输入！";
}
else{
_ul.className="ok";
_p.innerHTML="<i></i>";
flag=true;
}
return flag;
}
}
}
var subback=function(inps){
for(var i=0;i<inps.length;i++){
//inps[i].focus();
var flag=true;
var par=inps[i].parentNode.parentNode;
var msg=par.getElementsByTagName("p")[0];
if(!check.blurs[inps[i].id](par,inps[i],msg)){
flag=false;
break;
}
}
if(flag){
alert("可提交");
}
else{
alert("不可提交");
}
}
window.onload=function(){//相当于程序的入口 main方法
inpStyle();
}
}
)();
</script>
JS——简单的正则表达式验证的更多相关文章
- js如何使用正则表达式验证电话号码（可选区号）和邮箱？（分步骤）
js如何使用正则表达式验证电话号码(可选区号)和邮箱?(分步骤) 一.总结 js进阶正则表达式16电话号码和邮箱正则(分类解决邮箱验证)(分组加?解决电话号码区号选择问题)([\w\.-]中括号解决邮 ...
- JS简单表单验证
这里我是写了一个简单的注册表单验证功能,亲测有效,一起来看看吧! 首先我的HTML代码是这样的: class大家可以忽略一下,这里我项目使用的是bootstrap的样式. 输入用户名和密码用的是正则表 ...
- JS的常用正则表达式 验证密码（转载自用）
JS的正则表达式 强:字母+数字+特殊字符 ^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^& ...
- JS和Java正则表达式验证
js代码 <script type="text/javascript"> function SubmitCk() { var reg = /^([a-zA-Z0-9]+ ...
- js中通过正则表达式验证邮箱是否合法
文章目录 1.效果展示 2.问题描述 3.代码实现 1.效果展示 2.问题描述 当用户在输入框输入邮箱后.点击验证邮箱按钮.系统给出提示信息. 3.代码实现 <!DOCTYPE html> ...
- JS的常用正则表达式 验证密码用户名等
//校验是否全由数字组成 function isDigit(s) { var patrn=/^[0-9]{1,20}$/; if (!patrn.exec(s)) return false retur ...
- js、javascript正则表达式验证身份证号码
function isCardNo(card) { // 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符X var reg = /(^\d{1 ...
- JS正则表达式验证账号、手机号、电话和邮箱
JS正则表达式验证账号.手机号.电话和邮箱 效果体验:http://keleyi.com/keleyi/phtml/jstexiao/15.htm 验证帐号是否合法 验证规则:字母.数字.下划线组成, ...
- jQuery validate 根据 asp.net MVC的验证提取简单快捷的验证方式（jquery.validate.unobtrusive.js）
最近在学习asp.netMVC,发现其中的验证方式书写方便快捷,应用简单,易学好懂. 验证方式基于jQuery的validate 验证方式,也可以说是对jQuery validate的验证方式的扩展, ...
随机推荐
- 流畅的python第五章一等函数学习记录
在python中,函数是一等对象,一等对象是满足以下条件的程序实体 1在运行时创建 2能复制给变量或数据结构的元素 3能作为参数传给函数 4能作为函数的返回结果 高阶函数(接受函数作为参数或者把函数作 ...
- 在安装python的mysqlclient包时报microsoft visual c++ 14.0 is required的错误
在安装python的mysqlclient包时报microsoft visual c++ 14.0 is required的错误 pip install mysqlclient 提示报错 解决办法 ...
- java 二维码编码解码
做一个小项目的时候写了个二维码编码和解码的小工具,感觉可能用得到,有兴趣的朋友可以看下 再次之前,徐需要用到google的zxing相关的jar包,还有javax相关包 以上为可能用到的jar pac ...
- [Functional Programming Moand] Update The State Of A State Monad (put)
Stateful computations require the ability for their state to change overtime. We take a look on one ...
- Windows开机出现提示“nwsvc.exe”错误怎么办
开机时出现错误提示: Microsoft Visual C++ Runtime Library Runtime Error! Program: C:\Windows\system32\nwsvc.ex ...
- PHP安全：如何正确的取得使用者 IP？
PHP安全:如何正确的取得使用者 IP? 很多网站都会有侦测用户 IP 的功能,不管是判断使用者来自哪边,或者是记录用户的位置.但是你知道吗?网络上大多数的教学全部都是「错误」的.正确的程序写法可以确 ...
- 操作系统CPU调度知识点
1.进程基本概念:进程是程序的一次运行. 是系统进程资源分配和调度的基本单位. 2.进程三态:运行状态.就绪状态.堵塞状态.三态转换规则,就绪状态的进程因为调度进程运行状态,运行状态因为时间片用完而进 ...
- Drupal如何解析主题继承关系？
Drupal中,主题是可以继承的,或者说是扩展.例如,要创建一个新的名为custom的主题,该主题与名为default的主题只有某些细小的差别.这个时候,不需要复制一份default到custom,可 ...
- Java构建工具_Ant详解
1,什么是antant是构建工具2,什么是构建概念到处可查到,形象来说,你要把代码从某个地方拿来,编译,再拷贝到某个地方去等等操作,当然不仅与此,但是主要用来干这个3,ant的好处跨平台 --因为 ...
- Git-Git Book阅读笔记
git diff [fname] 查看工作区与缓存区异同 git diff --staged [fname] 查看缓存区与上次提交之间的差异 git diff HEAD [fname] 查 ...