自学web前端练手——js正则表达式实现表单验证
程序员文章站
2022-07-13 13:53:26
...
利用正则表达式来判断用户名是否“由字母、数字、下划线组成，字母开头，限制在4-16位”；判断密码是否“由4-16位字符组成”。
为了保护密码隐私性故令密码input的type=“password”，使输入的密码不可见。
效果如下：
若成功验证则向123.php发送数据。
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#main{
width: 200px;
height: 200px;
margin: 0 auto;
background-color: #cee;
}
</style>
</head>
<body>
<div id="main">
<h2>用户登录</h2>
<form name="cform" method="post" onsubmit="return checkForm()" action="123.php">
用户账号：<input name="user"><br />
用户密码：<input name="pass" type="password"><br />
<input type="submit" value="验证">
</form>
<script>
function checkForm () {
var user=cform.user.value;
var pass=cform.pass.value;
if(!(/^[a-zA-Z]\w{3,15}$/.test(user)))
{alert("用户名由字母、数字、下划线组成，字母开头，限制在4-16位");
cform.user.select();//没有返回值
return false;}
// var str_temp=user.substr(0,1);
// if(!((str_temp>="a"&&str_temp<="w")||(str_temp>="A"&&str_temp<="W"))){
// alert("用户名第一个字符需为字母");
// return false;
// }
if(!(/^\w{4,16}$/.test(pass))){
alert("密码由4-16位字符组成");
cform.pass.select();
return false;
}
return true;
}
</script>
</div>
</body>
</html>
上一篇： eclipse配置maven镜像的方法
下一篇： 基于UDP协议的Socket编程