用一个表格简单模拟新用户注册页面。
用正则表达式检验用户名,手机号和身份证号是否合法。
对自我介绍进行敏感词限制,如出现敏感词则进行提醒。
<!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>
<tr >
<td valign="middle" width="30%" bgcolor="#FCFCFC" align="center">手机号</td>
<td valign="middle" bgcolor="#FCFCFC">
<input type="text" name="num" size="20" id="num"><span> * </span><a id="id5"></a>
</td>
</tr>
<tr>
<td valign="middle" width="30%" bgcolor="#FCFCFC" align="center">身份证号:</td>
<td valign="middle" bgcolor="#FCFCFC">
<input type="text" value="" name="vip" size="20" maxlength="20" id="card"><span> * </span><a id="id3"></a>
</td>
</tr>
<tr>
<td valign="middle" width="30%" bgcolor="#FCFCFC" align="center">自我介绍:</td>
<td valign="middle" bgcolor="#FCFCFC">
<textarea name="textarea" cols="40" rows="4" id="text"> </textarea><a id="id4"></a>
</td>
</tr>
<tr>
<td valign="middle" width="30%" bgcolor="#FCFCFC" align="center">性别:</td>
<td valign="middle" bgcolor="#FCFCFC">
<input type="radio" value="male" name="sex" checked="checked">男
<input type="radio" value="female" name="sex" >女
</td>
</tr>
<tr>
<td valign="middle" width="30%" bgcolor="#FCFCFC" align="center">爱好:</td>
<td valign="middle" bgcolor="#FCFCFC">
<input type="checkbox" value="sprot" name="hover" >运动
<input type="checkbox" value="game" name="hover" checked="checked" >玩游戏
<input type="checkbox" value="music" name="hover" >音乐
</td>
</tr>
<tr align="center" valign="middle" >
<td align="center" valign="middle" colspan="2" bgcolor="#FCFCFC">
<input type="submit" name="submit" value="提交" size="20" onClick="onSubmit()">
<input type="reset" name="submit" value="取消" size="20">
</td>
</tr>
</table>
</body>
</html>
使用正则表达式可以很方便的检验所输入的数据是否合法。
使用正则表达式,就可以:
- 测试字符串的某个模式。例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式。这称为数据有效性验证。
- 替换文本。可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字。
- 根据模式匹配从字符串中提取一个子字符串。可以用来在文本或输入字段中查找特定文字。