利用正则表达式来进行简单的表单验证
话不多说，先贴上 样式
<style>
.warn{
font-size: 14px;
display: none;
color: red;
}
#warn{
/* overflow: hidden; */
width: 100px;
display: none;
}
#warn span ,strong{
border: 1px solid pink;
width: 23%;
height: 30px;
margin-top: 10px;
line-height: 30px;
float: left;
text-align: center;
/* font-size: 12px; */
}
#warn.low span:nth-of-type(1){
background-color: #f10;
}
#warn.middle span{
background-color: orange;
}
#warn.middle span:last-child{
background-color: #fff;
}
#warn.high span{
background-color: yellowgreen;
}
</style>
ul>
<li>
<div>用 户 名 ：<input type="text" id="username" placeholder="输入用户名" ></div>
<div id="name_tip"class="warn">请输入4-20中文英文_组成的用户名</div>
</li>
<li>
<div>手 机 号 ：<input type="text" id="tel"placeholder="输入手机号"></div>
<div id="tel_tip"class="warn">请输入正确的手机号</div>
</li>
<li>
<div>设置密码：<input type="text" id="pass"placeholder="输入密码"></div>
<div id="pass_tip"class="warn">输入6~20位由数字字母特殊符号组成</div>
<div id="warn" class="low">
<strong>低</strong>
<span></span>
<span></span>
<span></span>
</div>
</li>
<li>
<div>确认密码：<input type="text" id="passwd"placeholder="输入密码"></div>
<div id="passwd_tip"class="warn">请再次输入密码</div>
</li>
</ul>
姓名验证
要求输入4-20位中英文数字组成的用户名
先获取元素
var name_ele = document.querySelector('#username');
var name_tip = document.querySelector('#name_tip');
对于输入框 加监听事件当 获取到焦点时 ，让提示就显示 ，在加一个判定 防止再次 点击输入框 ，如果 内容符合的话 就不再提示
name_ele .addEventListener( 'focus' ,function (){
if ( name_ele.value.length>3){
return false
}
name_tip.style.display="block";
} )
当失去焦点的时候 进行判定是否 符合规定
name_ele . addEventListener( 'blur', function (){
var name_value = name_ele.value;
//console.log(name_value);
if (/[a-zA-Z0-9\u4e00-\u9fa5]{4,20}/.test(name_value)){
name_tip.style.display="none";
name_tip.style.color="pink"
}
else{
name_tip.style.display="block";
}
if( name_value===""){
name_tip.style.display="none";
}
})
因为要求 输入4-20位中英文数字组成的用户名
/[a-zA-Z0-9\u4e00-\u9fa5]{4,20}/.test(name_value)
所以正则表达式为
/[a-zA-Z0-9\u4e00-\u9fa5]{4,20}/
a-z, A-Z, 0-9, 其中\u4e00-\u9fa5是 汉字的字符编码范围，要求四到20个所以{4，20}
手机号验证
var tel_ele = document.querySelector('#tel');
var tel_tip = document.querySelector('#tel_tip');
var warn_ele=document.querySelector('#marn')
tel .addEventListener( 'focus',function(){
if ( name_ele.value.length>3){
return false
}
tel_tip.style.display="block";
})
tel .addEventListener('blur',function(){
var tel_value = tel_ele.value;
if (/^(\+86\-)?1[3-9][0-9]{9}$/.test(tel_value)){
tel_tip.style.display="none";
tel_tip.style.color="pink"
}
else{
tel_tip.style.display="block";
}
if( tel_value===""){
tel_tip.style.display="none";
}
})
手机号验证 要求跟 用户名在正则表达式上有一点区别
/^(\+86\-)?1[3-9][0-9]{9}$/.test(tel_value)
手机号 可以加区号
^(\+86\-)?
所以 开头 用小括号 进行分组，用？ 表示范围0~1，即可有可无
手机号 1开头 第二为 是3~9之间的数字，所以就表示为
1[3-9][0-9]{9}$/
3 密码验证
在密码验证中 添加了 密码的安全性检测
var pass_ele = document.querySelector('#pass');
var pass_tip = document.querySelector('#pass_tip');
var pass_warn = document.querySelector("#warn");
pass_ele .addEventListener ('focus',function(){
if ( pass_ele.value.length>0){
return false
}
pass_tip.style.display="block";
})
pass_ele .addEventListener ('blur',function(){
if (/^[a-zA-Z0-9\!\@\#\$\%\^\&]{6,20}$/.test(pass_ele.value)){
pass_warn.style.display="none";
}
else{
pass_tip.style.color="pink"
pass_tip.style.display="block";
pass_warn.style.display="none";
}
if ( pass_ele.value==""){
pass_tip.style.display="none";
pass_warn.style.display="none";
}
})
pass_ele . addEventListener( 'input' , function (){
//pass_tip.style.display="block";
var pass_value = pass_ele.value;
if (pass_value.length >=6){
pass_tip.style.display="none";
pass_warn .style.display="block";
var level = sumLevel( pass_value );
switch(level){
case 1 :
changeLevelTip("low")
break;
case 2 :
changeLevelTip("middle")
break;
case 3 :
changeLevelTip("high")
break;
}
}
})
function sumLevel(password_str ){
var level = 0;
if( /\d/.test(password_str) ){
level++;
}
if( /[a-zA-Z]/.test(password_str) ){
level++;
}
if(/[\!\@\#\$\%\^\&]/.test(password_str)){
level++;
}
return level;
}
function changeLevelTip(className){
// removeLevelClass(password_tip);
//console.log(className);
pass_warn.className=className;
// warn_ele.className= " " ;
var tip_ele = pass_warn.children[0];
// console.log(tip_ele)
switch( className ){
case "low" :
tip_ele.innerHTML="低";
break;
case "middle" :
tip_ele.innerHTML="中";
break;
case "high" :
tip_ele.innerHTML="高";
break;
}
}
重点提出 在输入框输入信息的时候 触发事件
pass_ele . addEventListener( 'input' , function (){
})
封装了一个函数 ，进行 安全等级的判定
function sumLevel(password_str ){
var level = 0;
if( /\d/.test(password_str) ){
level++;
}
if( /[a-zA-Z]/.test(password_str) ){
level++;
}
if(/[\!\@\#\$\%\^\&]/.test(password_str)){
level++;
}
return level;
}
打分标准 首先 长度必须大于6 才进行验证密码输入少于6位，无论复杂度多高，都不显)
如果全为数字的话 就为1，有字母的话就+1，包含字符的话 +1.
在css中以写了三种样式 ，分别包含 低中高三种 安全性样式
#warn.low span:nth-of-type(1){
background-color: #f10;
}
#warn.middle span{
background-color: orange;
}
#warn.middle span:last-child{
background-color: #fff;
}
#warn.high span{
background-color: yellowgreen;
}
所以 当对应的等级时 ，就使事先写好的span 加上对应的类名 即可实现变色
添加现有的代码等级;
function changeLevelTip(className){
// removeLevelClass(password_tip);
//console.log(className);
pass_warn.className=className;
// warn_ele.className= " " ;
var tip_ele = pass_warn.children[0];
// console.log(tip_ele)
switch( className ){
case "low" :
tip_ele.innerHTML="低";
break;
case "middle" :
tip_ele.innerHTML="中";
break;
case "high" :
tip_ele.innerHTML="高";
break;
}
}
/在确认密码时 ，至于要 两个输入框里的值 相等即可\
var passwd = document.querySelector('#passwd');
var passwd_tip = document.querySelector('#passwd_tip');
passwd . addEventListener('focus',function(){
passwd_tip.style.display="block";
})
passwd . addEventListener('blur',function(){
var passwd_value = passwd.value;
if(passwd.value === pass.value){
passwd_tip.style.display="none";
}
})
1916
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
