JavaScript 常用的表单交互

最新推荐文章于 2024-06-28 10:00:28 发布

西西噜噜

最新推荐文章于 2024-06-28 10:00:28 发布

阅读量2.5k

点赞数 6

分类专栏： JavaScript 文章标签： JavaScript

本文链接：https://blog.csdn.net/qq_39915585/article/details/83449418

版权

JavaScript 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

一、数据规范性检查

1、应用场合：在判断输入的数据是否符合格式要求、数据的范围、符号什么的

会涉及到正则表达，来验证输入数据的格式

2、例子：验证邮件格式是否符合要求

html部分：

验证在onblur时开始，onblur是文本框失去焦点的意思，具体的操作就是输完数据后，点击浏览器其他空白处；获得焦点是onfocus。

在form元素上使用onsubmit事件，针对表单进行拦截，返回true才能提交

<body>
    <form id="myForm" onsubmit="return validate()">
        请输入email地址：<input type="text" name="email" id="email" value="" onblur="return validate()">
        <span id="msg"></span>
        <div><button type="submit">显示邮件</button></div>
    </form>
</body>

script部分：

正则表达式的规范——一定要有开始与结束：/^正则$/.test(要验证的数据)

<script>
        function showEmail() {
            var showE = document.getElementById("email");
            var msgE=document.getElementById("msg");
            if (/^\w+@\w+\.\w+$/.test(showE.value)) {
                // alert("email格式正确" + showE.value);
                msgE.innerHTML="<font color='aqua'>email输入正确!</font>";
                return true;
            } else {
                // alert("email格式错误" + showE.value);
                msgE.innerHTML="<font color='red'>email输入错误!</font>";
                return false;
            }
        }
        function validate(){
            return showEmail();
        }
    </script>

二、密码验证

1、思路：前端大概是这样，我们都很熟悉的套路：

第一次输入密码时，只检查输入是否为空，为空则发出错误提示

第二次输入密码时，检查是否为空，不为空时，检查与第一次输入的密码是否是一致

2、html部分：

<head>
    <meta charset="UTF-8">
    <title>密码验证</title>
    <script type="text/javascript" src="Js/pwdValidateJs.js"></script>
</head>
<body>
    输入密码：<input type="password" name="pwd" id="pwd"><span id="pwdMsg" ></span><br>
    确认密码：<input type="password" name="config" id="config"><span id="configMsg"></span>
</body>

2、js部分：判断是否为空部分的代码值得日后在其他地方使用。

window.onload=function () {
    var pwdElement=document.getElementById("pwd");
    var configElemrnt=document.getElementById("config");
    pwdElement.addEventListener("blur",validatePwd, false);
    configElemrnt.addEventListener("blur",validateConfig,false);
}

function validatePwd(){
    return validateEmpty("pwd");
}

function validateConfig(){
    if (validateEmpty("config")){
        return validateRepeat("pwd","config");
    }
    return false;
}

function validateEmpty( elementname ) {
    var objElement=document.getElementById(elementname);
    var msgElement=document.getElementById(elementname+"Msg");
    var str = objElement.value.replace(/(^\s*)|(\s*$)/g, '');
    if (str == '' || str == undefined || str == null){
        msgElement.innerHTML="<font color='#dc143c'>输入内容无效！</font>";
        return false;
    }else{
        msgElement.innerHTML="<font color='#006400'>输入内容有效！</font>";
        return true;
    }
}

function validateRepeat(srcName, desName) {
    var srcElement=document.getElementById(srcName);
    var desElement=document.getElementById(desName);
    var desMsgElement=document.getElementById(desName+"Msg");
    if (srcElement.value==desElement.value) {
        desMsgElement.innerHTML="<font color='#006400'>输入一致！</font>";
        return true;
    }else{
        desMsgElement.innerHTML="<font color='#dc143c'>两次输入不一致！</font>";
        return false;
    }

}

三、单选钮 radio

1、特点：多个radio的id都一样！！且同一标签元素的id 和name必须一样！ 就像java中的对象数组

2、例子：选择性别，并显示出来

document.all("sex")将这样一组的标签元素都取出，然后用for循环对其中的各个元素的value进行判断

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.3 单选钮操作</title>
    <script>
        function showSex(){
            // var sex=document.getElementById("sex");
            // alert("性别是："+sex.value);
            var sex=document.all("sex")
            for (i=0;i<sex.length;i++){
                if (sex[i].checked==true){
                    alert("被选中的是："+sex[i].value)
                }
            } 
        }
    </script>
</head>
<body>
    请选择性别：<input type="radio" name="sex" id="sex" value="男" checked>男&nbsp;  <!--设置一个默认值-->
                <input type="radio" name="sex" id="sex" value="女" >女<br>
    <button onclick="showSex()">显示性别</button>

</body>
</html>

四、复选框 checkbox

1、特点：多个checkbox的id都一样！！且同一标签元素的id 和name必须一样！

document.all（"id"）取出这一组的值

2、全选的实现，改变element.checked

3、例子：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.4 复选框操作</title>
    <script>
        function showInst(){
            // var sex=document.getElementById("sex");
            // alert("性别是："+sex.value);
            var fruit=document.all("fruit")
            var show="你选择的水果是：";
            for (i=0;i<fruit.length;i++){
                if (fruit[i].checked){
                    show+=fruit[i].value+"、";

                }
            }
            alert(show);
        }
        function selectAll() {
            var seleElement=document.getElementById("selAll");
            var fruit=document.all("fruit");
            for (i=0;i<fruit.length;i++){
                fruit[i].checked=seleElement.checked;
            }

        }


    </script>
</head>
<body>
        请选择你喜欢的水果：<br>
        <input type="checkbox" value="苹果" name="fruit" id="fruit" >苹果<br>
        <input type="checkbox" value="香蕉" name="fruit" id="fruit" >香蕉<br>
        <input type="checkbox" value="橙子" name="fruit" id="fruit" >橙子<br>
        <input type="checkbox" value="菠萝" name="fruit" id="fruit" >菠萝<br>
        <input type="checkbox" value="葡萄" name="fruit" id="fruit" >葡萄<br>
        <br><br><br>
        <input type="checkbox" value="全选" name="selAll" id="selAll" onclick="selectAll()">全选

<button onclick="showInst()">显示选择的水果</button>

</body>
</html>

五、下拉列表框<select>

有两种方式来实现：

方式一：this.value的方式直接向处理函数传递

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.5 下拉列表框(方式1)</title>
    <script>
        function showCity(city){
            alert("你的家乡是："+city);
        }
    </script>
</head>
<body>
    你的家乡：<select name="city" id="city" onchange="showCity(this.value)">
        <option value="北京-BJ">北京</option>
        <option value="上海-SH">上海</option>
        <option value="杭州-HZ">杭州</option>
    </select>

</body>
</html>

方式二：getElementById的方式-推荐这种，比较习惯

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.5 下拉列表框(方式2)</title>
    <script>
        function showCity(){
            var cityElement=document.getElementById("city")
            alert("你的家乡是："+cityElement.value);
        }

    </script>
</head>
<body>
你的家乡：<select name="city" id="city" onchange="showCity()">
    <option value="北京-BJ">北京</option>
    <option value="上海-SH">上海</option>
    <option value="杭州-HZ">杭州</option>
</select>

</body>
</html>

六、文本域输入<textarea>

1、在输入的同时检查文字的数目是否超过上限

2、例子：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.6 文本域</title>
    <script>
        function validateNote(){
            var noteElement=document.getElementById("note");
            var msgElement=document.getElementById("noteMsg");
            // msgElement.innerHTML="输入数据长度："+noteElement.value.length;
            if (noteElement.value.length<15) {
                msgElement.innerHTML="<font color='green'>还可以输入"+(15-noteElement.value.length)+"</font>";
                document.getElementById("sub").disabled=false;
            }
            else{
                msgElement.innerHTML="<font color='red'>输入文字数目超过上限！</font>";
                document.getElementById("sub").disabled=true;
            }

        }

    </script>
</head>
<body>
<form action="show.html" method="post">
    描述：<br>
    <textarea id="note" name="note" cols="50" rows="10" onkeydown="validateNote()">请在此输入...</textarea>
    <br>
    <span id="noteMsg"></span><br>
    <button type="submit" id="sub" name="sub">保存</button>
</form>