模拟新用户注册页面（用到正则表达式）

最新推荐文章于 2022-07-27 08:37:50 发布

choucai3595

最新推荐文章于 2022-07-27 08:37:50 发布

阅读量590

点赞数

文章标签： javascript ViewUI

原文链接：https://my.oschina.net/u/3841968/blog/1827307

版权

用一个表格简单模拟新用户注册页面。

用正则表达式检验用户名，手机号和身份证号是否合法。

对自我介绍进行敏感词限制，如出现敏感词则进行提醒。

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>注册</title>
<style type="text/css">
*{
font-size:14px;

   }
h2{
   font-size:22px;
   }
span{
   color:#F00;
   font-size:12px;
   }
input,textarea{
   border:1px #999999 solid;
   margin:5px;
   }
td{
   height:28px;
   }
</style>
<script type="text/javascript">
function onSubmit(){

   //用户名验证
   var username=document.getElementById("user");
   var vusername=document.getElementById("id1");
   if(username.value==''||username.value==null){

       vusername.innerHTML="<span style='color:red'>用户名不允许为空!</span>"
   }else{
       //用户名合法验证
       var user=/^[a-zA-Z][a-zA-Z0-9_]{5,15}$/;
       var vusername=document.getElementById("id1");
       if(user.test(username.value)){
       vusername.innerHTML="<span style='color:black'>输入正确</span>";
       }else{
       vusername.innerHTML="<span style='color:red'>输入有误！请重新输入</span>";
       }
   }

   //密码验证非空验证;
   var pwd=document.getElementById("pwd");
   if(pwd.value==''||pwd.value==null){
       var vpwd=document.getElementById("id2");
       vpwd.innerHTML="<span style='color:red'>密码不允许为空!</span>"
   }else{
       var vpwd=document.getElementById("id2");
       vpwd.innerHTML="";
   }

   //手机号验证
   var numb=document.getElementById("num");
   var vnum=document.getElementById("id5");
   if(numb.value==''||numb.value==null){
       vnum.innerHTML="<span style='color:red'>手机号不允许为空!</span>"
   }else{
       var num1=/^\d{11}$/; //手机号的正则
   if(num1.test(numb.value)){
       vnum.innerHTML="<span style='color:black'>输入正确</span>";
   }else{
           vnum.innerHTML="<span style='color:red'>输入的格式有误，请输入正确的手机号!</span>"
       }
   }

   //身份证验证
   var card=document.getElementById("card");
   var vcard=document.getElementById("id3");
   if(card.value==''||card.value==null){
       vcard.innerHTML="<span style='color:red'>身份证号不允许为空!</span>"
   }else{
       var Expression=/^(\d{15}|\d{17}[\dx])$/;
       if(Expression.test(card.value)){
       vcard.innerHTML="";
       }
       else{
           vcard.innerHTML="<span style='color:red'>输入的格式有误，请输入正确的身份证号!</span>"
       }

}

   //多行文本框字数限制、内容过滤
   var text=document.getElementById("text").value;
   var vtext=document.getElementById("id4");
   if(text.length>100){
       vtext.innerHTML="<span style='color:red'>最多输入一百字!</span>"
   }else{
       var filter=/傻子/g; //g全局匹配，限制词
if(filter.test(text)){
           vtext.innerHTML="<span ><font color='#FF0000'>该语句中有非法词语**，系统已经过滤！</font></span>";
}else{
           vtext.innerHTML=""
}
   }

}
</script>
</head>
<body>
<table align="center" width="700" border="0" bgcolor="#68D0C8">
<tr>
<td valign="middle" width="30%" colspan="2" bgcolor="#FCFCFC" align="center">
        <h2>注册新用户</h2>
</td>
</tr>
<tr>
<td valign="middle" width="30%" bgcolor="#FCFCFC" align="center">用户名：</td>
<td valign="middle" bgcolor="#FCFCFC">
   <form action="" method="post">
       <input type="text" name="username" size="20" id="user"><span> * </span><a id="id1">请输入字母开头6-16位</a>
   </form>
</td>
</tr>
<tr>
<td valign="middle" width="30%" bgcolor="#FCFCFC" align="center">用户密码：</td>
<td valign="middle" bgcolor="#FCFCFC">
<input type="password" value="" name="email" size="20" maxlength="20" id="pwd"><span> * </span><a id="id2"></a>
</td>
</tr>