找回密码
当前位置：前端开发者 > 教程 > 正文

前端开发_表单开发验证

2018-08-11 18:25:10 分类：教程 阅读(513) 评论(0)

python前端开发教程|前端与移动开发就业|web前端开发入门教程

html 代码

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>表单验证</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            font: 12px/1.5 “宋体”, “Arial”, “sans-serif”, “Tahoma”;
            color: #ccc;
        }
        input,
        img,
        label {
            vertical-align: middle;
        }
        form {
            width: 740px;
            height: 500px;
            margin: 100px auto;
        }
        form div {
            overflow: hidden;
            clear: both;
        }
        form div label {
            float: left;
            clear: both;
        }
        form div label .text {
            width: 152px;
            height: 26px;
            padding: 0 2px;
            border: 1px solid #ccc;
        }
        form div label b {
            font-size: 12px;
            color: #ccc;
            visibility: hidden;
        }
        form div em {
            display: inline-block;
            font-size: 12px;
            text-align: center;
            color: #fff;
            vertical-align: middle;
            width: 53px;
            height: 15px;
            line-height: 15px;
            background-color: #FFD009;
        }
        form div .active {
            background-color: #F60;
        }
        div span {
            display: inline-block;
            width: 80px;
            text-align: right;
        }
        .submitBtn {
            width: 135px;
            height: 33px;
            color: #ccc visibility: #fff;
            margin: 20px 0 0 80px;
        }
        .changeImg {
            width: 22px;
            height: 22px;
            display: inline-block;
            vertical-align: middle;
        }
        .msg {
            line-height: 12px;
            color: #999 margin-left: 5px;
            display: none;
        }
        .msg i {
            display: inline-block;
            vertical-align: middle;
            width: 25px;
            height: 20px;
        }
        .msg .ati {
            background-position: 0 -71px;
        }
        .msg .err {
            background-position: 0 -39px;
        }
        .msg .ok {
            background-position: 0 -99px;
        }
    </style>
</head>
<body>
    <form action=””>
        <div>
            <label>
                <span>
                    会员名:
                </span>
                <input type=”text” class=”text” />
            </label>
            <p class=”msg”>
                <i class=”ati”></i>
                5-25个字符，一个汉字为两个字符，推荐使用中文会员名
            </p>
        </div>
        <div>
            <label>
                <span></span>
                <b id=”count”>0个字符</b>
            </label>
        </div>
        <div>
            <label>
                <span>登录密码：</span>
                <input type=”password” class=”text” />
            </label>
            <p class=”msg”>
                <i class=”err”></i>
                5-25个字符，一个汉字为两个字符，推荐使用中文会员名
            </p>
        </div>
        <div style=”margin: 3px 0 10px 0″>
            <label>
                <span></span>
                <em class=”active”>弱</em>
                <em>中</em>
                <em>强</em>
            </label>
        </div>
        <div style=”margin-bottom: 20px”>
            <label>
                <span>
                    确认密码：
                </span>
                <input type=”password” class=”text” disabled=”” />
            </label>
            <p class=”msg”>
                <i class=”ati”></i>
                请在输入一次
            </p>
        </div>
        <div>
            <label>
                <span>
                    验证码：
                </span>
                <input type=”text” class=”text” style=”width: 50px” />
                <img src=”” alt=”” width=”100″ height=”30″ />
                <a href=”javascript:;” class=”changeimg” title=”重新获取验证码”></a>
            </label>
        </div>
        <div>
            <input type=”submit” class=”submitBtn btn” value=”同意协议并注册” />
        </div>
    </form>
    <script>
        function getLength(str) {//输入字符的长度
            return str.replace(/[^\x00-\xff]/g, ‘xx’).length;
        }
        //判断字符是否相等
        function findStr(str, n) {
            var tmp = 0;
            for (var i = 0; i < str.length; i++) {
                if (str.charAt(i) == n) {
                    tmp++
                }
            }
            return tmp;
        }
        window.onload = function () {
            //取标签
            var oInput = document.getElementsByTagName(“input”);
            var oName = oInput[0];
            var pwd = oInput[1];
            var pwd2 = oInput[2];
            var oP = document.getElementsByTagName(“p”);
            var name_msg = oP[0];
            var pwd_msg = oP[1];
            var pwd2_msg = oP[2];
            var count = document.getElementById(“count”);
            var oEm = document.getElementsByTagName(“em”);
            var name_length = 0;
            //用户名的匹配
            // 1.数字、字母、(不区分大小写)、汉字、下划线
            // 2.5-25个字符，推荐使用中文会员名
            //a-zA-Z用\w
            var re = /[^\w\u4e00-\u9fa5]/g;//匹配所以非法字符
            //添加事件 用户名
            oName.onfocus = function () {//用户获得焦点时
                name_msg.style.display = “block”;
                name_msg.innerHTML = “<i class=’ati’></i>5-25个字符，一个汉字为2个字符，推荐使用中文会员名。”
                if (name_length == 0) {
                    count.style.visibility = “hidden”;
                }
            };
            oName.onkeyup = function () {//用户输入时
                count.style.visibility = “visible”;
                name_length = getLength(this.value);
                count.innerHTML = name_length + “个字符”
            };
            oName.onblur = function () {//用户离开时
                var re = /[^\w\u4e00-\u9fa5]/g;//匹配所以非法字符
                if (re.test(this.value)) {
                    name_msg.innerHTML = “<i class=’err’></i>含有非法字符”
                }
                else if (this.value == “”) {
                    name_msg.innerHTML = “<i class=’err’></i>不能为空”
                }
                else if (name_length > 25) {
                    name_msg.innerHTML = “<i class=’err’></i>长度不能超过25个字符”
                }
                else if (name_length < 6) {
                    name_msg.innerHTML = “<i class=’err’></i>长度不能少于6个字符”
                }
                else {
                    name_msg.innerHTML = “<i class=’ok’></i>ok”
                }
            };
            //密码
            pwd.onfocus = function () {
                pwd_msg.style.display = “block”;
                pwd_msg.innerHTML = “<i class=’ati’></i>6-16个字符,请使用字母加数字或符号的组合密码，不能单独使用字母、数字或符号。”
            };
            pwd.onkeyup = function () {
                if (this.value.length > 5) {//当长度大于5时激活active
                    oEm[1].className = “active”;
                    pwd2.removeAttribute(“disabled”);//去掉禁用属性
                    pwd2_msg.style.display = “block”;//显示后面的文字
                }
                else {//但删除密码长度时的动作
                    oEm[1].className = “”;
                    pwd2.setAttribute(“disabled”);//添加禁用属性
                    pwd2_msg.style.display = “none”;//隐藏后面的文字
                }
                //密码长度大于10
                if (this.value.length > 10) {//当长度大于5时激活active
                    oEm[2].className = “active”;
                } else {//但删除密码长度时的动作
                    oEm[2].className = “”;
                }
            };
            pwd.onblur = function () {
                var m = findStr(pwd.value, pwd.value[0]);
                var re_n = /[^\d]/g;//非数字
                var re_t = /[^a-zA-z]/g;
                //不能为空
                if (this.value == “”) {
                    pwd_msg.innerHTML = “<i class=’err’></i>不能为空!”
                }
                //不能有相同字符
                else if (m == this.value.length) {
                    pwd_msg.innerHTML = “<i class=’err’></i>不能用相同字符!”
                }
                //长度为6-16
                else if (this.value.length < 6 || this.value.length > 16) {
                    pwd_msg.innerHTML = “<i class=’err’></i>长度应为6-16个字符!”
                }
                //不能全为数字
                else if (!re_n.test(this.value)) {
                    pwd_msg.innerHTML = “<i class=’err’></i>不能全为数字!”
                }
                //不能全为字母
                else if (!re_t.test(this.value)) {
                    pwd_msg.innerHTML = “<i class=’err’></i>不能全为字母!”
                }
                //0k
                else {
                    pwd_msg.innerHTML = “<i class=’ok’></i>ok”
                }
            };
            //确认密码
            pwd2.onfocus = function () {//获得焦点
                if (this.value != pwd.value) {
                    pwd2_msg.innerHTML = “<i class=’err’></i>两次输入的密码不一致!”
                } else {
                    pwd2_msg.innerHTML = “<i class=’ok’></i>ok”
                }
            };
        }
    </script>
</body>
</html>

前端开发新框架|移动端前端开发的理解|初级前端开发教程

» 本文来自：前端开发者 » 《前端开发_表单开发验证》
» 本文链接地址：https://www.rokub.com/5175.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论