用正则表达式验证html表单输入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
form {
width: 500px;
padding-left: 20px;
margin-left: 40px;
background-color: rgb(187, 238, 238);
}
span{
font-size: small;
color: rgb(108, 122, 122);
padding-left: 20px;
}
</style>
</head>
<body>
<form name="myform" onsubmit="return doSubmit()" method="post">
<h3>个人信息提交表</h3>
登录账号:<input type="text" name="uname" placeholder="请输入账户" /><span>6-18位有效字符(字母、数字、下划线)</span> <br/><br/>
登录密码:<input name="password1" onblur="checkPassword1()" placeholder="请输入密码"><span>6-18位任意字符</span><br><br>
重复密码:<input name="password2" onblur="checkPassword2()" placeholder="请再次输入密码"><span>重复密码与登陆密码一致</span><br><br>
性 别:<input type="radio" name="gender" value="male" checked> 男
<input type="radio" name="gender" value="female">女<br><br>
年 龄:<input type="number" name="age" placeholder="请输入年龄" onblur="checkAge()"><span>大于0的任意两位整数</span><br><br>
手机号码:<input name="phone" placeholder="请输入手机号码" onblur="checkPhone()"><span>由1开头的11位整数</span><br><br>
邮 箱:<input type="email" name="email" placeholder="请输入邮箱"><span>有效的Email地址</span><br><br>
学 历:<select name="education" id="">
<option value="">请选择</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
</select>
<br><br>
<input type="submit" value="提交">
<input type="reset" value="重置"><br>
</form>
</body>
<script>
//验证账号函数
function checkUname(){
//获取账号信息
var uname = document.myform.uname.value;
//执行验证
if (uname.match(/^\w{8,16}$/) == null) {
alert("请输入8~16位的账号信息!");
return false;
}
return true;
}
//验证密码函数
function checkPassword1(){
//获取密码信息
var password1 = document.myform.password1.value;
//执行验证
if (password1.match(/^\S{8,16}$/) == null) {
alert("请输入8~16位的密码信息!");
return false;
}
return true;
}
function checkPassword2(){
var password1 = document.myform.password1.value;
var password2 = document.myform.password2.value;
if(password1!=password2){
alert("密码不一致");
return false;
}
return true;
}
//验证年龄函数
function checkAge(){
var age=document.myform.age.value;
if(age.match(/^[1-9]{2}$/)==null){
alert("年龄必须是大于0的两位整数");
return false;
}
return true;
}
//手机号验证
function checkPhone(){
var phone=document.myform.phone.value;
if(phone.match(/^1+[0-9]{10}$/)==null){
alert("手机号必须是由1开头的11位整数");
return false;
}
return true;
}
//验证邮箱函数
function checkEmail(){
//获取账号信息
var email = document.myform.email.value;
//执行验证
if(email.match(/^\w+@\w+(\.\w+){1,2}$/) == null){
alert("请输入正确的Email信息!");
return false;
}
return true;
}
//表单提交
function doSubmit(){
return checkUname() && checkPassword1()&& checkPassword2() &&checkAge() &&checkPhone() && checkEmail();
}
</script>
</body>
</html>
效果