Javascript实现表单检验

正如我们所见到的,好多网页都有注册界面,在注册界面中,最常见的即是包括用户名、密码、请重复输入密码和一个“注册”按钮,今天我们就举例实现一下该界面。

要求:

1.用户名不为空,且用户名不能超过12个字符;
2.密码不为空,且密码不能超过15个字符;
3.密码和重复输入的密码必须一致;
4.如果发生错误,显示错误并聚焦到错误位置;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>注册</title>
        <script>
            function $(id){
                return document.getElementById(id);
            }
            function test(){
                var user_name = $("user_name").value;
                var password = $("password").value;
                var re_password = $("re_password").value;
                if(user_name.length==0){
                    $("msg").innerHTML = "用户名不能为空!";
                    $("user_name").focus();
                    return false;
                }
                if(user_name.length>12){
                    $("msg").innerHTML = "用户名不能超过12个字符!";
                    $("user_name").focus();
                    return false;
                }

                if(password.length==0){
                    $("msg").innerHTML = "密码不能为空!";
                    $("password").focus();
                    return false;
                }
                if(password.length>15){
                    $("msg").innerHTML = "密码不能超过15个字符!";
                    $("password").focus();
                    return false;
                }

                if(password!=re_password ){
                    $("msg").innerHTML="错误!密码不一致!";
                    $("re_password").focus();
                    return false;
                }
                console.log("注册成功!");
                return true;
            }
        </script>
    </head>
    <body>
        <br />
        <span id="msg" style="color: red;"></span>
        <form onsubmit="return test()">
            <input placeholder="请输入用户名" id="user_name" /><br />
            <input placeholder="请输入密码" type="password" id="password"/><br />
            <input placeholder="请再次输入密码" type="password" id="re_password"/><br />
            <input type="submit"  value="注册" />
        </form>
    </body>
</html>

注:方法不唯一,此方法仅作参考。

下面对该代码中的一些点进行讲解:

1. (id)的作用类似于C语言中的define,将所使用的功能或语句定义为一个符号或字符串,极大程度的简化代码,你也可以不使用该方法,用document.getElementById()还原(id)的作用类似于C语言中的define,将所使用的功能或语句定义为一个符号或字符串,极大程度的简化代码,你也可以不使用该方法,用document.getElementById()还原();
2. 定义的对象必须加.value使其为获取的输入的值,而下面聚焦时,需要改用focus;
3. 在每个if语句中,最好再加一个返回值,提高代码的运行效果,innerHTML的作用是在浏览器页面中显示;
4. 在整个函数test()的最后,若return false,则为取消提交,若return true,则为正常提交;

大家可以自己尝试一下,部分页面如下:
直接运行代码如图:

不输入任何值,直接点击注册,效果如图:

全部按要求输入后,会返回最初的样子,是因为没有指定成功输入后跳转的界面,自己设置即可。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

您可能感兴趣的文章:

  • jquery validate.js表单验证的基本用法入门
  • js验证表单大全
  • js 常用正则表达式表单验证代码
  • js校验表单后提交表单的三种方法总结
  • 利用JS提交表单的几种方法和验证(必看篇)
  • JavaScript表单验证完美代码
  • JavaScript 表单验证正则表达式大全[推荐]
  • AngularJS实现表单验证
  • javascript制作的简单注册模块表单验证
  • js正则表达式注册页面表单验证
张贴在2