正则表达式实现表单验证
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> </head> <body> <form action="index2.html" onsubmit="return fun()"> <p> 学生姓名:<input type="text" id="stu_name" placeholder="请输入学生姓名" onblur="fun1()"> <span id="s1"></span> </p> <p> 学生学号:<input type="text" id="stu_num" placeholder="请输入学生学号" onblur="fun2()"> <span id="s2"></span> </p> <p> 登录密码:<input type="text" id="stu_pwd" placeholder="请输入登录密码" onblur="fun3()" /> <span id="s3"></span> </p> <p> 联系方式:<input type="text" id="stu_tel" placeholder="请输入学生联系方式" onblur="fun4()"> <span id="s4"></span> </p> <p> 联系邮箱:<input type="text" id="stu_email" placeholder="请输入学生联系邮箱" onblur="fun5()"/> <span id="s5"></span> </p> <p> <input type="submit" value="立即添加"> </p> </form> </body> </html> <script> function fun(){ if(fun1() && fun2() && fun3() && fun4() && fun5()){ return true }else{ return false } } function fun1(){ /*验证学生姓名为中文,2-6位*/ //正则表达式 var reg = /^[\u4e00-\u9fa5]{2,6}$/ //获取学生姓名 var studentName = document.getElementById('stu_name').value //验证正则表达式 var result = reg.test(studentName) //判断验证的结果 if(result){ document.getElementById('s1').innerHTML = '<font color="green">验证通过</font>' return true }else{ document.getElementById('s1').innerHTML = '<font color="red">学生姓名必须由2-6位中文组成</font>' return false } } function fun2(){ /*学号必须是11位数字组成*/ //正则表达式 var reg = /^\d{11}$/ //获取学号 var sutdentNum = document.getElementById('stu_num').value //验证表达式 var result = reg.test(sutdentNum) //判断 if(result){ document.getElementById('s2').innerHTML = '<font color="green">验证通过</font>' return true }else{ document.getElementById('s2').innerHTML = '<font color="red">学生学号只能由11位数字组成</font>' return false } } function fun3(){ var reg = /^\w{5,10}$/ var studentPwd = document.getElementById('stu_pwd').value var result = reg.test(studentPwd) if(result){ document.getElementById('s3').innerHTML = '<font color="green">验证通过</font>' return true }else{ document.getElementById('s3').innerHTML = '<font color="red">登录密码由5-10位数字、字母、下划线组成</font>' return false } } function fun4(){ /*手机号码允许13、15、16、18、19开头*/ var reg = /^1[35689]\d{9}$/ var studentTel = document.getElementById('stu_tel').value var result = reg.test(studentTel) if(result){ document.getElementById('s4').innerHTML = '<font color="green">验证通过</font>' return true }else{ document.getElementById('s4').innerHTML = '<font color="red">手机号是11位数字,由13、15、16、18、19开头</font>' return false } } function fun5(){ //邮箱只能是QQ或者163邮箱,并且只能是com或者cn结尾 var reg = /^\w+@(qq|163)\.(com|cn)$/ var studentEmail = document.getElementById('stu_email').value var result = reg.test(studentEmail) if(result){ document.getElementById('s5').innerHTML = '<font color="green">验证通过</font>' return true }else{ document.getElementById('s5').innerHTML = '<font color="red">邮箱只能是QQ或者163,并且结尾只能是cn或者com</font>' return false } } </script>
效果图:
通往牛逼的路上,在意的只有远方!