首页-教程-Web前端

介绍JavaScript正则实现表达式以字母开头

 4021

表单校验:创建表单,使用JavaScript+dom为表单添加校验.

要求：

验证用户名称，必须以字母开头，长度2-6位之间；

验证密码不能为空；

确认密码不能为空，要与密码一致；


6033487192b73.png

6033488dd6598.png


  1. <!DOCTYPE html>
  2. <html>
  3. <!-- 表单校验:创建表单,使用JavaScript为表单添加校验.
  4.     1.验证用户名称,必须以字母开头,长度2-6位之间.
  5.     2.验证密码不能为空.
  6.     3.确认密码不能为空,要与密码一致. 
  7. -->
  8. <head>
  9.     <meta charset="UTF-8">
  10.     <title>Document</title>
  11.     <script type="text/javascript">
  12.     function checkForm() {
  13.         //获得用户名对象
  14.         var username = document.getElementById("username");
  15.         
  16.         //---获得用户名输入框中的value值
  17.         var usernamevalue = username.value;
  18.         var Reg = /^[a-zA-Z][-_a-zA-Z0-9]{1,5}/; // JavaScript中的正则与Java的正则略有不同
  19.         if (usernamevalue.length >= 2 && usernamevalue.length <= 6 && Reg.test(usernamevalue)) {
  20.             //为span设置提示语
  21.             document.getElementById("usernameSpan").innerHTML = "<font color='green'> 用户名可用<font>";
  22.         } else {
  23.             document.getElementById("usernameSpan").innerHTML = "<font color='red'> 用户名必须以字母开头且长度在2-6之间<font>";
  24.         }
  25.         
  26.         //获得密码value
  27.         var password = document.getElementById("password").value;
  28.         if (password == "") {
  29.             document.getElementById("passwordSpan").innerHTML = "<font color='red'>密码不能为空</font>";
  30.         } else {
  31.             document.getElementById("passwordSpan").innerHTML = "<font color='green'>密码可用</font>";
  32.         }
  33.         
  34.         //获得确认密码
  35.         var repassword = document.getElementById("repassword").value; 
  36.         if (repassword == password) {
  37.             document.getElementById("repasswordSpan").innerHTML = "<font color='green'>输入一致</font>";
  38.         } else {
  39.             document.getElementById("repasswordSpan").innerHTML = "<font color='red'>两次输入密码不一致</font>";
  40.         }
  41.     }
  42.     </script>
  43. </head>
  44. <body>
  45.     <h2>新用户注册</h2>
  46.     <p style="border: 1px solid sandybrown; width: 300px; height: 260px;">
  47.         <form action="">
  48.             <table cellspacing="15">
  49.                 <tr>
  50.                     <td>用户名称:</td>
  51.                     <td>
  52.                         <input type="text" id="username">
  53.                         <span id="usernameSpan"></span>
  54.                     </td>
  55.                 </tr>
  56.                 <tr>
  57.                     <td>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp码:</td>
  58.                     <td>
  59.                         <input type="password" id="password">
  60.                         <span id="passwordSpan"></span>
  61.                     </td>
  62.                 </tr>
  63.                 <tr>
  64.                     <td>确认密码:</td>
  65.                     <td>
  66.                         <input type="password" id="repassword">
  67.                         <span id="repasswordSpan"></span>
  68.                     </td>
  69.                 </tr>
  70.             </table>
  71.         </form>
  72.     </p>
  73.     <input type="button" value="确认注册" onclick="checkForm()" />
  74. </body>
  75. </html>



TAG标签：
本文网址：https://www.zztuku.com/index.php/detail-8670.html
站长图库 - 介绍JavaScript正则实现表达式以字母开头
申明：如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐