老师，我的JS有问题，我不想用老师在HTML里面写JS代码的方法，这样验证怎么写呀

来源：4-8 表单验证美化综合案例

李可意

2019-07-17 11:06:36

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .onelist{
            margin: 10px 0 5px 12px;
        }
        label{
            width: 80px;
            display: inline-block;
        }
        input,select{
            height: 25px;
            line-height: 25px;
            width: 220px;
            /* 圆角 */
            border-radius: 3px;
            border: 1px solid #e2e2e2;
        }
        input[type="submit"]{
            width: 150px;
            height: 30px;
            line-height: 30px;
        }

        input:required,select:required{
            background: url(./img/star.jpg) no-repeat  90% center;
        }

        /* 必填选项通过验证 */
        input:required:valid,select:required:valid{
            background: url(./img/right.png) no-repeat  90% center;
            box-shadow: 0 0 5px green;
            border-color: green;
        }

        /* 不通过验证 */
        input:focus:invalid,select:focus:invalid{
            background: url(./img/error.png) no-repeat  90% center;
            box-shadow: 0 0 5px red;
            border-color: red;
            outline: 1px solid red;             /* 4 个边框的样式 */
        }
    </style>
</head>
<body>
    <!-- method="post" 数据传输方法 -->
    <form action="" class="myform" method="post">
        <div class="onelist">
            <label for="userName">手机号</label>
            <input type="text" name="userName" id="userName" placeholder="请输入手机号码" pattern="^1[0-9]{10}$" required>
        </div>
        <div class="onelist">
            <label for="password">密码</label>
            <input type="password" name="password" id="password" placeholder="6~20位" pattern="^[a-zA-Z0-9]\w{5,19}$" required onchange="checkpassword()">
        </div>
        <div class="onelist">
            <label for="repassword">确认密码</label>
            <input type="password" name="repassword" id="repassword" placeholder="确认密码" required onchange="checkpassword()">
        </div>
        <div class="onelist">
            <label for="repassword">了解方式</label>
            <select name="konw" required>
                <option value="">--请选择--</option>
                <option value="1">搜索引擎</option>
                <option value="2">朋友圈</option>
                <option value="3">朋友推广</option>
                <option value="4">广告投放</option>
            </select>
        </div>
        <div class="ontlist">
            <input type="submit" value="提交">
        </div>
    </form>

    <script>
        var userName = document.getElementById("userName");
        var password = document.getElementById("passwrod");
        var repassword = document.getElementById("repassword");

        // 手机号验证信息
        userName.oninput = function(){
            userName.setCustomValidity("");
        }
        userName.oninvalid = function(){
            userName.setCustomValidity("请输入正确的手机号!");
        }

        // 密码验证信息
        password.oninput = function(){
            password.setCustomValidity("");
        }
        password.oninvalid = function(){
            password.setCustomValidity("请输入正确的密码!");
        }

        // 确认密码验证信息
        function checkpassword(){
            if(password.value != repassword.value){
                repassword.setCustomValidity("两次密码输入不一致");
            }
            else{
                repassword.setCustomValidity("");
            }
        }
    </script>
</body>
</html>

写回答

1回答