<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>正则练习</title>
</head>
<body>
<form action="">
用户名 ： <input type="text" placeholder="用户名，4-16位" id="username" onblur="checkName()"><span id="re"></span><br>
密码强度 ： <input type="text" placeholder="最少6位" id="password" onblur="checkPwd()"/><span id="ree"></span>
<p>邮箱 ： <input type="text" placeholder="请输入邮箱" id="email" onblur="checkEmail()" ></p>
<p>身份证号码 ： <input type="text" placeholder="请输入身份证号码"></p>
</form>
<script>
function $(id) {
return document.getElementById(id);
}
function checkName() {
var userName=$('username').value;
if (userName==""){
$("re").innerHTML="不可以为空";
return false;
}
var reg=/^[a-zA-Z][a-zA-Z0-9]{4,16}$/;
if(!reg.test(userName)) {
$('re').innerHTML='用户名是4-16位数字或字母组成,开头为字母';
return false;
}
$('re').innerHTML='';
return true;
}
function checkPwd() {
var passWord=$('password').value;
if (passWord==""){
$("re").innerHTML="不可以为空";
return false;
}
var reg=/^[a-zA-Z][a-zA-Z0-9]{6,16}$/;
if(!reg.test(passWord)) {
$('ree').innerHTML='密码强度不够';
return false;
}
$('ree').innerHTML='';
return true;
}
function checkEmail() {
var userName=$('username').value;
if (userName==""){
$("re").innerHTML="不可以为空";
return false;
}
var reg=/^[a-zA-Z][a-zA-Z0-9]{4,16}$/;
if(!reg.test(userName)) {
$('re').innerHTML='用户名必须是5-10位数字或字母组成，开头不能是数字'; return false; } $('re').innerHTML=''; return true;}</script></body></html>