html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表单</title> <link rel="shortcut icon" type="image/x-icon" href="../img/ic.png"/> <link rel="stylesheet" href="../css/form.css"/> <script src="../js/vailidate.js"></script> </head> <body> <h1>用户注册</h1> <form action="demo1.html" method="post" enctype="multipart/form-data" class="register"> <!-- 用户名 --> <div> <label for="userName">用户名</label> <input placeholder="输入用户名" type="text" name="userName" class="userName" id="userName"/> <span>*</span> </div> <input type="hidden" name="id" value="1"/> <!-- 密码 --> <div> <label for="password">密码</label> <input type="password" name="password" id="password" class="password" placeholder="输入密码"/> <span>*</span> </div> <div> <label for="realName">真实姓名</label> <input placeholder="输入用户名" type="text" name="realName" class="realName" id="realName"/> <span>*</span> </div> <!-- 性别单选框 --> <div> <label>性别</label> <input type="radio" name="gender" value="男" checked/>男 <input type="radio" name="gender" value="女"/>女 <span> </span> </div> <!-- 爱好复选框 --> <div> <label>爱好</label> <input type="checkbox" name="hobby" value="LOL"/>LOL <input type="checkbox" name="hobby" value="王者"/>王者 <input type="checkbox" name="hobby" value="吃鸡" checked/>吃鸡 <input type="checkbox" name="hobby" value="飞车"/>飞车 <span id="afterHobby">*</span> </div> <!-- 生日 --> <div> <label for="birthday">生日</label> <input type="date" id="birthday" class="birthday" name="birthday"/> <span>*</span> </div> <!-- 身份证 --> <div> <label for="identityNo">身份证号</label> <input type="text" id="identityNo" class="identityNo" name="identityNo" placeholder="输入身份证"/> <span>*</span> </div> <!-- 电话 --> <div> <label for="phone">电话</label> <input type="tel" id="phone" name="phone" class="phone" placeholder="输入电话"/> <span>*</span> </div> <!-- 邮箱 --> <div> <label for="email">邮箱</label> <input type="email" id="email" name="email" class="email" placeholder="输入邮箱"/> <span>*</span> </div> <!-- 个人评价 --> <div class="resume"> <label for="resume">个人评价</label> <textarea id="resume" cols="20" rows="10" style="vertical-align: middle;"></textarea> <span>*</span> </div> <!-- 城市 --> <div> <label>所属城市</label> <select id="province" name="province"> <option value="ah">安徽</option> <option value="zj">浙江</option> <option value="js" selected>江苏</option> <option value="jx">江西</option> </select> 省 <select id="city" name="city"> <option value="hf">合肥</option> <option value="hz">杭州</option> <option value="nj" selected>南京</option> <option value="nc">南昌</option> </select> 市 <select id="district" name="district"> <option value="bh">滨湖</option> <option value="xh">西湖</option> <option value="jy" selected>建邺</option> <option value="lcq">老城</option> </select> 区 </div> <!-- 头像 --> <div> <label for="random">验证码</label> <input id="random" type="text" class="random" name="random" disabled/> <input id="reRandom" type="text" class="reRandom" name="reRandom"/> <span>*</span> </div> <!-- 头像 --> <div> <label for="pic">头像</label> <input id="pic" type="file" name="pic"/> <span>*</span> </div> <!-- 提交和重置 --> <div> <label> </label> <input type="submit" value="Submit"/> <input type="reset" value="Reset"/> </div> </form> </body> </html> <style> style: body { background: url("1000357.jpg") no-repeat; background-size: cover; } .register { width: 60%; margin: 0 auto; background-color: rgba(132, 170, 241, 0.2); padding: 10px; border-radius: 5px; } div { margin: 10px; height: 30px; } label { width: 80px; display: inline-block; text-align-last: justify; margin-right: 10px; } .userName, .password, .birthday, .phone, .email, .identityNo, .realName { height: 24px; width: 280px; padding-left: 10px; } .random, .reRandom { height: 24px; width: 130px; padding-left: 10px; text-align: center; } #resume { width: 288px; } .resume { height: 150px; margin-bottom: 20px; } select { height: 28px; } [type="submit"], [type="reset"] { border: none; width: 100px; text-align: center; background-color: green; color: white; line-height: 30px; height: 30px; border-radius: 5px; } .register span { color: red; } h1 { margin: 0 auto; padding: 0; color: #7f6b6b; width: 60%; } script: /** *使用String类和正则表达式进行表单验证 */ //随机验证码 let num = ""; //页面加载结束执行的函数 onload = function () { blurElement(); submitForm(); //爱好的change事件验证选择结果 let hobbyArr = document.querySelectorAll("input[name='hobby']"); for (let i = 0; i < hobbyArr.length; i++) { hobbyArr[i].onchange = function () { vailidateHobby(); }; } //验证图片 document.getElementById("pic").onchange = function () { vailidatePic(); }; //产生随机验证码 generateRandomNum(); }; //元素失去焦点时执行的验证函数 function blurElement() { //验证用户名 document.getElementById("userName").onblur = function () { vailidateUserName(); }; //验证密码 document.getElementById("password").onblur = function () { vailidatePassword() }; //验证真实姓名 document.getElementById("realName").onblur = function () { vailidateRealName(); }; //验证生日 document.getElementById("birthday").onblur = function () { vailidateBirthday(); }; //验证电话 document.getElementById("phone").onblur = function () { vailidatePhone(); }; //验证邮箱 document.getElementById("email").onblur = function () { vailidateEmail(); }; //验证简介 document.getElementById("resume").onblur = function () { vailidateResume(); }; //验证id document.getElementById("identityNo").onblur = function () { vailidateID(); }; } //表单提交执行的函数 function submitForm() { let form = document.getElementsByClassName("register")[0]; form.onsubmit = function (e) { //e.preventDefault(); let flag = vailidateUserName() & vailidateHobby() & vailidatePassword() & vailidateRealName() & vailidateBirthday() & vailidatePhone() & vailidateEmail() & vailidateResume() & vailidatePic() & vailidateID(); //alert(flag); return flag == 1 ? true : false; }; } //1、验证用户名:6-12位，字母开头，不能有_$之外的特殊字符,非空，唯一 function vailidateUserName() { let username = document.getElementById("userName"); let span = next(username); let value = username.value; let reg = /^[a-zA-Z][w$]{5,11}$/; if (value == "") { span.innerHTML = "用户名不能为空"; span.style.color = "red"; return false; } else if (!reg.test(value)) { span.innerHTML = "用户名6-12位字母开头"; span.style.color = "red"; return false; } span.innerHTML = "用户名可用"; span.style.color = "green"; return true; } //2、验证密码:6-12位非空，必须包含大写字符，字母开头，非空 function vailidatePassword() { let password = document.getElementById("password"); let span = next(password); let value = password.value; let code = /^[a-zA-Z]$/; //非空 if (value == "") { span.innerHTML = "密码不能为空"; span.style.color = "red"; return false; } //首字母 let firstWord = value.charAt(0); if (!code.test(firstWord)) { span.innerHTML = "密码首位必须是字母"; span.style.color = "red"; return false; } //大写字符 hello let upCode = /^[A-Z]$/; for (let i = 0; i < value.length; i++) { if (upCode.test(value[i])) { break; } else if (i == value.length - 1) { span.innerHTML = "密码必须必须包含一位大写字母"; span.style.color = "red"; return false; } } //长度 if (value.length > 12 || value.length < 6) { span.innerHTML = "密码长度6-12位"; span.style.color = "red"; return false; } span.innerHTML = "密码可用"; span.style.color = "green"; return true; } //3、验证爱好:至少一个 function vailidateHobby() { let hobbyArr = document.querySelectorAll("input[name='hobby']"); let count = 0; for (let i = 0; i < hobbyArr.length; i++) { if (hobbyArr[i].checked) { count++; } } let span = document.getElementById("afterHobby"); if (count == 0) { span.innerHTML = "爱好至少选择一个"; span.style.color = "red"; return false; } span.innerHTML = "爱好选择正确"; span.style.color = "green"; return true; } //4、验证生日，非空 function vailidateBirthday() { let birthday = document.getElementById("birthday"); let span = next(birthday); let value = birthday.value; //2019-09-10 console.log(value); //非空 if (value == "") { span.innerHTML = "生日不能为空"; span.style.color = "red"; return false; } span.innerHTML = "生日正确"; span.style.color = "green"; return true; } //5、验证电话 1[3456789]d{9} function vailidatePhone() { let phone = document.getElementById("phone"); let span = next(phone); let value = phone.value; let reg = /^1[3456789]d{9}$/; if (value == "") { span.innerHTML = "电话不能为空"; span.style.color = "red"; return false; } if (value.charAt(0) !== '1') { span.innerHTML = "电话首位是1"; span.style.color = "red"; return false; } if (!(/^[3456789]$/.test(value.charAt(1)))) { span.innerHTML = "电话第2位是3456789任一位"; span.style.color = "red"; return false; } if (!reg.test(value)) { span.innerHTML = "电话11位数字"; span.style.color = "red"; return false; } span.innerHTML = "电话正确"; span.style.color = "green"; return true; } //6、验证邮箱 hao123@qq.com /hao123@qq.com.cn /hao123@qq.cn /hao123@qq.org /hao123@qq.net function vailidateEmail() { let email = document.getElementById("email"); let span = next(email); let value = email.value; let reg = /^[A-Za-z]w+@[a-z0-9]{2,}(.com|.cn|.com.cn|.net|.org)$/; if (value == "") { span.innerHTML = "邮箱不能为空"; span.style.color = "red"; return false; } else if (!reg.test(value)) { span.innerHTML = "邮箱不合法，请参考：hao123@qq.com.cn"; span.style.color = "red"; return false; } span.innerHTML = "邮箱正确"; span.style.color = "green"; return true; } //7、验证个人评价 不能超200字，非空 function vailidateResume() { let resume = document.getElementById("resume"); let span = next(resume); let value = resume.value; if (value == "") { span.innerHTML = "个人评价不能为空！"; span.style.color = "red"; return false; } if (value.length > 200) { span.innerHTML = "内容不能超200字符！"; span.style.color = "red"; return false; } span.innerHTML = "输入正确！"; span.style.color = "green"; return true; } //8、验证头像（大小和类型） function vailidatePic() { //let arr = ["png", 'jpg', 'gif', 'bmp']; let pic = document.getElementById("pic"); let span = next(pic); let reg = /^png|jpg|gif|bmp$/; //获得当前图片的文件列表，是一个数组 let fileList = pic.files; console.log(fileList); let imgFile = fileList[0]; //必须处理的undefined异常 if (!imgFile) { span.innerHTML = "文件没有上传文件"; span.style.color = "red"; return false; } //获得imgFile的3个属性 let fileName = imgFile.name;//expo.png let fileSize = imgFile.size;//字节 1024byte = 1kB,1024kB = 1M //文件名的后缀 let suffix = fileName.substring(fileName.lastIndexOf(".") + 1);//png if (fileSize > (150 * 1024)) { span.innerHTML = "文件大小不能超150KB"; span.style.color = "red"; return false; } else if (!reg.test(suffix)) { span.innerHTML = "文件必须是图片格式"; span.style.color = "red"; return false; } span.innerHTML = "文件正确"; span.style.color = "green"; return true; } //9、验证身份证号码 18位 function vailidateID() { let id = document.getElementById("identityNo"); let span = next(id); //53 0102 1920 05 08 011X let value = id.value; //判断空 if (value == "") { span.innerHTML = "身份证号码不能为空"; span.style.color = "red"; return false; } //判断长度 if (value.length != 18) { span.innerHTML = "身份证号码长度18位"; span.style.color = "red"; return false; } //判断前17位数字 let reg = /^d{17}$/; let str = value.substring(0, 17); if (!reg.test(str)) { span.innerHTML = "身份证号码前17位必须是数字"; span.style.color = "red"; return false; } //判断验证码 reg = /^[dxX]$/; str = value.substring(17); if (!reg.test(str)) { span.innerHTML = "验证码必须是数字、x、X"; span.style.color = "red"; return false; } //判断区域码 let arr = [ "11", "12", "13", "14", "21", "22", "23", "21", "22", "23", "31", "32", "33", "34", "35", "36", "37", "41", "42", "43", "44", "45", "46", "50", "51", "52", "53", "54", "61", "62", "63", "64", "65", "81", "82", "83" ]; str = value.substring(0, 2); for (let i = 0; i < arr.length; i++) { if (str === arr[i]) { break; } else if (i == arr.length - 1) { span.innerHTML = "区域码不正确！"; span.style.color = "red"; return false; } } //判断年 [1900-now] let year = parseInt(value.substring(6, 10)); let now = new Date().getFullYear(); if (year > now || year < 1900) { span.innerHTML = "年份必须在1900-" + now + "之间"; span.style.color = "red"; return false; } //判断月 [1-12] let month = parseInt(value.substring(10, 12)); if (month > 12 || month < 1) { span.innerHTML = "月份必须在1-12之间！"; span.style.color = "red"; return false; } //判断日 [1-28][1-29][1-30][1-31] let days = 0; //2月的天数，根据year是否闰年 if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) { //闰年 days = 29; } else { //平年 days = 28; } let arrDays = [31, days, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; let date = parseInt(value.substring(12, 14)); if (date < 1 || date > arrDays[month - 1]) { span.innerHTML = "日必须在1-" + arrDays[month - 1] + "之间"; span.style.color = "red"; return false; } span.innerHTML = "身份证号码正确"; span.style.color = "green"; return true; } //10、验证真实姓名：汉字[2,50]|字母[3-50] function vailidateRealName() { let realName = document.getElementById("realName"); let span = next(realName); let value = realName.value; let reg = /^([u4e00-u9fa5]{2,50})|([A-Za-z]{3,50})$/; if (value == "") { span.innerHTML = "真实姓名不能为空"; span.style.color = "red"; return false; } else if (!reg.test(value)) { span.innerHTML = "真实姓名汉字[2,50]或者字母[3-50]"; span.style.color = "red"; return false; } span.innerHTML = "姓名可用"; span.style.color = "green"; return true; } //验证随机验证码 function vailidateRandom () { //作业：完成今天所有表单验证 //还有此处验证功能：just do it! } //t元素后面的兄弟元素 function next(t) { return t.nextElementSibling; } //产生随机验证码 function generateRandomNum() { for (let i = 0; i < 6; i++) { num += parseInt(Math.random() * 10); } document.getElementById("random").value = num; }