JavaScript实现表单的校验以及匹配正则表达式
Posted 孤云jh
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JavaScript实现表单的校验以及匹配正则表达式相关的知识，希望对你有一定的参考价值。
运行效果：
未填写信息报错：
匹配正则表达式：
信息校验无误：
源代码如下：
1 <!DOCTYPE html> 2 <html lang="zh"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>用户注册</title> 6 <!--<link rel="stylesheet" type="text/css" href="style/index.css"/>--> 7 </head> 8 <style type="text/css"> 9 body { 10 margin-top: 20px; 11 } 12 13 .box { 14 font-size: 13px; 15 margin: 0 auto; 16 width: 80%; 17 } 18 19 .box-head { 20 width: 30%; 21 text-align: center; 22 padding: 15px 20px; 23 font-size: 24px; 24 } 25 26 .box-body { 27 padding: 10px 20px; 28 } 29 30 .box-body th { 31 font-weight: normal; 32 vertical-align: top; 33 padding-top: 12px; 34 } 35 36 .box-body tr:last-child { 37 text-align: center; 38 } 39 40 .box-body input, button { 41 vertical-align: middle; 42 font-family: Tahoma, simsun; 43 font-size: 12px; 44 } 45 46 .box-body input[type=radio] { 47 height: 38px; 48 } 49 50 .box-body input[type=text], 51 .box-body input[type=password] { 52 border-color: #bbb; 53 height: 38px; 54 font-size: 14px; 55 border-radius: 2px; 56 outline: 0; 57 border: #ccc 1px solid; 58 padding: 0 10px; 59 width: 350px; 60 -webkit-transition: box-shadow .5s; 61 margin-bottom: 15px; 62 } 63 64 .box-body input[type=text]:hover, 65 .box-body input[type=text]:focus, 66 .box-body input[type=password]:hover, 67 .box-body input[type=password]:focus { 68 border: 1px solid #56b4ef; 69 box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 0 8px rgba(82, 168, 236, .6); 70 -webkit-transition: box-shadow .5s; 71 } 72 73 .box-body input::-webkit-input-placeholder { 74 color: #999; 75 -webkit-transition: color .5s; 76 } 77 78 .box-body input:focus::-webkit-input-placeholder, 79 input:hover::-webkit-input-placeholder { 80 color: #c2c2c2; 81 -webkit-transition: color .5s; 82 } 83 84 .box-body button[type=submit] { 85 padding: 4px 15px; 86 cursor: pointer; 87 width: 120px; 88 height: 40px; 89 background: #4393C9; 90 border: 1px solid #fff; 91 color: #fff; 92 font: 16px bolder; 93 } 94 95 .box-body button[type=reset] { 96 margin-left: 30px; 97 cursor: pointer; 98 width: 120px; 99 height: 40px; 100 background: #4393C9; 101 border: 1px solid #fff; 102 color: #fff; 103 font: 16px bolder; 104 } 105 106 .box-body .error { 107 border: 1px solid #FF3300; 108 background: #FFF2E5; 109 font-size: 10px; 110 height: 30px; 111 line-height: 30px; 112 margin-bottom: 10px; 113 padding: 0 10px; 114 } 115 116 .box-body .success { 117 border: 1px solid #01BE00; 118 background: #E6FEE4; 119 font-size: 10px; 120 height: 30px; 121 line-height: 30px; 122 margin-bottom: 10px; 123 padding: 0 10px; 124 } 125 126 </style> 127 <body> 128 <!-- 129 1.设计一个用户注册页面，显示当前日期、时间和星期。注册内容包括用户名，密码及密码确认框，性别，邮箱，手机号码，一个提交按钮，一个重写按钮（清空所有文本框内容）。 130 131 提示： 132 A. 页面显示数据：document.write() 133 B. 当前日期、时间和星期：Date对象。 134 C. 获取表单中输入的数据：document.表单名.表单元素名.value 135 D. 密码及密码确认要求2次输入的内容相同，利用String对象的方法判断。 136 E. 文本框的内容及长度控制都利用String对象的方法。 137 F. 弹出新窗口window.open() 138 --> 139 <div class="box"> 140 <div class="box-head">填写注册信息</div> 141 <div class="box-body"> 142 <form id="registerForm" action="" method="post" onsubmit="return checkForm()"> 143 <table> 144 <tr> 145 <th>当前时间：</th> 146 <td><p id="currentDate"></p></td> 147 <td> 148 <div></div> 149 </td> 150 </tr> 151 <tr> 152 <th>用户名称：</th> 153 <td><input type="text" id="userName" name="userName" placeholder="长度2-12位以内的中英文字符和数字"></td> 154 <td> 155 <div></div> 156 </td> 157 </tr> 158 <tr> 159 <th>密 码：</th> 160 <td><input type="password" id="passWord" name="passWord" placeholder="长度4-12位任意字符"></td> 161 <td> 162 <div></div> 163 </td> 164 </tr> 165 <tr> 166 <th>确认密码：</th> 167 <td><input type="password" id="confirmPwd" name="confirmPwd" placeholder="请再次输入密码进行确认"></td> 168 <td> 169 <div></div> 170 </td> 171 </tr> 172 <tr> 173 <th>性 别：</th> 174 <td><input type="radio" id="sexMale" name="sex" value="1"/><label for="sexMale">男</label> 175 <input type="radio" id="sexFemale" name="sex" value="0"/><label for="sexFemale">女</label></td> 176 <td> 177 <div></div> 178 </td> 179 </tr> 180 <tr> 181 <th>手机号码：</th> 182 <td><input type="text" id="tel" name="tel" placeholder="13、14、15、17、18开头的11位手机号"></td> 183 <td> 184 <div></div> 185 </td> 186 </tr> 187 <tr> 188 <th>电子邮箱：</th> 189 <td><input type="text" id="email" name="email" placeholder="用户名@域名（域名后缀至少2个字符）"></td> 190 <td> 191 <div></div> 192 </td> 193 </tr> 194 </table> 195 <div style="margin-top: 20px;margin-left: 70px;"> 196 <button type="submit" id="submitFormBtn">注册</button> 197 <button type="reset">重置</button> 198 </div> 199 </form> 200 </div> 201 </div> 202 203 204 <script type="text/javascript"> 205 206 //获取当前客户端系统时间以上是关于JavaScript实现表单的校验以及匹配正则表达式的主要内容，如果未能解决你的问题，请参考以下文章
js截取相应的域名----正则匹配法 和校验Url 正则表达式