DHTML技术：表单验证<form>

最新推荐文章于 2024-05-11 02:50:29 发布

new___Smile

最新推荐文章于 2024-05-11 02:50:29 发布

阅读量781

点赞数

分类专栏： dhtm技术

本文链接：https://blog.csdn.net/new___Smile/article/details/51730148

版权

dhtm技术专栏收录该内容

4 篇文章 0 订阅

订阅专栏

表单里有个< input type=”submit”>是用来提交的，而中的onsubmit可以控制这个表单是否能提交，默认是true。在这里我们借用这个属性可以做到页面处理一些基本的格式等简单功能。

我们用一个onblur事件在表单的内容框，当失去焦点的时候我们就做onblur指定的函数事件。这里我们又学习一种好的思维，那就是写一个通用函数check()里面给定参数，而这些参数来自于每个表单中的onblur事件所调函数传入。而这个通用函数根据参数做相关功能之后返回相对应的true或者false。最后我们在< form οnsubmit=”return checkAll();”>来写一个对应的checkAll()函数，这个函数只判断每个独立函数都为true才返回true，否则返回false，这样就达到了页面做一些简单的处理，来减轻后台服务器的压力。

代码实例如下所示：

代码中我们需要注意的是：

正则表达式的语法
用new来创建正则表达式和直接赋值创建正则表达式是区别的，new的方式要加一个转义字符而直接赋值的方式则不需要。

因为是提交，所以是需要后台来支撑，我们通过new一个Servlet来做，在这里我用的一个简单的来测试。但是要注意的是 < form>里面的action给的路径是在tomcat的wepapps目录下所以前面要加”/”+我们的项目名。而在request.getRequestDispatcher(path)这个path我们是在webRoot目录下，前面要加”/”。

表单提交页面

<html>
    <head>
         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>form表单验证</title>
        <style type="text/css">
        </style>
        <script type="text/javascript">
            //通用函数
            function check(valueName,reg,spanNodeId,okInfo,errorInfo){
                var value = document.getElementsByName(valueName)[0].value;
                var spanNode = document.getElementById(spanNodeId);
                if(reg.test(value)){
                    spanNode.innerHTML=okInfo.fontcolor("green");
                    return true;
                }else{
                    spanNode.innerHTML=errorInfo.fontcolor("red");
                    return false;
                }
            }
            //用户名检查函数
            function checkUserName(){
                var userName = "userName";
                var reg = /[a-z]{4}/;//正则表达式
                //var reg = new RegExp("[a-z]{4}");
                var spanNodeId ="userNameSpan";
                var okInfo ="用户名格式正确";
                var errorInfo ="用户名格式错误";
                return  check(userName,reg,spanNodeId,okInfo,errorInfo);
            }
            function checkPassWord(){
                var pwdValue = "userPassword";//编辑框中的内容
                var reg = /^[0-9]{6,9}$/;//正则表达式
                var spanNodeId = "userPwdSpan";
                var okInfo ="密码格式正确";
                var errorInfo ="密码必须是6-9位小数";
                return  check(pwdValue,reg,spanNodeId,okInfo,errorInfo);
            }
            function checkMail(){
                var mailName = "mail";//编辑框中的内容
                var reg = /^\w+@+\w+(\.\w+)+$/;//正则表达式
                var spanNodeId = "mailSpan";
                var okInfo ="邮箱格式正确";
                var errorInfo ="邮箱格式错误";
                return  check(mailName,reg,spanNodeId,okInfo,errorInfo);
            }
            function checkAll(){
                if(checkUserName() && checkPassWord() && checkMail()){
                    return true;
                }else{
                    return false;
                }
            }
        </script>
    </head>
    <body>
        <!-- 这里要注意这个action里面是在tomcat的wepapps里面所以要加项目名/dhtmlPro+xml中servlet-mapping里的url-pattern     -->
        <form action="/dhtmlPro/servlet/MyReg" onsubmit="return checkAll();">
            姓名:<input type="text" name="userName" onblur="checkUserName()" >
            <span id="userNameSpan"></span>
            <br/><br/>
            密码:<input type="text" name="userPassword" onblur="checkPassWord()">
            <span id="userPwdSpan"></span><br/><br/>
            邮箱:<input type="text" name="mail" onblur="checkMail()">
            <span id="mailSpan"></span>
            <br/><br/>
            <input type="submit" value="注册" />
        </form>
    </body>
</html>

Servlet代码

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 MyReg 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");
        //System.out.println(name);
        request.setAttribute("uName", name);
        String path="/dhtml1/6fromsubmit/shwo.jsp";//这里前面要加一个/表示在WebRoot目录下
        request.getRequestDispatcher(path).forward(request, response);
    }

}

表单提交页面结果代码

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
  <head>
    <title>表单提交页面结果</title>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script type="text/javascript">
     </script>
  </head>
  <body>
    <%
        out.println(request.getAttribute("uName"));
    %>
        <div>nice job</div>
  </body>

</html>

new___Smile

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
DHTML技术：表单验证<form>

表单里有个< input type=”submit”>是用来提交的，而中的onsubmit可以控制这个表单是否能提交，默认是true。在这里我们借用这个属性可以做到页面处理一些基本的格式等简单功能。我们用一个onblur事件在表单的内容框，当失去焦点的时候我们就做onblur指定的函数事件。这里我们又学习一种好的思维，那就是写一个通用函数check()里面给定参数，而这些参数来自于每个表单中的onb
复制链接

扫一扫