您的位置：首页 > Web前端 > JavaScript

JavaScript正则表达式表单验证

2016-08-29 17:10 846 查看
效果图：



<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>表单验证</title>
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>

<script>
function myfunction(){
var username = document.getElementById('username').value;
var userpassword = document.getElementById('userpassword').value;
var gender = document.getElementById('gender').value;
var realname = document.getElementById('realname').value;
var age = document.getElementById('age').value;

var regusername = /^[a-zA-z]\w{5,11}$/;
var regpassword = /^[a-zA-Z0-9]{5,11}$/;
var reggender = /^['男'|'女'|'中']$/;
var regname = /^[\u4e00-\u9fa5]{2,4}$/;
var age = Number(age);

//验证用户名
if(regusername.test(username)){
//验证密码
if(regpassword.test(userpassword)){
//验证性别
if(reggender.test(gender)){
//验证姓名
if(regname.test(realname)){
//验证年龄
if(age<=0 || age>150){
alert("年龄错误！");
}else{
alert("验证通过");
}
}else{
alert("姓名错误");
}
}else{
alert("性别格式错误");
}
}else{
alert("密码格式错误");
}
}else{
alert("账号格式错误！");
}
}
</script>
</head>
<body>

<div style="width: 500px;height: 600px;margin: 0 auto;margin-top: 100px">
<form class="form-horizontal" role="form">
<!-- 账号-->
<div class="form-group">
<label class="col-sm-2 control-label">账号:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="username" placeholder="请输入账号...">
</div>
</div>
<!-- 密码-->
<div class="form-group">
<label class="col-sm-2 control-label">密码:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="userpassword" placeholder="请输入密码...">
</div>
</div>
<!-- 性别-->
<div class="form-group">
<label class="col-sm-2 control-label">性别:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="gender" placeholder="请输入性别..">
</div>
</div>
<!-- 姓名-->
<div class="form-group">
<label class="col-sm-2 control-label">姓名:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="realname" placeholder="请输入姓名...">
</div>
</div>
<!-- 年龄-->
<div class="form-group">
<label class="col-sm-2 control-label">年龄:</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="age" placeholder="请输入年龄...">
</div>
</div>

<div class="form-group">
<div class="col-sm-offset-2 col-sm-10 text-right">
<button type="submit" class="btn btn-primary" onclick="myfunction()">登录</button>
</div>
</div>
</form>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航