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，则为正常提交；

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

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

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

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

赞 (0)

相关推荐

  • jquery validate.js表单验证的基本用法入门

    这里转载一篇前辈写的文章,在我自己的理解上修改了一下,仅作记录. 先贴一个国内某大公司的代码: 复制代码 代码如下: <script type="text/javascript"> function lang(key) { mylang = { 'ls_input_myb': '请输入您的账户', 'ls_myb_email': '漫游币账户为邮箱地址', 'ls_login_password': '请输入您的登录密码', 'ls_password_length': '密码

  • JavaScript 表单验证正则表达式大全[推荐]

    具体和函数结合的使用方法,还请查看下篇文章 JavaScript 使用正则表达式进行表单验证的示例代码 复制代码 代码如下: 匹配中文字符的正则表达式: [u4e00-u9fa5] 评注:匹配中文还真是个头疼的事,有了这个表达式就好办了 匹配双字节字符(包括汉字在内):[^x00-xff] 评注:可以用来计算字符串的长度(一个双字节字符长度计2,ASCII字符计1) 匹配空白行的正则表达式:ns*r 评注:可以用来删除空白行 匹配HTML标记的正则表达式:< (S*?)[^>]*>.*?

  • js 常用正则表达式表单验证代码

    正则表达式使用详解 简介 简单的说,正则表达式是一种可以用于模式匹配和替换的强有力的工具.其作用如下:测试字符串的某个模式.例如,可以对一个输入字符串进行测试,看在该字符串是否存在一个电话号码模式或一个信用卡号码模式.这称为数据有效性验证.替换文本.可以在文档中使用一个正则表达式来标识特定文字,然后可以全部将其删除,或者替换为别的文字.根据模式匹配从字符串中提取一个子字符串.可以用来在文本或输入字段中查找特定文字. 基本语法 在对正则表达式的功能和作用有了初步的了解之后,我们就来具体看一下正则表

  • JavaScript表单验证完美代码

    JavaScript表单验证完美代码

    用原生JS写一个简单的表单验证 首先,是html部分 <div class="divAll"> <div id="titles">新用户注册</div> <div id="contents"> <h3>基本信息</h3> <hr width="95%" color="#f2f2f2"/> <form action=&q

  • js校验表单后提交表单的三种方法总结

    第一种: 复制代码 代码如下: <script type="text/javascript">         function check(form) { if(form.userId.value=='') {                alert("请输入用户帐号!");                form.userId.focus();                return false;           }       if(fo

  • AngularJS实现表单验证

    虽然我不是前端程序员,但明白前端做好验证是多么重要. 因为这样后端就可以多喘口气了,而且相比后端什么的果然还是前端可以提高用户的幸福感. AngularJS提供了很方便的表单验证功能,在此记录一番. 首先从下面这段代码开始 复制代码 代码如下: <form ng-app="myApp" ng-controller="validationController" name="mainForm" novalidate>     <p&

  • js验证表单大全

    不错的JS验证~~~~~~~~~~~~~~~~~~~~~~~~~ 用途:校验ip地址的格式 输入:strIP:ip地址 返回:如果通过验证返回true,否则返回false: */ function isIP(strIP) { if (isNull(strIP)) return false; var re=/^(\d+)\.(\d+)\.(\d+)\.(\d+)$/g //匹配IP地址的正则表达式 if(re.test(strIP)) { if( RegExp.$1 <256 && R

  • 利用JS提交表单的几种方法和验证(必看篇)

    工作中发现表单提交方便的问题,很多时候IE下提交好好的,打了火狐下就出现了问题,利用提交按钮就不成功了,于是利用JS的方式就成功了,也不知道为什么.在导师的催促下就总结出以下的几种常用表单提交的方法. 第一种方式:表单提交,在form标签中增加onsubmit事件来判断表单提交是否成功 <script type="text/javascript"> function validate(obj) { if (confirm("提交表单?")) { aler

  • javascript制作的简单注册模块表单验证

    javascript制作的简单注册模块表单验证

    一个注册框  进行表单验证处理 如图 有简单的验证提示功能 代码思路也比较简单 输入框失去焦点时便检测,并进行处理 表单具有 onsubmit = "return check()"行为,处理验证情况 点击提交表单按钮时,进行最终的验证,达到是否通过表单提交的请求. 先是最基本的html+css部分 <style type="text/css"> body{margin:0;padding: 0;} .login{position:relative;mar

  • js正则表达式注册页面表单验证

    js正则表达式注册页面表单验证

    正则表达式方式的验证方式,这个验证比较标准而且比较全面,不过也是通过点击提交按钮才进行验证,本实例可以这样验证,具体内容如下 也可以这样验证 具体代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>表单验证类Validator v1</title> <style&g

随机推荐