[JAVAWEB]3.用js进行客户端数据有效性验证

最新推荐文章于 2023-12-21 16:29:27 发布

低调的嚣张的程序员

最新推荐文章于 2023-12-21 16:29:27 发布

阅读量794

点赞数

分类专栏： 010 JAVAWEB

本文链接：https://blog.csdn.net/zeephom/article/details/77478090

版权

010 JAVAWEB 专栏收录该内容

31 篇文章 1 订阅

订阅专栏

4.复习笔记(这个就是课后习题以及课程所呈现的需求)

写的这么仔细,不用总结了吧,到时候录个小视频

5.自测代码

2.课堂笔记

这里写图片描述

一.用户名检测是否填写了,或者是否都是空格.
function checkit()
    {
        var str=document.getElementsByName("uname").item(0).value;
        str=str.replace(/(^\s*)|(\s*$)/g,""); 
        if(str.length==0)
        {
            //如果输入的全是空格,则选定所有空格,便于下次输入
            document.getElementsByName("uname").item(0).selectionStart=0;
            document.getElementsByName("uname").item(0).selectionEnd=
            document.getElementsByName("uname").item(0).value.length-1;
            document.getElementsByName("uname").item(0).focus();
            document.getElementById("info").innerHTML="请输入用户名";
            return false;
        }

二.密码和重复密码的验证省略.
三.验证爱好是否被选中.
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<style type="text/css">
    input[type="submit"],#info
    {
        float:left;
    }
    #info
    {
        margin-left:20px;
    }
</style>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function checkit()
    {
        var str=document.getElementsByName("uname").item(0).value;
        str=str.replace(/(^\s*)|(\s*$)/g,""); 
        if(str.length==0)
        {
            //如果输入的全是空格,则选定所有空格,便于下次输入
            document.getElementsByName("uname").item(0).selectionStart=0;
            document.getElementsByName("uname").item(0).selectionEnd=
            document.getElementsByName("uname").item(0).value.length-1;
            document.getElementsByName("uname").item(0).focus();
            document.getElementById("info").innerHTML="请输入用户名";
            return false;
        }


        //密码判断省略
        //...
        var flag=false;
        for(var i=0;i<document.getElementsByName("hobby").length;i++)
        {
            if(document.getElementsByName("hobby").item(i).checked)
            {
                flag=true;
                break;
            }

        }
        if(!flag)
        {
            document.getElementById("info").innerHTML="请至少选择一个爱好!";
            return false;
        }
        return true;
    }
</script>
</head>
<body>
<form name="f1" action="show.jsp">
<table>
<tr><td>用户名</td><td><input type="text" name="uname"></td></tr>
<tr><td>密码</td><td><input type="password" name="pwd"></td></tr>
<tr><td>重复密码</td><td><input type="password" name="pwd1"></td></tr>
<tr><td>所在省份</td>
<td>
<select name="prov">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="重庆">重庆</option>
</select>
</td></tr>
<tr><td>兴趣爱好</td><td><input type="checkbox" name="hobby" value="爬山">爬山
<input type="checkbox" name="hobby" value="上网">上网
<input type="checkbox" name="hobby" value="看书">看书
<input type="checkbox" name="hobby" value="下棋">下棋
<input type="checkbox" name="hobby" value="游泳">游泳
<input type="checkbox" name="hobby" value="乒乓球">乒乓球</td>
</tr>
<tr><td colspan="2"><input type="submit" value="提交信息" onClick="return checkit();">
<div id="info"></div></td></tr>

<tr><td></td></tr>
</table>
</form>
</body>
</html>
四.如果button 的type改成button,而不是submit
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>
<head>
<style type="text/css">
    input[type="submit"],#info
    {
        float:left;
    }
    #info
    {
        margin-left:20px;
    }
</style>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
    function checkit()
    {
        var str=document.getElementsByName("uname").item(0).value;
        str=str.replace(/(^\s*)|(\s*$)/g,""); 
        if(str.length==0)
        {
            //如果输入的全是空格,则选定所有空格,便于下次输入
            document.getElementsByName("uname").item(0).selectionStart=0;
            document.getElementsByName("uname").item(0).selectionEnd=
            document.getElementsByName("uname").item(0).value.length-1;
            document.getElementsByName("uname").item(0).focus();
            document.getElementById("info").innerHTML="请输入用户名";
            return;
        }


        //密码判断省略
        //...
        var flag=false;
        for(var i=0;i<document.getElementsByName("hobby").length;i++)
        {
            if(document.getElementsByName("hobby").item(i).checked)
            {
                flag=true;
                break;
            }

        }
        if(!flag)
        {
            document.getElementById("info").innerHTML="请至少选择一个爱好!";
            return;
        }
        document.f1.submit();
    }
</script>
</head>
<body>
<form name="f1" action="show.jsp">
<table>
<tr><td>用户名</td><td><input type="text" name="uname"></td></tr>
<tr><td>密码</td><td><input type="password" name="pwd"></td></tr>
<tr><td>重复密码</td><td><input type="password" name="pwd1"></td></tr>
<tr><td>所在省份</td>
<td>
<select name="prov">
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="重庆">重庆</option>
</select>
</td></tr>
<tr><td>兴趣爱好</td><td><input type="checkbox" name="hobby" value="爬山">爬山
<input type="checkbox" name="hobby" value="上网">上网
<input type="checkbox" name="hobby" value="看书">看书
<input type="checkbox" name="hobby" value="下棋">下棋
<input type="checkbox" name="hobby" value="游泳">游泳
<input type="checkbox" name="hobby" value="乒乓球">乒乓球</td>
</tr>
<tr><td colspan="2"><input type="button" value="提交信息" onClick="checkit()">
<div id="info"></div></td></tr>

<tr><td></td></tr>
</table>
</form>
</body>
</html>