AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

JavaScript---网络编程(12)--DHTML技术演示(5)-form表单验证技术(正则)

2016-06-25 1158
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 这里不进行很复杂的后台验证以及JavaScript的正则表达式，只是简单的介绍下这个技术，简单的后台接收与跳转，大概了解怎么验证的就可以。具体的技术，我后面还会继续写博客的。本人也还在学习中。

这里不进行很复杂的后台验证以及JavaScript的正则表达式，只是简单的介绍下这个技术，简单的后台接收与跳转，大概了解怎么验证的就可以。具体的技术，我后面还会继续写博客的。本人也还在学习中。

表单验证1-简单验证

进行简单的验证，用户名必须为abcd，密码长度必须大于等于6
然后根据用户输入的数据，在后面给出提示。

代码演示：

<html>
    <head>
        <title>DHTML技术演示---表单验证</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
        <script>
            function checkUserName(){
                //alert("aa");//测试这个失去焦点监听是否管用
                var oUserNameNode = document.getElementsByName("userName")[0];
                var name = oUserNameNode.value;//这个type="text"的value的值是方框内的字符
                //以后有后台时，“abcd”这个数据应该通过ajax技术向后台要
                //这里我们只是做简单的演示-就是填写的name必须是abcd
                if(name=="abcd"){
                    document.getElementById("userNameSpan").innerHTML="用户名正确".fontcolor("green");
                }else{
                    document.getElementById("userNameSpan").innerHTML="用户名错误".fontcolor("red");
                }
            }

            function checkPwd(){
                var oUserPwdNode = document.getElementById("pwd")[0];
                var pwd=oUserPwdNode.value;

                if(pwd.length>=6){
                    document.getElementById("userPwdSpan").innerHTML="密码格式符合要求".fontcolor("green");
                }else{
                    document.getElementById("userPwdSpan").innerHTML="密码长度必须大于等于6".fontcolor("red");                    
                }
            }

        </script>

    </head>

    <body>
        <form>
            <!--onblur 在对象失去输入焦点时触发。 -->
            用户名:<input type="text" name="userName" onblur="checkUserName()" />
            <span id="userNameSpan"></span>
            <br/>
            <br/>
            <!--为了演示清楚，密码这里也用type="text"了，其实应该用type="password"的-->
            密码:<input type="text" name="pwd" onblur="checkPwd()" />
            <span id="userPwdSpan"></span>          
        </form>

    </body>

</html>

360浏览器8.1 演示结果：

用户名不符合规则：

密码不符合规则：

注册表单的验证2-正则表达式

代码演示：

<html>
    <head>
        <title>DHTML技术演示---注册表单的验证--js中使用正则表达式</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function checkUserName(){
                var oUserNameNode = document.getElementsByName("userName")[0];
                var userName = oUserNameNode.value;
                //用正则检验
                var reg = new RegExp("[a-z]{4}", "i");//包含4个连续的字母就可以，注意"i"的双引号不能省略
                //i---表示忽略大小写
                //var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略
                //^代表开始   $代表结束

                var oUserNameSpan = document.getElementById("userNameSpan");
                //alert(reg.test(userName));

                if (reg.test(userName)) {
                    oUserNameSpan.innerHTML = "用户名格式正确".fontcolor("green");
                }
                else {
                    oUserNameSpan.innerHTML = "用户名格式错误".fontcolor("red");
                }
            }
        </script>
    </head>

    <body>
        <!-- 演示JS中正则表达式的用法 -->
        <script type="text/javascript">
            //var reg = /^[0-9]{6}$/ ; //法一
            var reg = new RegExp("^[0-9]{6}$");//法二
            var str = "123456";
            var bRes = reg.test(str);
            //111使用正则表达式对象中的方法进行验证---只能用于判断是否匹配，功能类似于Java中的String类中的matches()方法
            //alert(bRes);//true

            //222使用String对象中的方法进行正则检验---功能更强大，类似于Java当中的Matcher工具
            var res = str.match(reg);//匹配的结果保存在res(是一个数组)中，如果没有匹配到则res为null。
            //alert(res);//123456
            //match方法返回的数组有三个属性：input、index和lastIndex。

            //一点细节---使用new RegExp()方式时，特殊字符要转义
            //var reg2 =/^\d{6}$/;  //"\"不需要转义
            var reg2= new RegExp("^\d{6}$");//※※※注意"\"要转义
            //▲▲▲上面那句是错误的，必须要写成：new RegExp("^\\d{6}$")
            //alert( reg2.test("123456") );
        </script>


        <form>
            <!--onblur 在对象失去输入焦点时触发。 -->
            用户名:<input type="text" name="userName" onblur="checkUserName()" />
            <span id="userNameSpan"></span>
        </form>

    </body>
</html>

360浏览器8.1 演示结果：

只需要包含连续4个字母就可以了。

注册表单的验证且控制提交–前端校验:

代码文件创建位置：

代码演示：

3form3.html

<html>
    <head>
        <title>DHTML技术演示---注册表单的验证且控制提交--前端校验</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function checkUserName(){
                var oUserNameNode = document.getElementsByName("userName")[0];
                var userName = oUserNameNode.value;
                //用正则检验
                var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母就可以，注意"i"的双引号不能省略
                //i---表示忽略大小写
                //var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略
                //^代表开始   $代表结束

                var oUserNameSpan = document.getElementById("userNameSpan");
                if(reg.test(userName)){
                    oUserNameSpan.innerHTML="用户名格式正确".fontcolor("green");
                    return true;
                }else{
                    oUserNameSpan.innerHTML="用户名格式错误".fontcolor("red");
                    return false;                   
                }
            }

            function checkPwd(){
                var oUserPwdNode = document.getElementsByName("pwd")[0];
                var pwd = oUserPwdNode.value;
                var reg2 = new RegExp("^[\\w\\d]{6,9}$");
                if(reg2.test(pwd)){
                    document.getElementById("userPwdSpan").innerHTML="密码格式符合要求".fontcolor("green");
                    return true;
                }else{
                    document.getElementById("userPwdSpan").innerHTML="密码长度必须是6-9位的数字字母或下划线".fontcolor("red");
                    return false;

                }
            }

            function checkUser(){
                if(checkUserName() && checkPwd() ){//如果还有其他项需要在提交前验证，直接把那个验证函数写这里就行
                    return true;
                }else{
                    return false;
                }

            }

        </script>

    </head>


    <body>
        <!--通过注册onsubmit事件响应来控制表单的提交，如果return false则不会提交，而return true则会提交。如果不注册onsubmit事件即是return true
        onsubmit 当表单将要被提交时触发。 
        <form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return true;">
        -->
        <form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();">
            用户名：<input type="text" name="userName" onblur="checkUserName()" />
            <span id="userNameSpan"></span>
            <!--为了演示清楚，密码这里也用type="text"了，其实应该用type="password"的-->
            密码：<input type="text" name="pwd" onblur="checkPwd()" />
            <span id="userPwdSpan"></span>
            <br/>
            <input type="submit" value="注册"/>
        </form>
        <hr/>

        <!--表单提交方式2---自己写个按钮来代替form自带的提交按钮-->
        <form id="userinfo" action="/dhtmlProj/servlet/RegServlet" >
            用户名:<input type="text" name="userName" onBlur="checkUserName2()"/>
            <span id="userNameSpan2"></span><br/>
            密码:<input type="text" name="pwd" onBlur="checkPwd2()"/>
            <span id="userPwdSpan2"></span>
            <br/>
        </form>
        <input type="button" value="注册" onclick="mySubmit()" />
        <script type="text/javascript">
            function mySubmit(){
                var oFormNode = document.getElementById("userinfo");
                if(checkUserName2()&&checkPwd2()){
                    oFormNode.submit();//submit 提交表单。 
                }
            }

            function checkUserName2(){
                var oUserNameNode = document.getElementsByName("userName")[1];
                var userName = oUserNameNode.value;
                //用正则检验
                var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母就可以，注意"i"的双引号不能省略
                //i---表示忽略大小写
                //var regg =new RegExp("^[a-z]{4}$","i") ;//只含4个连续的字母,注意"i"中的双引号不能省略
                //^代表开始   $代表结束

                var oUserNameSpan = document.getElementById("userNameSpan2");
                if(reg.test(userName)){
                    oUserNameSpan.innerHTML="用户名格式正确".fontcolor("green");
                    return true;
                }else{
                    oUserNameSpan.innerHTML="用户名格式错误".fontcolor("red");
                    return false;                   
                }
            }

            function checkPwd2(){
                var oUserPwdNode = document.getElementsByName("pwd")[1];
                var pwd = oUserPwdNode.value;
                var reg2 = new RegExp("^[\\w\\d]{6,9}$");
                if(reg2.test(pwd)){
                    document.getElementById("userPwdSpan2").innerHTML="密码格式符合要求".fontcolor("green");
                    return true;
                }else{
                    document.getElementById("userPwdSpan2").innerHTML="密码长度必须是6-9位的数字字母或下划线".fontcolor("red");
                    return false;

                }
            }

        </script>

    </body>
</html>

show.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>这是注册后的显示页面</title>
    </head>

    <body>
        <%
            out.println(request.getAttribute("uName"));
            out.println(request.getAttribute("pwd"));
         %>
        <%  
            for(int i=0;i<3;i++){
            //这个下面可以写html代码
        %>
            <div>欢迎</div>
        <% 
            //这个上面可以写html代码
            } 
        %>
    </body>
</html>

RegServlet.java
这个是new一个Servlet。
会自动给我们配好web.xml 

package cn.hncu.user;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class RegServlet extends HttpServlet {
    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        request.setCharacterEncoding("utf-8");//设置编码
        String name = request.getParameter("userName");//userName为提交过来的表单中的一个input的name属性
        String pwd = request.getParameter("pwd");
        //System.out.println(name);
        request.setAttribute("uName", "hncu---"+name);
        request.setAttribute("pwd", "pwd---"+pwd);

        request.getRequestDispatcher("/dhtml/6formsubmit/jsps/show.jsp").forward(request, response);
        //输出，导向另外的页面显示
    }

}

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" 
    xmlns="http://java.sun.com/xml/ns/javaee" 
    xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
    xsi:schemaLocation="http://java.sun.com/xml/ns/javaee 
    http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
  <display-name></display-name>
  <servlet>
    <description>This is the description of my J2EE component</description>
    <display-name>This is the display name of my J2EE component</display-name>
    <servlet-name>RegServlet</servlet-name>
    <servlet-class>cn.hncu.user.RegServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>RegServlet</servlet-name>
    <url-pattern>/servlet/RegServlet</url-pattern>
  </servlet-mapping>    
  <welcome-file-list>
    <welcome-file>index.jsp</welcome-file>
  </welcome-file-list>
</web-app>

360浏览器8.1 演示图片：

当格式都填写正确时，点注册按钮，自动跳转到另外的页面。

有一个格式错误时，点注册按钮不会有反应的。

注册表单的验证且控制提交–前端校验–最终版本:

代码演示：

<html>
    <head>
        <title>DHTML技术演示---注册表单的验证且控制提交--前端校验--最终版本</title>
        <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

        <script type="text/javascript">
            function check(name,reg,spanId,okInfo,errInfo){
                var value = document.getElementsByName(name)[0].value;
                //用正则检验
                var oSpanNode = document.getElementById(spanId);
                if(reg.test(value)){
                    oSpanNode.innerHTML=okInfo.fontcolor("green");
                    return true;
                }else{
                    oSpanNode.innerHTML=errInfo.fontcolor("red");
                    return false;
                }

            }

            function checkUserName(){
                var reg = new RegExp("[a-z]{4}","i");//包含4个连续的字母,注意"i"中的双引号不能省略
                return check("userName",reg,"userNameSpan","用户名格式正确","用户名格式错误");
            }

            function checkPwd(){
                var reg = new RegExp("^[\\w\\d]{6,9}$");
                return check("pwd",reg,"userPwdSpan","密码格式符合要求","密码长度必须是6-9位的数字字母或下划线");
            }

            function checkPwd2(){
                var flag;
                var pwd = document.getElementsByName("pwd")[0].value;
                var pwd2 = document.getElementsByName("pwd2")[0].value;
                var oSpanNode = document.getElementById("userPwd2Span");
                if(pwd==pwd2){
                    oSpanNode.innerHTML="两次密码一致".fontcolor("green");
                    flag = true;
                }else{
                    oSpanNode.innerHTML="两次密码不一致".fontcolor("red");
                    flag = false;
                }
                return flag;
            }

            function checkMail(){
                var reg = /^\w+@\w+(\.\w+)+$/i;
                return check("mail",reg,"userMailSpan","邮箱格式正确","邮箱格式不正确");
            }

            function checkUser(){//控制表单的提交
                if(checkUserName() && checkPwd() && checkPwd2() && checkMail() ){
                    return true;
                }else{
                    return false;
                }
            }

        </script>


    </head>

    <body>
        <form action="/myDhtmlProj/servlet/RegServlet" onsubmit="return checkUser();">
            用户名：<input type="text" name="userName" onblur="checkUserName()" />
            <span id="userNameSpan"></span>
            <br/>
            输入密码：<input type="text" name="pwd" onblur="checkPwd()" />
            <span id="userPwdSpan"></span>
            <br/>
            确认密码：<input type="text" name="pwd2" onBlur="checkPwd2()"/>
            <span id="userPwd2Span"></span>
            <br/>
            邮件地址：<input type="text" name="mail" onblur="checkMail()" />
            <span id="userMailSpan"></span>
            <br/>
            <input type="submit" value="注册">
        </form>



    </body>
</html>

360浏览器8.1 演示结果：

只有全部格式填写正确后再点注册按钮才会有响应。

全部格式填写正确后，点注册按钮后的页面，其实就是跳到show.jsp页面了。（自己可以随便定位到哪的）

文章标签：
JavaScript
数据安全/隐私保护
Web App开发
前端开发
Java
关键词：
JavaScript技术
网络技术
JavaScript网络
网络编程技术
JavaScript表单验证
谙忆
目录
相关文章
请看我回答~
|
18天前
|
存储 安全 网络安全
云计算与网络安全：技术融合的双刃剑
【10月更文挑战第40天】本文将深入探讨云计算与网络安全之间的关系，揭示它们如何相互依赖又互相挑战。我们将从云计算的基本概念出发，逐步引入网络安全的重要性，并分析云服务在提供便利的同时可能带来的安全隐患。文章还将讨论信息安全的关键领域，如加密技术和身份验证机制，以及如何在云计算环境中加强这些安全措施。通过本文，读者将获得对云计算和网络安全复杂关系的深刻理解，并认识到在享受技术便利的同时，维护网络安全的重要性。
请看我回答~
25 1
shuj
|
3天前
|
存储 安全 网络安全
云计算与网络安全：技术融合的双刃剑
在数字化浪潮中，云计算如同一股不可阻挡的力量，推动着企业和个人用户步入一个高效、便捷的新时代。然而，随之而来的网络安全问题也如影随形，成为制约云计算发展的阿喀琉斯之踵。本文将探讨云计算服务中的网络安全挑战，揭示信息保护的重要性，并提供实用的安全策略，旨在为读者呈现一场技术与安全的较量，同时指出如何在享受云服务带来的便利的同时，确保数据的安全和隐私。
shuj
13 6
肥猪肥猪-17824
|
1天前
|
监控 安全 网络安全
云计算与网络安全：技术挑战与解决方案
随着云计算技术的飞速发展，其在各行各业的应用越来越广泛。然而，随之而来的网络安全问题也日益凸显。本文将从云服务、网络安全和信息安全等技术领域出发，探讨云计算面临的安全挑战及相应的解决方案。通过实例分析和代码示例，旨在帮助读者更好地理解云计算与网络安全的关系，提高网络安全防护意识。
肥猪肥猪-17824
9 2
技术混子
|
15天前
|
监控 安全 网络安全
云计算与网络安全：探索云服务中的信息安全技术
【10月更文挑战第43天】本文将深入探讨云计算与网络安全的交汇点，重点分析云服务中的信息安全技术和策略。我们将从云计算的基础架构出发，逐步剖析网络安全的重要性，并介绍如何通过实施有效的安全措施来保护数据和应用程序。文章还将提供实用的代码示例，帮助读者更好地理解和应用这些安全技术。
技术混子
29 4
天下无贼001
|
18天前
|
存储 安全 网络安全
云计算与网络安全：云服务、网络安全、信息安全等技术领域
【10月更文挑战第40天】随着互联网技术的不断发展，云计算已经成为了现代社会中不可或缺的一部分。然而，云计算的普及也带来了一系列的安全问题。本文将探讨云计算与网络安全之间的关系，包括云服务、网络安全、信息安全等领域。我们将通过代码示例来展示如何保护云计算环境中的敏感信息和数据。最后，我们将总结云计算与网络安全之间的紧密联系，并展望未来的发展趋势。
天下无贼001
28 3
aliyun8599273441-30642
|
19天前
|
云安全 安全 网络安全
云计算与网络安全：技术挑战与解决策略
【10月更文挑战第39天】随着云计算技术的飞速发展，网络安全问题也日益凸显。本文将探讨云计算环境下的网络安全挑战，并提出相应的解决策略。通过分析云服务模型、网络安全威胁以及信息安全技术的应用，我们将揭示如何构建一个安全的云计算环境。
aliyun8599273441-30642
35 3
土木林森
|
19天前
|
存储 网络协议 安全
30 道初级网络工程师面试题，涵盖 OSI 模型、TCP/IP 协议栈、IP 地址、子网掩码、VLAN、STP、DHCP、DNS、防火墙、NAT、VPN 等基础知识和技术，帮助小白们充分准备面试，顺利踏入职场
本文精选了 30 道初级网络工程师面试题，涵盖 OSI 模型、TCP/IP 协议栈、IP 地址、子网掩码、VLAN、STP、DHCP、DNS、防火墙、NAT、VPN 等基础知识和技术，帮助小白们充分准备面试，顺利踏入职场。
土木林森
52 2
天下无贼001
|
20天前
|
云安全 安全 网络安全
云计算与网络安全：技术融合的未来之路
【10月更文挑战第38天】 在数字化浪潮中，云计算和网络安全成为支撑现代企业和个人数据安全的两大基石。本文将深入探讨云计算服务如何与网络安全技术相结合，保障信息安全，并分析面临的挑战及未来发展趋势。我们将通过实际案例，揭示云安全的最佳实践，为读者提供一条清晰的技术融合路径。
天下无贼001
28 1
aliyun8599273441-30642
|
1天前
|
存储 安全 网络安全
云计算与网络安全：技术融合下的挑战与机遇
随着云计算技术的飞速发展，网络安全问题也日益凸显。本文将探讨云计算环境下的网络安全挑战，以及如何通过技术创新来应对这些挑战。我们将分析云服务的安全特性，讨论信息安全的最佳实践，并展望未来云计算与网络安全的发展趋势。
aliyun8599273441-30642
10 0
aliyun8599273441-30642
|
20天前
|
存储 安全 网络安全
云计算与网络安全：探索云服务、网络安全和信息安全的技术领域
【10月更文挑战第38天】本文将深入探讨云计算与网络安全之间的关系，包括云服务、网络安全和信息安全等技术领域。我们将通过实例分析，了解如何保护云计算环境中的数据和应用程序，以及如何应对网络安全威胁。同时，我们还将讨论一些常见的网络安全攻击类型，并提出相应的防御策略。最后，我们将介绍一些实用的工具和技术，以帮助您更好地保护您的云计算环境。
aliyun8599273441-30642
32 0

热门文章

最新文章

  • 1
    【深度神经网络 One-shot Learning】孪生网络少样本精准分类
  • 2
    访问windows 共享提示&quot;找不到网络路径&quot; 排查过程
  • 3
    一文带大家，彻底了解【NAT技术-网络地址转换】
  • 4
    Linux 2 unit7 挂载网络共享
  • 5
    调整DC的网络对网络是否会有影响?
  • 6
    网络通信第五课 生产环境下的Post通信
  • 7
    AT&T、IBM等公司结成新的物联网网络安全联盟
  • 8
    富士通咨询在博科SDN架构上构建新一代IP网络以支持全球业务增长
  • 9
    全球5%网络已开始使用IPv6
  • 10
    美国：将日本纳入网络攻击防御保护伞
  • 1
    Linux网络编程 网络基础知识
    68
  • 2
    网络编程知识点总结（7）
    48
  • 3
    网络编程知识点总结（6）
    50
  • 4
    网络编程知识点总结（5）
    48
  • 5
    网络编程知识点总结（4）
    45
  • 6
    网络编程知识点总结（3）
    50
  • 7
    网络编程知识点总结（2）
    46
  • 8
    网络编程知识点总结(1)
    44
  • 9
    【Java网络编程】网络编程概述、UDP通信（DatagramPacket 与 DatagramSocket）
    74
  • 10
    【网络编程】理解客户端和服务器并使用Java提供的api实现回显服务器
    53

    • 相关课程

    更多
  • 云网络白皮书-阿里云网络系列课
  • JavaScript入门与实战
  • 企业上云攻略-阿里云网络产品应用系列教程
  • Linux网络进阶 - TCP/IP协议及OSI七层模型
  • JavaScript 自学手册文档教程
  • 网络管理者必知-2分钟了解新出台的《网络安全法》

    • 相关电子书

    更多
  • JavaScript函数
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • 前端开发基础3：CSS3常见显示属性
  • Html5和Webpack2：Webpack5打包JS和样式表
  • 前端开发基础6：Node.js和LESS预编译工具
  • 容器的网络入门
  • 容器的自定义网络
  • 容器的共享网络模型
    • 下一篇
    阿里云无影云电脑免费试用，最长可试用3个月