目录
一，表单正则验证校验任务训练
1，任务概述
2，任务过程
3，可能遇到的问题
4，参考代码
4.1 运行结果
4.2 编程思路
4.3 参考代码
一，表单正则验证校验任务训练
1，任务概述
程序猿小明需要为公司员工的个人信息录入编写前端代码,效果如下图
需求:要保证信息录入格式正确无遗漏(输入有误要给到对应提示)
2，任务过程
使用 HTML+CSS 布局出如上图所示页面效果
嵌入 JS 代码，添加表单提交和表单项失去焦点等事件处理
在事件处理中按照表单项后面提示的信息完成对应表单验证操作
为代码添加适量注释说明，注意代码排版整洁
3，可能遇到的问题
单选和下拉框无须添加失去焦点事件（因为只有输入框需要）
正则表达式的使用
4，参考代码
4.1 运行结果
4.2 编程思路
编写HTML页面样式：form表单（input标签的text普通文本框，password密码输入框，ratio单选。以及select标签的下拉菜单）；
补充表单填写规则（通过text标签设置样式，并用 空格进行对齐）；
为各个输入选择项绑定失去焦点属性onblur对应的函数，并为form设置onsubmit属性对应的函数；
利用正则表达式编写表单验证规则；
调整页面为【提交后不刷新页面】，这样点击提交按钮后，如果有选项填写错误，只需修改对应内容即可，不必全部重新填写；
注意：
手机号码验证方法：参考@北极光LG【使用正则表达式验证手机号码】
- 规定第一位数字输入的必须是1，第二位数字输入的必须是3,4,5,7,8其中的一位，后面的只能输入0-9的数字，不能输入字母或其他的字符，输入的必须是一个十一位数的号码
4.3 参考代码
<!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>
<body>
<h1>个人信息登记表</h1>
<form action="" method="POST" name="myform" onsubmit="doSubmit()" target="iframe">
登录账号：<input type="text" name="account" onblur="checkAccount()">
<text style="color:gray;font-size: 14px;"> 6~18位有效数字(字母,数字,下划线)</text><br><br>
登录密码：<input type="password" name="password" onblur="checkPassword()">
<text style="color:gray;font-size: 14px;"> 6~18位任意字符</text><br><br>
重复密码：<input type="password" name="password2" onblur="recheckPassword()">
<text style="color:gray;font-size: 14px;"> 重复密码与登录密码一致</text><br><br>
性 别：<input type="radio" name="sex" value="male" checked>男
<input type="radio" name="sex" value="female" checked>女<br><br>
年 龄：<input type="text" name="age" onblur="checkAge()">
<text style="color:gray;font-size: 14px;"> 大于0的任意两位整数</text><br><br>
手机号码：<input type="text" name="phone" onblur="checkPhone()">
<text style="color:gray;font-size: 14px;"> 1开头的11位整数</text><br><br>
邮 箱：<input type="text" name="email" onblur="checkEmail()">
<text style="color:gray;font-size: 14px;"> 有效的Email地址</text><br><br>
学 历：<select name="education" onblur="checkEducation()">
<option value="0" selected>请选择</option>
<option value="1">大专</option>
<option value="2">本科</option>
<option value="3">硕士</option>
<option value="4">博士</option>
</select>
<!-- 如果只是在HTML中添加多个空格，只能一个个复制，通过JavaScript可以简化此步骤 -->
<text style="color:gray;font-size: 14px;"> 必须选择一个学历选项</text>
<br><br>
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<!-- 避免表单提交后刷新页面 -->
<iframe id="iframe" name="iframe" style="display:none;"></iframe>
</body>
<script>
// 检查账号
function checkAccount(){
var account = document.myform.account.value;
// \w表示字母、数字、下划线
if(account.match(/^\w{6,18}$/) == null){
alert("请输入6~18位字符、数字、下划线字符");
return false
}
return true;
}
// 检查密码
function checkPassword(){
var password = document.myform.password.value;
// .表示任意字符
if(password.match(/^.{6,18}$/) == null){
alert("请输入6~18位任意字符");
return false;
}
return true;
}
// 检查密码是否一致
function recheckPassword(){
var password = document.myform.password.value;
var password2 = document.myform.password2.value;
if(password != password2){
alert("两次密码输入不一致！");
return false;
}
return true;
}
// 检查年龄
function checkAge(){
var age = document.myform.age.value;
if(age.match(/^\d{1,2}$/) == null){
alert("请输入1~99的整数");
return false;
}
return true;
}
// 检查电话号码
function checkPhone(){
var phone = document.myform.phone.value;
// 以1开头的11位整数
if(phone.match(/^[1][3,4,5,7,8][0-9]{9}$/) == null){
alert("请输入正确的电话号码");
return false;
}
return true;
}
// 检查邮箱
function checkEmail(){
var email = document.myform.email.value;
// 至少有任意字符(字母数字下划线)+@至少有任意字符(字母数字下划线)+1~3个.xxx结尾
if(email.match(/^\w+@\w+(\.\w+){1,3}$/) == null) {
alert("请输入正确的Email地址");
return false;
}
return true;
}
// 检查学历是否选择
function checkEducation(){
var education = document.myform.education.value;
if(education == 0){
alert("请选择一个学历选项");
return false;
}
return true;
}
function doSubmit(){
if(checkAccount() && checkPassword() && recheckPassword() && checkAge() && checkPhone() && checkEmail() && checkEducation()){
alert("提交成功！");
return true;
}else{
return false;
}
}
</script>
</html>