9.23

最新推荐文章于 2024-04-26 17:21:31 发布

nmdshh

最新推荐文章于 2024-04-26 17:21:31 发布

阅读量262

点赞数

本文链接：https://blog.csdn.net/nmdshh/article/details/101220141

版权

js 实现登录界面
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkForm() {
            var name = document.getElementById("username").value;
            if (name.length < 6) {
                alert("长度太短");
                return false;
            }
            var ps= document.getElementById("password").value;
            var reps = document.getElementById("repassword").value;
            if (ps != reps){
                alert("两次输入的密码不同");
                return false;
            }
            var phone= document.getElementById("mobile").value;
            if (!/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone)){
                alert("手机格式不对");
                return false;
            }
            var email = document.getElementById("email").value;
            if (!/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/.test(email)){
                alert("邮箱格式不对");
                return false;
            }
        }
    </script>
</head>
<body>
<form action="#">
    <div>用户名：<input id="username" type="text"></div>
    <div>密码：<input id="password" type="password"></div>
    <div>确认密码：<input id="repassword" type="password"></div>
    <div>手机号码：<input id="mobile" type="number"></div>
    <div>邮箱：<input id="email" type="text"></div>
    <div><input type="submit" value="注册" onclick="checkForm()"></div>
</form>
</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function selectOne() {
            var lefts = document.getElementById("leftselect");
            var options = lefts.options;
            var rightselect = document.getElementById("rightselect");
            for (var i = 0; i < options.length; i++) {
                var option1 = options[i];
                if (option1.selected) {
                    rightselect.appendChild(option1)
                }
            }
        }

        function selectAll() {
            var all = document.getElementById("leftselect");
            var options = all.options;
            var a = options.length;
            var rightselect = document.getElementById("rightselect");
            for (var i = 0; i < a; i++) {
                var option1 = options[i];
                rightselect.appendChild(option1)
            }
        }

        function selectOner() {
            var right = document.getElementById("rightselect");
            var options = right.options;
            var leftselect = document.getElementById("leftselect");
            for (var i = 0; i < options.length; i++) {
                var option1 = options[i];
                if (option1.selected) {
                    leftselect.appendChild(option1)
                }
            }
        }

        function selectAllr() {
            var all = document.getElementById("rightselect");
            var options = all.options;
            var leftselect = document.getElementById("leftselect");
            var a=options.length;
            for (var i=0;i< a;i++) {
                var option1 = options[i];
                leftselect.appendChild(option1)
            }
        }
    </script>
</head>
<body>
<table width="400px" border="1px" >
    <tr>
        <td>分类名称</td>
        <td><input type="text" value="手机数码"/></td>
    </tr>
    <tr>
        <td>分类描述</td>
        <td><input type="text" value="这里都是手机数码"/></td>
    </tr>
    <tr>
        <td>分类商品</td>
        <td>
            <div style="float: left">
                已有商品<br/>
                <select multiple="multiple" id="leftselect" ondblclick="selectOne()">
                    <option>华为</option>
                    <option>小米</option>
                </select>
                <br/>
                <a href="#" onclick="selectOne()">&gt;&gt;</a>
                <br/>
                <a href="#" onclick="selectAll()">&gt;&gt;&gt;</a>
            </div>
            <div style="float: right">
                未有商品<br/>
                <select multiple="multiple" id="rightselect" ondblclick="selectOner()">
                    <option>苹果</option>
                    <option>三星</option>
                </select>
                <br/>
                <a href="#" onclick="selectOner()">&lt;&lt;</a>
                <br>
                <a href="#" onclick="selectAllr()">&lt;&lt;&lt;</a>
            </div>
        </td>
    </tr>
    <tr>
        <td><input type="submit" value="提交"/></td>
    </tr>
</table>
</body>
</html>