1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>表单验证</title> 6 <style> 7 input { 8 width: 300px; 9 border:1px solid #ccc; 10 padding:10px; 11 font-size:16px; 12 } 13 button { 14 width: 322px; 15 border:1px solid #ccc; 16 background:#f5f5f5; 17 line-height: 40px; 18 cursor: pointer; 19 font-size:16px; 20 } 21 td.success { 22 color:green; 23 } 24 td.error { 25 color:red; 26 } 27 </style> 28 </head> 29 <body> 30 <h1>注册</h1> 31 <hr> 32 33 <form action="user.php" id="myForm"> 34 <table> 35 <tr> 36 <td>用户名：</td> 37 <td><input type="text" name="username" id="usernameInput"></td> 38 <td></td> 39 </tr> 40 <tr> 41 <td>邮箱：</td> 42 <td><input type="text" name="email" id="emailInput"></td> 43 <td></td> 44 </tr> 45 <tr> 46 <td>密码：</td> 47 <td><input type="password" name="pwd" id="pwdInput"></td> 48 <td></td> 49 </tr> 50 <tr> 51 <td>确认密码：</td> 52 <td><input type="password" name="repwd" id="repwdInput"></td> 53 <td></td> 54 </tr> 55 <tr> 56 <td></td> 57 <td> 58 <button>注 册</button> 59 </td> 60 <td></td> 61 </tr> 62 </table> 63 </form> 64 65 66 <script src="../jquery-3.3.1.js"></script> 67 <script> 68 //表单验证 69 $(function(){ 70 //用户名验证事件 71 $('#usernameInput').on('blur', checkUsername); 72 //邮箱验证事件 73 $('#emailInput').on('blur', checkEmail); 74 //密码验证事件 75 $('#pwdInput').on('blur', checkPwd); 76 //确认密码 验证 77 $('#repwdInput').on('blur', checkRepwd); 78 79 //表单提交事件 80 $('#myForm').on('submit', function(){ 81 return checkUsername() && checkEmail() && checkPwd() && checkRepwd(); 82 }); 83 84 85 //验证 用户名 86 function checkUsername(){ 87 //获取 用户输入的内容 88 var value = $('#usernameInput').val(); 89 //验证 用户输入是否合法 4~12位 数字/字母/下划线 90 if (value.search(/^w{4,12}$/) === -1) { 91 $('#usernameInput').parent().next().text('用户名不合法 必须是4~12位数字、字母、下划线').attr('class', 'error') 92 return false; 93 } else { 94 $('#usernameInput').parent().next().text('用户名可用').attr('class', 'success') 95 return true; 96 } 97 } 98 99 100 //验证邮箱 101 // abcc@12.com sdf-sdf@1243.com sdfasdf@123.com.cn 102 // www.niho.中国 103 function checkEmail() { 104 //获取用户的输入 105 var value = $('#emailInput').val(); 106 //验证 107 if (value.search(/^[w-]+@[w-]+(..+){1,3}$/) === -1) { 108 $('#emailInput').parent().next().text('邮箱不合法').attr('class', 'error'); 109 return false; 110 } else { 111 $('#emailInput').parent().next().text('邮箱可用').attr('class', 'success'); 112 return true; 113 } 114 } 115 116 117 //验证密码 6-18位 118 function checkPwd(){ 119 //获取用户输入 120 var value = $('#pwdInput').val(); 121 //验证 122 if (value.length < 6 || value.length > 18) { 123 $('#pwdInput').parent().next().text('密码必须是6到18位').attr('class', 'error'); 124 return false; 125 } else { 126 $('#pwdInput').parent().next().text('密码可用').attr('class', 'success'); 127 return true; 128 } 129 } 130 131 132 //确认密码 133 function checkRepwd() { 134 //获取用户输入和上一次密码 135 var pwd = $('#pwdInput').val(); 136 var repwd = $('#repwdInput').val(); 137 138 //验证 139 if (pwd !== repwd) { 140 $('#repwdInput').parent().next().text('两次密码不一致').attr('class', 'error'); 141 return false; 142 } else { 143 $('#repwdInput').parent().next().text('两次密码一致').attr('class', 'success'); 144 return true; 145 } 146 } 147 148 }) 149 </script> 150 </body> 151 </html>
表单验证
原文链接：https://www.cnblogs.com/Roc-Atlantis/p/9494965.html
原创文章，作者：优速盾-小U，如若转载，请注明出处：https://www.cdnb.net/bbs/archives/1537
