2017ife_yaoyao学院_task1

最新推荐文章于 2018-04-13 22:21:52 发布

xzbwx960731

最新推荐文章于 2018-04-13 22:21:52 发布

阅读量519

点赞数

分类专栏： ife2017 文章标签： ife

本文链接：https://blog.csdn.net/xzbwx960731/article/details/57090434

版权

ife2017 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

2017ife_yaoyao学院_task1

任务：

表单（一）单个表单项的检验

任务目的
加强对JavaScript的掌握
熟悉常用表单处理逻辑
任务描述
如示例图中所示，在页面中实现一个输入框与按钮，要求点击验证按钮后，对输入框中内容进行格式校验，并在其下方显示校验结果
校验规则
1.字符数为4~16位
2.每个英文字母、数字、英文符号长度为1
3.每个汉字，中文符号长度为2
任务注意事项
要求功能实现与任务描述中完全一致
示例图仅为参考，样式不需要完全实现一致
请注意代码风格的整齐、优雅
代码中含有必要的注释
不允许借助任何第三方组件库实现

相关知识点：

控制input type=”text”的高度和宽度

input
{
    height:30px;/*更改input的高度*/
}

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

提示的切换
更换提示的时候应该将tr整行隐藏起来，id设在tr上，且隐藏和显示应采用以下语句
document.getElementById(“error2”).style.display=”table-row”;
document.getElementById(“init”).style.display=”none”;
判断字符是中文还是英文
中文：text.charCodeAt(i)>256
英文：text.charCodeAt(i)<=256
github演示demo
在github项目中html代码所在的网址前加htmlpreview.github.com/?就可以访问了[应该还会有更加好用的方法，这里的方法仅供参考]

代码:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>yaoyao-task1</title>
    <style>
        form{
            margin-left:50px;
            margin-top:50px;
        }
        label{
            font-size:18px;
            font-weight:bold;
        }
        input{
            height:30px;/*更改input的高度*/
            border-radius:8px;
            border:1px #999 solid;
        }
        #button{
            background-color:blue;
            color:white;
            border:1px blue solid;
            border-radius:4px;
            height:34px;
            font-size:18px;
            width:80px;
        }
        td{
            padding-top:10px;
        }
        /*提示部分*/
        #init{
            font-size:14px;
            color:#999;
        }
        #error1{
            font-size:14px;
            color:red;
            display:none;
        }
        #error2{
            font-size:14px;
            color:red;
            display:none;
        }
        #correct{
            font-size:14px;
            color:green;
            display:none;
        }
    </style>
    <script>
        function check(){
            var text=document.getElementById("username").value;
            var sum=0;
            if(text=="")
            {
                document.getElementById("error2").style.display="table-row";
                document.getElementById("init").style.display="none";
                document.getElementById("error1").style.display="none";
                document.getElementById("correct").style.display="none";
            }
            else
            {
                for(var i=0; i<text.length;i++)
                {
                    if(text.charCodeAt(i)>256)//是中文
                    {
                        sum=sum+2;
                    }
                    else
                    {
                        sum=sum+1;
                    }
                }
                console.log(sum);
                if(sum<4||sum>16)
                {
                    document.getElementById("error1").style.display="table-row";
                    document.getElementById("init").style.display="none";
                    document.getElementById("error2").style.display="none";
                    document.getElementById("correct").style.display="none";
                }
                else
                {
                    document.getElementById("correct").style.display="table-row";
                    document.getElementById("init").style.display="none";
                    document.getElementById("error2").style.display="none";
                    document.getElementById("error1").style.display="none";
                }
            }
        }
    </script>
</head>
<body>
    <form>
        <table>
        <tr>
          <td>
            <label>名称&nbsp;&nbsp;</label>
          </td>
          <td>
            <input type="text" name="username" id="username" size=40px/>
          </td>
          <td>
            <input type="button" id="button" onclick="check()" value="验证"/>
          </td>
        </tr>
        <tr id="init">
          <td></td>
          <td>
            <span>必填，长度为4~16个字符</span>
          </td>
        </tr>
        <tr id="error1">
          <td></td>
          <td>
            <span>输入字符长度不正确</span>
          </td>
        </tr>
        <tr id="error2">
          <td></td>
          <td>
            <span>姓名不能为空</span>
          </td>
        </tr>
        <tr id="correct">
          <td></td>
          <td>
            <span>名称格式正确</span>
          </td>
        </tr>
        </table>
    </form>
</body>
</html>
<!--
注意：更换提示的时候应该将tr整行隐藏起来，id设在tr上，且隐藏和显示应采用以下语句
                document.getElementById("error2").style.display="table-row";
                document.getElementById("init").style.display="none";
-->

xzbwx960731

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2017ife_yaoyao学院_task1

2017ife_yaoyao学院_task1任务：表单（一）单个表单项的检验任务目的加强对JavaScript的掌握熟悉常用表单处理逻辑任务描述如示例图中所示，在页面中实现一个输入框与按钮，要求点击验证按钮后，对输入框中内容进行格式校验，并在其下方显示校验结果校验规则 1.字符数为4~16位 2.每个英文字母、数字、英文符号长度为1 3.每个汉字，中文符号长度为2任务注意
复制链接

扫一扫