HTML JS 限制输入框的内容

最新推荐文章于 2021-06-09 18:37:43 发布

醉在音乐里

最新推荐文章于 2021-06-09 18:37:43 发布

阅读量259

点赞数

文章标签： html

本文链接：https://blog.csdn.net/ZZYYL_/article/details/107801608

版权

输入手机号判定是不是11位的手机号判定输入的邮箱格式对不对

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>陶宇的独家ZY</title>
    <style>
        .div1{
            padding-top:100px;
            padding-left: 50px;
        }
        .div2 {
            width: 295px;
            height: 30px;
            border-radius: 3px;
            border-style:solid;
            border-width: 1px;
            border-color:#708090;
            padding-left: 5px;
        }
    </style>
</head>
<body>
<div class="div1" align="center">
    <table>
        <tr><td align="center"><p>输入手机号：</p></td></tr>
        <tr>
            <td><input  class="div2" type="text" id="text1"  name="number" onkeyup="matchnumber()" placeholder="  11位手机号"></td>
            <td><p id="p1" style="width: 100px;height: 30px" align="" ></p></td>
        </tr>
        <tr><td align="center"><p>输入邮箱：</p></td></tr>
        <tr>
            <td><input class="div2" type="text" id="text2" onkeyup="matchemail()" name="email" placeholder="  输入正确邮箱格式"></td>
            <td><p id="p2" style="width: 100px;height: 30px" ></p></td>
        </tr>
    </table>
</div>
<script>
    function matchnumber(){
        let a =/^[1][0-9]{10}$/;
        if(document.getElementById("text1").value.length==0){
            document.getElementById("text1").style.cssText="border-color:#708090";
            document.getElementById("p1").innerHTML="";
        }else{
            if(a.test(document.getElementById("text1").value)){
                document.getElementById("text1").style.cssText="border-color:#708090";
                document.getElementById("p1").innerHTML="<font size='2px' color='#DCDCDC'>输入正确</font>";
            }else{
                document.getElementById("text1").style.cssText="border-color:#f00";
                document.getElementById("p1").innerHTML="<font size=\"2px\" color=\"#f00\">手机号错误</font>";
            }
        }
    }
    function matchemail(){
        let c=/^[0-9a-zA-Z][0-9a-zA-Z\u4e00-\u9fa5]+@[a-zA-Z0-9]+\.[a-zA-Z]+$/;
        if(document.getElementById("text2").value.length==0){
            document.getElementById("text2").style.cssText="border-color:#708090";
            document.getElementById("p2").innerHTML="";
        }else{
            if(c.test(document.getElementById("text2").value)){
                document.getElementById("text2").style.cssText="border-color:#708090";
                document.getElementById("p2").innerHTML="<font size='2px' color='#DCDCDC'>格式正确</font>";
            }else{
                document.getElementById("text2").style.cssText="border-color:#f00";
                document.getElementById("p2").innerHTML="<font size=\"2px\" color=\"#f00\">格式错误</font>";
            }
        }
    }
</script>
</body>
</html>

正则表达式妙用：

        let  a =new RegExp("[a-z]{3,}");//小写字母至少出现3次
        let b = /^[0-9]/;//以数字开头
        let c =/[a-z]+/;// 是否找到多个小写字母
        let d=/^[0-9].*[A-z]$/;//开头数字  结尾字母  中间.*是任意
        let e=/^[A-Z].*([A-z]&[0-9]){5,9}/
        //已大写字母开头 之后包含大写或小写 和数字  长度为6~10
        let f=/^[A-Z](?=.*?[a-zA-Z])(?=.*?[0-9])[A-Za-z0-9]{5,9}$/
        //已大写字母开头 之后要包含大写和小写和数字  长度为6~10
        let g=/^[A-Z](?=.*?[A-Z])(?=.*[a-z])(?=.*?[0-9])[A-Za-z0-9]{5,9}$/
        //document.getElementById("div1").innerHTML=b.test("133");

醉在音乐里

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML JS 限制输入框的内容

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>陶宇的独家ZY</title> <style> .div1{ padding-top:100px; padding-left: 50px; } .div2 {
复制链接

扫一扫