1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单校验</title> 6 <style> 7 table { 8 margin: 20px auto; 9 } 10 </style> 11 <script src="js/myjs01.js"></script> 12 </head> 13 <body> 14 <form action="" onsubmit="return isForm()"> 15 <table> 16 <tr> 17 <td>用户名：</td> 18 <td><input type="text" id="name" onblur="isName()"/><span id="spanName" style="color: red"></span></td> 19 </tr> 20 <tr> 21 <td>密码：</td> 22 <td><input type="password" id="pwd1" onblur="isPwd1()"/><span id="spanPwd1" style="color: red"></span></td> 23 </tr> 24 <tr> 25 <td>确认密码：</td> 26 <td><input type="password" id="pwd2" onblur="isPwd2()"/><span id="spanPwd2" style="color: red"></span></td> 27 </tr> 28 <tr> 29 <td><input type="reset"/></td> 30 <td><input type="submit"/></td> 31 </tr> 32 </table> 33 </form> 34 </body> 35 </html>
js代码
1 function isForm() {//表单拦截 2 return isName() && isPwd1() && isPwd2(); 3 } 4 5 function isName() { 6 var th = document.getElementById("name"); 7 var name = th.value; 8 var reg_name = /^w{6,12}$/;//运用正则表达式校验用户名6到12位数字字母下划线字符 9 var temp = reg_name.test(name); 10 if (!temp) { 11 document.getElementById("spanName").innerHTML = "用户名不合法！"; 12 th.style.border = "1px solid red";//设置输入框样式 13 } else { 14 document.getElementById("spanName").innerHTML = ""; 15 th.style.border = ""; 16 } 17 return temp; 18 } 19 20 function isPwd1() { 21 var th = document.getElementById("pwd1"); 22 var pwd1 = th.value; 23 var pwd1 = th.value; 24 var temp = false; 25 if (pwd1.length == 0) { 26 temp = false; 27 document.getElementById("spanPwd1").innerHTML = "密码不能为空！"; 28 th.style.border = "1px solid red"; 29 } else { 30 temp = true; 31 document.getElementById("spanPwd1").innerHTML = ""; 32 th.style.border = ""; 33 } 34 return temp; 35 } 36 37 function isPwd2() { 38 var pwd1 = document.getElementById("pwd1").value; 39 var th = document.getElementById("pwd2"); 40 var temp = false; 41 var pwd2 = th.value; 42 if (pwd1 != pwd2) { 43 temp = false; 44 document.getElementById("spanPwd2").innerHTML = "两次密码不一致！"; 45 th.style.border = "1px solid red"; 46 } else { 47 temp = true; 48 document.getElementById("spanPwd2").innerHTML = ""; 49 th.style.border = ""; 50 } 51 return temp; 52 }