这里是简单的前端校验，后边还会介绍后台的校验。

多重校验保证获取安全数据

步骤：

1.确定事件onsubmit，并绑定函数

2.编写函数，作用是获取输入数据

3.判断数据是否合法，合法则提交，否则表单不提交

HTML代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <table>

            <!--3.注册表单-->

            <tr>

                <!--嵌套一个十行二列的表格-->

                <form action="#" method="get" name="regForm" onsubmit="return checkForm()">

                    <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">

                        <tr height="40px">

                            <td colspan="2">

                                <font size="4">会员注册</font> &nbsp;&nbsp;&nbsp;USER REGISTER

                            </td>

                        </tr>

                        <tr>

                            <td>

                                用户名

                            </td>

                            <td>

                                <input type="text" name="user" size="34px" id="user" />

                            </td>

                        </tr>

                        <tr>

                            <td>

                                密码

                            </td>

                            <td>

                                <input type="password" name="password" size="34px" id="password" />

                            </td>

                        </tr>

                        <tr>

                            <td>

                                确认密码

                            </td>

                            <td>

                                <input type="password" name="repassword" size="34px" id="repassword"></input>

                            </td>

                        </tr>

                        <tr>

                            <td>

                                Emaile

                            </td>

                            <td>

                                <input type="text" name="email" size="34px" id="eamil" />

                            </td>

                        </tr>

                        <tr>

                            <td>

                                姓名

                            </td>

                            <td>

                                <input type="text" name="username" size="34px" />

                            </td>

                        </tr>

                        <tr>

                            <td>

                                性别

                            </td>

                            <td>

                                <input type="radio" name="sex" value="男" />男

                                <input type="radio" name="sex" value="女" />女

                            </td>

                        </tr>

                        <tr>

                            <td>

                                出生日期

                            </td>

                            <td>

                                <input type="text" name="birthday" size="34px" />

                            </td>

                        </tr>

                        <tr>

                            <td>

                                验证码

                            </td>

                            <td>

                                <input type="text" name="yzm" />

                            </td>

                        </tr>

                        <tr>

                            <td colspan="2">

                                <input type="submit" value="注册" />

                            </td>

                        </tr>

                    </table>

                </form>

                </td>

            </tr>

        </table>

    </body>

</html>

效果：

JS代码：

<script>

            function checkForm() {

                /**校验用户名*/

                //1.获取用户输入的数据

                var uValue = document.getElementById("user").value;

                //alert(uValue);

                if(uValue == "") {

                    //2.给出错误提示信息

                    alert("用户名不能为空!");

                    return false;

                }

                /*校验密码*/

                var pValue = document.getElementById("password").value;

                if(pValue == "") {

                    alert("密码不能为空!");

                    return false;

                }

                /**校验确认密码*/

                var rpValue = document.getElementById("repassword").value;

                if(rpValue != pValue) {

                    alert("两次密码输入不一致!");

                    return false;

                }

                /*校验邮箱*/

                var eValue = document.getElementById("eamil").value;

                if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)) {

                    alert("邮箱格式不正确!");

                    return false;

                }

            }

        </script>

然而这种方式很low，用户希望的是验证信息出现在输入框的后边，并且随着输入而随时验证

这里会用到onfocus、onblur事件

HTML代码：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <script>

            function showTips(id, info) {

                document.getElementById(id + "span").innerHTML = "<font color='gray'>" + info + "</font>";

            }

            function check(id, info) {

                //1.获取用户输入的用户名数据

                var uValue = document.getElementById(id).value;

                //2.进行校验

                if(uValue == "") {

                    document.getElementById(id + "span").innerHTML = "<font color='red'>" + info + "</font>";

                } else {

                    document.getElementById(id + "span").innerHTML = "";

                }

            }

        </script>

    </head>

    <body>

        <form action="#" method="get" name="regForm" onsubmit="return checkForm()">

            <table border="1px" width="750px" height="400px" align="center" cellpadding="0px" cellspacing="0px" bgcolor="white">

                <tr height="40px">

                    <td colspan="2">

                        <font size="4">会员注册</font> &nbsp;&nbsp;&nbsp;USER REGISTER

                    </td>

                </tr>

                <tr>

                    <td>

                        用户名

                    </td>

                    <td>

                        <input type="text" name="user" size="34px" id="user" onfocus="showTips('user','用户名必填！')" onblur="check('user','用户名不能为空！')" /><span id="userspan"></span>

                    </td>

                </tr>

                <tr>

                    <td>

                        密码

                    </td>

                    <td>

                        <input type="password" name="password" size="34px" id="password" onfocus="showTips('password','密码必填')" onblur="check('password','密码不能为空!')" /><span id="passwordspan"></span>

                    </td>

                </tr>

                <tr>

                    <td>

                        确认密码

                    </td>

                    <td>

                        <input type="password" name="repassword" size="34px" id="repassword"></input>

                    </td>

                </tr>

                <tr>

                    <td>

                        Emaile

                    </td>

                    <td>

                        <input type="text" name="email" size="34px" id="eamil" />

                    </td>

                </tr>

                <tr>

                    <td>

                        姓名

                    </td>

                    <td>

                        <input type="text" name="username" size="34px" />

                    </td>

                </tr>

                <tr>

                    <td>

                        性别

                    </td>

                    <td>

                        <input type="radio" name="sex" value="男" />男

                        <input type="radio" name="sex" value="女" />女

                    </td>

                </tr>

                <tr>

                    <td>

                        出生日期

                    </td>

                    <td>

                        <input type="text" name="birthday" size="34px" />

                    </td>

                </tr>

                <tr>

                    <td>

                        验证码

                    </td>

                    <td>

                        <input type="text" name="yzm" />

                    </td>

                </tr>

                <tr>

                    <td colspan="2">

                        <input type="submit" value="注册" />

                    </td>

                </tr>

            </table>

        </form>

    </body>

</html>

效果：

JS应用实例1：注册页面表单校验的更多相关文章

  1. JavaScript学习——使用JS完成注册页面表单校验

    1.步骤分析 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id>) 第三步:对用户输入的数据进行判断 ...

  2. 【JavaScript】案例一：使用JS完成注册页面表单校验——事件(onsubmit&onfocus&onblur)

    (一)初版:事件(onsubmit) 步骤分析: 第一步:确定事件(onsubmit)并为其绑定一个函数 第二步:书写这个函数(获取用户输入的数据<获取数据时需要在指定位置定义一个 id> ...

  3. JavaScript学习——完善注册页面表单校验

    1.之前我们已经使用弹出框的方式实现了表单校验的功能,但是此种方式用户体验效果很差 我们希望做成把提示信息和校验结果放在输入栏的后面. 2.步骤分析 (此案例基于HTML&CSS——网站注册页 ...

  4. 分享一篇最近新写的jquery注册页面表单校验的程序，仅供参考

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

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

    可以这样校验 <html> <head> <meta http-equiv="Content-Type" content="text/htm ...

  6. angularjs+ionic注册页面表单验证（手机号、确认密码、60s后重发验证码）

    在已建立tabs和路由的注册页面html: 功能: 进行了手机号.密码格式验证,两次密码输入是否相同的判断,都正确且复选框勾选后才可点击注册,进入tabs.mypage页面. 未进行验证码真正发送.获 ...

  7. JQuery注册页面表单检验完善

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 使用JQuery.Validate插件来校验页面表单有效性

    使用JQuery.Validate插件来校验页面表单有效性​1. [代码] 常见的注册表单元素 <form action="#" method="post" ...

  9. SpringMVC接收页面表单参数-java-电脑编程网

    body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...

随机推荐

  1. docker报错

    用docker搭建环境时可能会遇到错误:No releases available for package "xxxx" No releases available for pac ...

  2. Zabbix Agent 源码编译安装

    简介: 单独整理一下 Zabbix Agent . 1.安装包选择 下载地址:http://www.zabbix.com/download.php 这里有两种源码包,一种是安装 Zabbix Serv ...

  3. Linux下修改Tomcat默认端口

    假设tomcat所在目录为/usr/local/apache-tomcat/ 1.打开tomcat配置文件#vi /usr/local/apache-tomcat/conf/server.xml 2. ...

  4. elasticsearch5安装

    环境: centos7 es 5.4.3 es安装 一.下载 wget https://artifacts.elastic.co/downloads/elasticsearch/elasticsear ...

  5. vw, vh视区覆盖和自适应图片

      CSS .wrap{width:100vw;height:100vh;background: rgba(0,0,0,0.3);position: fixed;top:0;left:0;text-a ...

  6. reentrantlocklock实现有界队列

    今天找synchronize和reentrantlock区别的时候,发现有个使用reentrantlock中的condition实现有界队列,感觉挺有趣的,自己顺手敲了一遍 class Queue{ ...

  7. ES6 proxy(代理拦截) &&Reflect

  8. Django自动获取项目中的全部URL

    import re from collections import OrderedDict from django.conf import settings from django.utils.mod ...

  9. Solidity的三种合约间的调用方式 call、delegatecall 和 callcode

    0x00 前言 Solidity(http://solidity.readthedocs.io/en/v0.4.24/) 是一种用与编写以太坊智能合约的高级语言,语法类似于 JavaScript. S ...

  10. android app主程序启动前加载图片

    android app加载启动图片需要新创建一个activity,在主activity先加载图片activity,展示过程结束后,显示主activity.具体流程如下: 一.创建图片activity的 ...