jQuery注册表单验证代码实例

日期: 2022-12-08 13:46:12 分类: 前端浏览量：留言数： 98657

本章节分享一段代码实例，它实现了简单的表单验证小姑。

在文本框或者密码框的尾部会有提示文本的出现。

代码实例如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<style>
body {
  position: absolute;
  top: 25%;
  left: 33%;
}
table {
  color: #666;
}
table tr {
  height: 50px;
}
.state1 {
  color: #aaa;
}
.state2 {
  color: #00b0ff;
}
.state3 {
  color: #EB4F38;
}
.state4 {
  color: #00B694;
}
input[type="submit"] {
  width: 80px;
  height: 30px;
  font-weight: bold;
  border-radius: 15px;
  background-color: #3CbAB7;
  color: #fff;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script>
$(function () {
  var username = false;
  var password = false;
  var repassword = false;
  var email = false;
  //username
  $('input[name="username"]').focus(function () {
    $(this).parent()
           .siblings()
           .find('span')
           .text('用户名应该在6-20位之间!')
           .removeClass('state1 state4 state3').addClass('state2');
  }).blur(function () {
    var len = $(this).val().length;
    if (len >= 6 && len <= 20 && $(this).val() != '') {
      $(this).parent()
             .siblings()
             .find('span')
             .text('用户名输入正确!')
             .removeClass('state1 state4 state3').addClass('state4');
      username = true;
    } else {
      $(this).parent()
             .siblings()
             .find('span')
             .text('用户名输入错误,应在6-20位之间!')
             .removeClass('state1 state2 state4')
             .addClass('state3');
    }
  })
 
  //password
  $('input[name="password"]').focus(function () {
    $(this).parent()
           .siblings()
           .find('span')
           .text('密码6-20位字符,字母开头,只包含字母数字下划线!')
           .removeClass()
           .addClass('state2');
  }).blur(function () {
    var reg = /^[a-z | A-Z]\w{5,19}$/;
    if (reg.test($(this).val())) {
      $(this).parent()
             .siblings()
             .find('span')
             .text('密码输入正确!')
             .removeClass()
             .addClass('state4');
      password = true;
    }
    else {
      $(this).parent()
             .siblings()
             .find('span')
             .text('密码输入错误,请重新输入!')
             .removeClass()
             .addClass('state3');
    }
  })
 
  //repassword
  $('input[name="repassword"]').focus(function () {
    $(this).parent()
           .siblings()
           .find('span')
           .text('请输入确认密码!')
           .removeClass()
           .addClass('state2');
  }).blur(function () {
    var reg = /^[a-z | A-Z]\w{5,19}$/;
    if (reg.test($(this).val()) && $(this).val() == $('input[name="password"]').val()) {
      $(this).parent()
             .siblings()
             .find('span')
             .text('确认密码输入正确!')
             .removeClass()
             .addClass('state4');
      repassword = true;
    } else {
      $(this).parent()
             .siblings()
             .find('span')
             .text('两次输入不一致!')
             .removeClass()
             .addClass('state3');
    }
  })
  //email
  $('input[name="email"]').focus(function () {
    $(this).parent()
           .siblings()
           .find('span')
           .text('请输入正确的EMAIL格式!')
           .removeClass()
           .addClass('state2');
  }).blur(function () {
    var reg = /^(\w)+(\.\w+)*@(\w)+((\.\w{2,3}){1,3})$/;
    if (reg.test($(this).val())) {
      $(this).parent()
             .siblings()
             .find('span')
             .text('邮箱输入正确!')
             .removeClass()
             .addClass('state4');
      email = true;
    } else {
      $(this).parent()
             .siblings()
             .find('span')
             .text('邮箱输入错误，请输入重新输入!')
             .removeClass()
             .addClass('state3');
    }
  })
 
  //提交
  $('input[type="submit"]').click(function () {
    if (username && password && repassword && email) {
      $('form').submit();
    } else {
      return alert('您未填写齐全，或填写格式错误!');
    }
  });
})
</script>
</head>
<body>
  <form>
    <table>
      <tr>
        <td>用 户 名：</td>
        <td><input type="text" name="username" /></td>
        <td><span class="state1">请输入用户名</span></td>
      </tr>
      <tr>
        <td>密  码：</td>
        <td><input type="password" name="password" /></td>
        <td><span class="state1">请输入密码</span></td>
      </tr>
      <tr>
        <td>确认密码：</td>
        <td><input type="password" name="repassword" /></td>
        <td><span class="state1">请输入确认密码</span></td>
      </tr>
      <tr>
        <td>邮  箱：</td>
        <td><input type="email" name="email" /></td>
        <td><span class="state1">请输入邮箱</span></td>
      </tr>
      <tr>
        <td></td>
        <td><input type="submit" value="提  交" /></td>
        <td></td>
      </tr>
    </table>
  </form>
</body>
</html>

jQuery注册表单验证代码实例，这样的场景在实际项目中还是用的比较多的，关于jQuery注册表单验证代码实例就介绍到这了。

jQuery注册表单验证代码实例属于前端实例代码，有关更多实例代码大家可以查看。