HTML+JS+正则表达式实现个人信息录入
程序员文章站
2022-03-21 08:25:26
...
**题目：**程序猿小明需要为公司员工的个人信息录入编写前端代码,效果如下图 需求:要保证信息录入格式正确无遗漏(输入有误要给到对应提示)
最终效果图：代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
div {
background-color: lightgreen;
height: 800px;
width: 100%;
border: 1px;
overflow: hidden;
position: relative;
/* margin-left: 100px; */
}
form {
position: absolute;
margin-left: 100px;
margin-top: 100px;
}
h1 {
margin-left: 100px;
position: absolute;
}
#information {
width: 300px;
height: 500px;
position: absolute;
margin-top: 80px;
margin-left: 380px;
font-size: small;
color: grey;
line-height: 31px;
}
</style>
<body>
<div id="did">
<h1>个人信息登记表</h1>
<form name="myform" method="POST" >
登录账号：<input type="text" name="uname" onblur="checkUname()" /> <br /><br />
登录密码：<input type="password" name="psword" onblur="checkPsword()" /> <br /><br />
重复密码：<input type="password" name="repsword" onblur="checkRepsword()" /> <br /><br />
性 别： <input type="radio" checked name="Sex" value="male" />
男 <input type="radio" name="Sex" value="female" /> 女<br /><br />
年 龄：<input type="text" name="age" onblur="checkAge()" /><br /><br />
手机号码：<input type="text" name="tel" onblur="checkTel()" /><br /><br />
邮 箱：<input type="text" name="email" onblur="checkEmail()" /><br /><br />
学 历：<select name="level" id="ss" onsubmit=" return checkLevel()">
<option value="v1">请选择</option>
<option value="v2">专科</option>
<option value="v3">本科</option>
<option value="v4">硕士</option>
<option value="v5">博士</option>
</select><br /><br />
<button type="submit" onclick="doSubmit()">提交</button>
<button type="reset">重置</button>
</form>
<div id="information">
<p>6-18为有效字符(字母、数字、下划线)</p>
<p>6-18位任意字符</p>
<p>重复密码与登录密码一致</p>
<p>必须选择一个</p>
<p>大于0的任意两位整数</p>
<p>由1开头的11位整数</p>
<p>有效的Email地址</p>
<p>必须选择一个学历选项</p>
</div>
</div>
</body>
<script>
//账号验证函数
function checkUname() {
//取值
var uname = document.myform.uname.value;
// console.log(uname)
//判断
if (uname.match(/^\w{6,18}$/) == null)) {
alert("6-18为有效字符(字母、数字、下划线)");
return false;
}
return true;
}
//登录密码验证函数
function checkPsword() {
//取值
var pd = document.myform.psword.value;
//判断
if (pd.length>=6 && pd.length <= 18) {
alert("6-18为有效字符(字母、数字、下划线)");
return false;
}
return true;
}
//重复密码验证函数
function checkRepsword() {
//取值
var pd = document.myform.psword.value; //登录密码
var rpd = document.myform.repsword.value; //重复密码
if (rpd != pd) {
alert("重复密码与登录密码一致");
return false;
}
return true;
}
//年龄验证函数
function checkAge() {
//取值
var age = document.myform.age.value;
// console.log(age);
// console.log(age.length)
//判断
// if(age.length >2 || age <= 0 ){
if (age.match(/^\d{2}$/) == null || age <= 0) {
alert("大于0的任意两位整数");
return false;
}
return true;
}
//手机号码验证函数
function checkTel() {
//取值
var tel = document.myform.tel.value;
console.log(tel);
console.log(tel.length)
//判断
if (tel.match(/1\d{10}$/) == null) {
alert("由1开头的11位整数");
return false;
}
return true;
}
//验证Email
function checkEmail() {
var email = document.myform.email.value;
if (email.match(/\aaa@qq.com[a-zA-Z0-9]+\.([a-zA-Z]{3,})/) == null) {
alert("有效的Email地址");
return false;
}
return true;
}
//验证学历函数
function checkLevel() {
var level = document.getElementById("ss");
console.log(level);
if (level.value == "请选择") {
alert("必须选择一个学历");
return false;
}
return true;
}
function doSubmit() {
if( checkEmail() && checkPsword() && checkRepsword() && checkTel() && checkUname() && checkAge()){
alert("提交成功");
}else{
alert("提交失败");
}
}
</script>
</html>
之中遇到的几个难点：
1、文本框前的文字不整齐：
使用“ ”进行空格调整。
2、长度限制
采用.length去判断。
3、样式
边找资料边自己调。
上一篇： 信息录入数据库
下一篇： 学生信息录入界面java