表单案例：附图

小鱼儿 2022-04-23 15:16 134阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3NTM4NA_size_16_color_FFFFFF_t_70]  
  
  
  
  
<span class="katex--inline">美少女战士</span>

<style>
            * {
                padding: 0;
                margin: 0;
                box-sizing: border-box;
            }
            form {
                width: 500px;
    
                height: auto;
                margin: 0 auto;
            }
            form fieldset {
                padding: 20px 30px;
            }
            input {
                margin-bottom: 20px;
            }
            p {
                margin-bottom: 10px;
                display: none;
                /*隐藏*/
            }
            span[class*="iconfont icon-"] { /*选中类名以icon-开头的元素*/
                margin-left: 30px;
                font-size: 20px;
                color: #55a532;
                /*隐藏*/
                visibility: hidden;
    
            }
    
        </style>
    </head>
    <body>
    <form action="" method="" name="myform">
        <fieldset>
            
            <legend>学生档案</legend>
            
             <label for="userpasswd">姓名:</label>
            <input type="text" name="username" id="username"  autofocus>
            <span class="iconfont icon-check-circle" id="name-icon"></span><br> 
    
            <p id="nametips">请输入2--6位字符</p>
    
            密码:<input type="password" name="userpasswd" id="userpasswd">
            <span class="iconfont icon-check-circle"></span><br>
            <p id="passtips">6-16位数字或字母</p>
            电话号: <input type="text" name="telnumber">
            <span class="iconfont icon-check-circle"></span><br>
            <p id="teltips">请输入11位数字</p>
            邮箱: <input type="text" name="useremail"><br>
            <p id="emailtips">请输入地球人能识别的邮箱</p>
            身份证: <input type="text" name="userid"><br>
            <p id="idtips">请输入合法身份证</p>
    
            <input type="submit">
            <input type="reset">
    
    
    
    
        </fieldset>
    
    
    </form>
    
    <script src="获取元素.js"></script>
    <script>
    
        window.onload = function () {
            //1获取表单元素 监听用户如若填写完毕 ---》离焦 ---》js判断是否符合规则
    
            var form = document.myform;
            var username = form.username //form.name 属性名  姓名对应元素
            var telnumber = form.telnumber
    
    
            //onblur 离焦 onfocus 聚焦
            username.onblur = function () {
                //获取用户输入的值进行验证
                var userInput_name = username.value
                var nameReg = /^[\u4e00-\u9fa5]{2,6}$/g //不加引号  表达式
                console.log(userInput_name) //正则表达式匹配 如果test方法 返回true 则符合规定
                //将p元素的文本改变成绿色的您的输入符合规则
                //如果返回false 则p显示 文字变成红色
                if(!nameReg.test(userInput_name)){ //不符合规则
                    my$('#nametips').style.display = 'block' //显示
                    my$('#nametips').style.color = 'red'
                    //切换图标类为X  icon-close-circle
    
                    //将后边给前者，显示x 也就是用x代替class类
                    my$('#name-icon').setAttribute('class','iconfont icon-close-circle')
                    //控制页面控件是否显示的一个属性 此时显示
                    my$('#name-icon').style.visibility = 'visible'
                    //图标颜色此时为红色
                    my$('#name-icon').style.color = 'red'
                    return false;
    
                }
                else {
                    //此时区别前者，符合规则时  显示通过验证，并显示绿色
                    my$('#nametips').style.display = 'block' //显示
                    my$('#nametips').innerText = '通过验证'
                    my$('#nametips').style.color = 'green'
                    //√图标显示
                    my$('#name-icon').style.visibility = 'visible'
                    // 将后边给前者，显示√ 也就是用√代替class类
                    my$('#name-icon').setAttribute('class','iconfont icon-check-circle')
                    return true;
                }
    
    
            }
            telnumber.onblur = function () {
                var userInput_tel = telnumber.value
                var telReg =/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/
                //不加引号  表达式
                //正则表达式匹配 如果test方法 返回true 则符合规定
                //将p元素的文本改变成绿色的您的输入符合规则
                //如果返回false 则p显示 文字变成红色
                if(!telReg.test(userInput_tel)){ //不符合规则
                    my$('#teltips').style.display = 'block' //显示
                    my$('#teltips').style.color = 'red'
    
                }
                else {
                    my$('#teltips').style.display = 'block' //显示
                    my$('#teltips').innerText = '通过验证'
                    my$('#teltips').style.color = 'green'
                }
    
    
            }
    
    
        }
    
    </script>
    </body>
    </html>
    
    
    
    
    /*获取元素  ---》 一个 */
    function my$(selector ) {
    
        /*判断？ #   */
        return document.querySelector(selector)
    }
    
    function my$All(selector ) {
    
        /*判断？ #   */
        return document.querySelectorAll(selector)
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDY3NTM4NA_size_16_color_FFFFFF_t_70]: /images/20220226/b4f4bd1fd1764d4db5f67fde11ac0377.png

发表评论取消回复

表情：

评论列表（有 0 条评论，134人围观）

还没有评论，来说两句吧...

相关阅读

相关提交表单与验证表单案例

提交表单与验证表单案例学习路线：[JavaScript基础语法（输出语句）][JavaScript]\->[JavaScript基础语法（变量）][JavaScript

悠悠/ 2024年03月31日 13:34/ 0 赞/ 44 阅读

相关 5_1表单验证案例

验证要求: 用户名不能为空用户名长度大于等于6 用户名中不能有数字密码不少于5位两次密码必须一致邮箱格式正确必须有@和. 例如[123456789@qq.

叁歲伎倆/ 2023年09月27日 15:09/ 0 赞/ 65 阅读

相关 js表单事件及验证码案例

效果图如下： ![在这里插入图片描述][20200331182036340.gif] <!DOCTYPE html> <html lang="en">

末蓝、/ 2023年07月20日 05:56/ 0 赞/ 66 阅读

相关 PHP表单案例

index.php: <?php if (isset($_POST['userValue'])&&!empty($_POST['userValue'])) { ech

谁践踏了优雅/ 2022年08月05日 08:12/ 0 赞/ 168 阅读

相关 form表单样式案例

代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

梦里梦外;/ 2022年06月09日 13:43/ 0 赞/ 213 阅读

相关列表增删改案例：附图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

你的名字/ 2022年04月23日 15:24/ 0 赞/ 139 阅读

相关放大镜案例：附图

鼠标随着小方框的移动在右边大图显示出来。 ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aH

﹏ヽ暗。殇╰゛Y/ 2022年04月23日 15:16/ 0 赞/ 216 阅读

相关表单案例：附图

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

小鱼儿/ 2022年04月23日 15:16/ 0 赞/ 135 阅读

相关 MySQL索引优化（索引单表优化案例）

1、单表查询优化建表SQL CREATE TABLE IF NOT EXISTS `article` ( `id` INT(10) UNSIGNED NO

淡淡的烟草味﹌/ 2021年11月24日 01:34/ 0 赞/ 420 阅读

相关 MySQL--索引单表优化案例

索引单表优化建表及插入数据： CREATE TABLE IF NOT EXISTS `article`(文章表 `id` INT(10) UNSIGN

短命女/ 2021年08月13日 21:31/ 0 赞/ 443 阅读