003注册表单

最新推荐文章于 2020-07-21 18:34:13 发布

哔了狗的哑铃

最新推荐文章于 2020-07-21 18:34:13 发布

阅读量248

点赞数

分类专栏： JS

本文链接：https://blog.csdn.net/Davennewong/article/details/79799164

版权

JS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

正则表达式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function req(req,value) {
            if(eval(req).test(value)){
                console.log("yes");
            }
            else
            {
                console.log("no");
            }
        }
    </script>
</head>
<body>
<input type="text" οnblur="req('/^123$/',this.value);">
<input type="text" οnblur="req('/^1[3-9][0-9]{9}$/',this.value);">
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        var username=document.getElementById("user").value;
        var password=document.getElementById("pwd").value;
        function validate() {
            if(username.length>6&&username.value.length<18){

            }
            else{
                alert("用户名错误");
                username=null;
            }
        }
        function vali_pwd() {
            if(isNaN(Number(password))){
                alert("密码错误");
            }
            else {

            }
        }
    </script>
</head>
<body>
<input type="text" id="user" οnblur="validate()"><!--onblur失去焦点-->
<input type="text" id="pwd" οnclick="vali_pwd()">
</body>
</html>

----------------------------------------------------------------------------------------------------------------------------------

动态事件绑定

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        span{
            display: none;
        }
    </style>
</head>
<body>
<form action="http://www.baidu.com">
<input type="text" req='/^123$/'><span>错误</span><br>
<input type="text" req='/^456$/'><span>错误</span><br>
<input type="text" req='/^789$/'><span>错误</span><br>
<button οnclick="return check();">注册</button>
</form>
</body>
<script>
    var list=document.getElementsByTagName("input");
    for(var i=0;i<list.length;i++){
        list[i].οnblur=function(){
            if(eval(this.getAttribute("req")).test(this.value)){
                this.style.border="1px solid blue";
                this.nextSibling.style.display="none";
            }
            else{
                this.style.border="1px solid red";
                this.nextSibling.style.display="block";
            }
        }
    }

    function check() {
        var n_count=0;
        for(var i=0;i<list.length;i++) {
            if (eval(list[i].getAttribute("req")).text(list[i].value)){

            }
            else{
                n_count++;
            }
        }s
        if(n_count==0){
            return true;
        }
        else{
            return false;
        }
    }
</script>
</html>

----------------------------------------------------------------------------------------------------------------------------------

完整版

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    * {
        margin: 0;
    }

    input {
        display: inline-block;
        width: 326px;
        height: 14px;
        padding: 12px 12px;
        border: 1px solid rgb(221, 221, 221);
        margin: 0 15px 40px 60px;
        font-size: 14px;

    }

    span {
        display: inline-block;
        line-height: 42px;
        font-size: 14px;
        color: #666;
        font-weight: 700;
        margin-left: 0;
        float: left;
        position: absolute;
    }

    .s1 {
        display: none;
        float: left;
        width: 300px;
        height: 28px;
        padding: 2px 0 0 0;
        font-size: 12px;
        line-height: 14px;
        margin-left: 15px;
        margin-top: 0;
        position: absolute;
    }

</style>

<body>
<form action="http://www.baidu.com">
    <span>用户名</span>
    <input type="text" id="username" placeholder="请设置用户名" rep='/^[a-zA-Z0-9]{4,15}$/' οnclick="shiyong(this)" οnblur="shiqujiaodian(this)"><span class="s1">设置后不可更改 <br>中英文均可，最长14个英文或7个汉字</span><br>
    <span>手机号</span>
    <input type="text" id="phone" placeholder="可用于登陆和找回密码" rep='/^1[3-9][0-9]{9}$/' οnclick="shiyong(this)" οnblur="shiqujiaodian(this)"><span class="s1">请输入中国大陆手机号，其他用户不可见</span><br>
    <span>密　码</span>
    <input type="text" id="password" placeholder="请设置登陆密码" rep='/^[a-zA-Z0-9]{5,15}$/' οnclick="shiyong(this)" οnblur="shiqujiaodian(this)"><span class="s1">设置后不可更改 <br>中英文均可，最长14个英文或7个汉字</span><br>
    <button οnclick="return check();">注册</button>
</form>
<script>
    var list = document.getElementsByTagName("input");
    function shiyong(ele) {
        ele.style.border = "1px solid rgb(72,142,231)";
        ele.nextSibling.style.display = "inline-block";
    }
    function shiqujiaodian(ele) {
        if (eval(ele.getAttribute("rep")).test(ele.value)) {
            ele.style.border ="1px solid rgb(221, 221, 221)";
            ele.nextSibling.style.display = "none";
        }
        else {
            ele.style.border = "1px solid red";
        }
    }
    function  check () {
        var n_count = 0;//失败的次数
        for(var i=0;i<list.length;i++){
            if (eval(list[i].getAttribute("rep")).test(list[i].value)){

            }else{
                n_count++;
            }

            return(n_count==0)?true:false;
        }
    }

</script>
</body>
</html>

哔了狗的哑铃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
003注册表单

正则表达式&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;script&gt; function req(req,val
复制链接

扫一扫