这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 js 进行表单验证的方法, 实例分析了各种常见的 js 表单验证技巧, 需要的朋友可以参考下
本文实例讲述了 js 进行表单验证的方法。分享给大家供大家参考。具体实现方法如下:
1. 传统的表单验证代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 表单验证
- </title>
- <script type="text/javascript">
- function $(id) {
- return document.getElementById(id);
- }
- function check() {
- var email = $("email").value;
- var password = $("password").value;
- var repassword = $("repassword").value;
- var name = $("name").value;
- if (email == "") {
- alert("Email值不能为空");
- $("email").focus();
- return false;
- }
- if (email.indexOf("@") == -1 || email.indexOf(".") == -1) {
- alert("邮箱格式不正确,必须包含@和.");
- $("email").focus();
- return false;
- }
- if (password == "") {
- alert("密码不能为空");
- $("password").focus();
- return false;
- }
- if (password.length < 6) {
- alert("密码长度必须大于或者等于6");
- $("password").focus();
- return false;
- }
- if (repassword != password) {
- alert("两次输入的密码不一致");
- $("repassword").focus();
- return false;
- }
- if (name == "") {
- alert("姓名不能为空");
- $("name").focus();
- return false;
- }
- for (var i = 0; i < name.length; i++) {
- var j = name.subString(i, i + 1);
- if (isNaN(j) == false) {
- alert('姓名中不能包含数字');
- $("name").focus();
- return false;
- }
- }
- }
- </script>
- </head>
- <body>
- <form name="login_form" method="post" onsubmit="return check()">
- <div>
- Email:
- <input type="text" name="email" id="email" />
- </div>
- <div>
- 密码:
- <input type="password" name="password" id="password" />
- </div>
- <div>
- 重输密码:
- <input type="password" name="repassword" id="repassword" />
- </div>
- <div>
- 姓名:
- <input type="text" name="name" id="name" />
- </div>
- <div>
- <input type="submit" value="注册" />
- </div>
- </form>
- </body>
- </html>
2. 输入框后面有提示信息的表单验证
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 表单验证
- </title>
- <script type="text/javascript">
- function $(id) {
- return document.getElementById(id);
- }
- function check() {
- var email = $("email").value;
- var password = $("password").value;
- var repassword = $("repassword").value;
- var name = $("name").value;
- $("emailinfo").innerHTML = "";
- $("passwordinfo").innerHTML = "";
- $("repasswordinfo").innerHTML = "";
- $("nameinfo").innerHTML = "";
- if (email == "") {
- $("emailinfo").innerHTML = "Email值不能为空";
- $("email").focus();
- return false;
- }
- if (email.indexOf("@") == -1 || email.indexOf(".") == -1) {
- $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和.";
- $("email").focus();
- return false;
- }
- if (password == "") {
- $("passwordinfo").innerHTML = "密码不能为空";
- $("password").focus();
- return false;
- }
- if (password.length < 6) {
- $("passwordinfo").innerHTML = "密码长度必须大于或者等于6";
- $("password").focus();
- return false;
- }
- if (repassword != password) {
- $("repasswordinfo").innerHTML = "两次输入的密码不一致";
- $("repassword").focus();
- return false;
- }
- if (name == "") {
- $("nameinfo").innerHTML = "姓名不能为空";
- $("name").focus();
- return false;
- }
- for (var i = 0; i < name.length; i++) {
- var j = name.subString(i, i + 1);
- if (isNaN(j) == false) {
- $("nameinfo").innerHTML = '姓名中不能包含数字';
- $("name").focus();
- return false;
- }
- }
- }
- </script>
- </head>
- <body>
- <form name="login_form" method="post" onsubmit="return check()">
- <div>
- Email:
- <input type="text" name="email" id="email" />
- <span id="emailinfo">
- </span>
- </div>
- <div>
- 密码:
- <input type="password" name="password" id="password" />
- <span id="passwordinfo">
- </span>
- </div>
- <div>
- 重输密码:
- <input type="password" name="repassword" id="repassword" />
- <span id="repasswordinfo">
- </span>
- </div>
- <div>
- 姓名:
- <input type="text" name="name" id="name" />
- <span id="nameinfo">
- </span>
- </div>
- <div>
- <input type="submit" value="注册" />
- </div>
- </form>
- </body>
- </html>
效果图如下所示:
3. 在输入框失去焦点时触发校验函数
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>
- 表单验证
- </title>
- <script type="text/javascript">
- function $(id) {
- return document.getElementById(id);
- }
- function check() {
- var email = $("email").value;
- var password = $("password").value;
- var repassword = $("repassword").value;
- var name = $("name").value;
- $("emailinfo").innerHTML = "";
- $("passwordinfo").innerHTML = "";
- $("repasswordinfo").innerHTML = "";
- $("nameinfo").innerHTML = "";
- if (email == "") {
- $("emailinfo").innerHTML = "Email值不能为空";
- return false;
- }
- if (email.indexOf("@") == -1 || email.indexOf(".") == -1) {
- $("emailinfo").innerHTML = "邮箱格式不正确,必须包含@和.";
- return false;
- }
- if (password == "") {
- $("passwordinfo").innerHTML = "密码不能为空";
- return false;
- }
- if (password.length < 6) {
- $("passwordinfo").innerHTML = "密码长度必须大于或者等于6";
- return false;
- }
- if (repassword != password) {
- $("repasswordinfo").innerHTML = "两次输入的密码不一致";
- return false;
- }
- if (name == "") {
- $("nameinfo").innerHTML = "姓名不能为空";
- return false;
- }
- for (var i = 0; i < name.length; i++) {
- var j = name.subString(i, i + 1);
- if (isNaN(j) == false) {
- $("nameinfo").innerHTML = '姓名中不能包含数字';
- return false;
- }
- }
- }
- function checkEmail() { //校验Email
- $('emailinfo').innerHTML = "";
- var email = $('email').value;
- if (email == "") {
- $('emailinfo').innerHTML = "Email值不能为空";
- return false;
- }
- if (email.indexOf('@') == -1 || email.indexOf('.') == -1) {
- $('emailinfo').innerHTML = "Email必须包含@和.";
- return false;
- }
- }
- function checkPassword() { //校验密码
- $('passwordinfo').innerHTML = "";
- var password = $('password').value;
- if (password == "") {
- $("passwordinfo").innerHTML = "密码不能为空";
- return false;
- }
- if (password.length < 6) {
- $("passwordinfo").innerHTML = "密码长度必须大于或者等于6";
- return false;
- }
- }
- function checkRepassword() { //校验重新输入的密码
- $('repassword').innerHTML = "";
- var repassword = $('repassword').value;
- if (repassword != password) {
- $("repasswordinfo").innerHTML = "两次输入的密码不一致";
- return false;
- }
- }
- function checkName() { //校验姓名
- $('nameinfo').innerHTML = "";
- var name = $('name').value;
- if (name == "") {
- $("nameinfo").innerHTML = "姓名不能为空";
- return false;
- }
- for (var i = 0; i < name.length; i++) {
- var j = name.subString(i, i + 1);
- if (isNaN(j) == false) {
- $("nameinfo").innerHTML = '姓名中不能包含数字';
- return false;
- }
- }
- }
- </script>
- </head>
- <body>
- <form name="login_form" method="post" onsubmit="return check()">
- <div>
- Email:
- <input type="text" name="email" id="email" onblur="checkEmail();" />
- <span id="emailinfo">
- </span>
- </div>
- <div>
- 密码:
- <input type="password" name="password" id="password" onblur="checkPassword();"
- />
- <span id="passwordinfo">
- </span>
- </div>
- <div>
- 重输密码:
- <input type="password" name="repassword" id="repassword" onblur="checkRepassword();"
- />
- <span id="repasswordinfo">
- </span>
- </div>
- <div>
- 姓名:
- <input type="text" name="name" id="name" onblur="checkName();" />
- <span id="nameinfo">
- </span>
- </div>
- <div>
- <input type="submit" value="注册" />
- </div>
- </form>
- </body>
- </html>
效果图如下所示:
希望本文所述对大家的 javascript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0630/272824.html